From 83b6a113dec22dfb5aaf1120da7698cc6197fa9c Mon Sep 17 00:00:00 2001 From: Brooke Date: Fri, 15 Jul 2022 13:30:46 -0700 Subject: [PATCH 01/36] PROD-2033 #comment turn off ssr on dev #time 1h --- client/{gatsby-ssr.js => gatsby-ssr.js.bak} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename client/{gatsby-ssr.js => gatsby-ssr.js.bak} (100%) diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js.bak similarity index 100% rename from client/gatsby-ssr.js rename to client/gatsby-ssr.js.bak From d398d32c21b847afc036c8e13f2291110028fdf0 Mon Sep 17 00:00:00 2001 From: Chris McCann Date: Fri, 15 Jul 2022 16:38:47 -0700 Subject: [PATCH 02/36] PROD-2023 reenable SSR --- client/{gatsby-ssr.js.bak => gatsby-ssr.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename client/{gatsby-ssr.js.bak => gatsby-ssr.js} (100%) diff --git a/client/gatsby-ssr.js.bak b/client/gatsby-ssr.js similarity index 100% rename from client/gatsby-ssr.js.bak rename to client/gatsby-ssr.js From f7c71f425d1d7879b73109b9d199ba3e2629d90f Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Fri, 15 Jul 2022 15:18:06 +0300 Subject: [PATCH 03/36] PROD-2381 - remove the acceptedPrivacyTerms check and redirect --- client/src/components/layouts/learn.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/client/src/components/layouts/learn.tsx b/client/src/components/layouts/learn.tsx index 8f3a01f63cf3f4..72e1d1b36aefd9 100644 --- a/client/src/components/layouts/learn.tsx +++ b/client/src/components/layouts/learn.tsx @@ -10,7 +10,6 @@ import { tryToShowDonationModal } from '../../redux'; import DonateModal from '../Donation/donation-modal'; -import createRedirect from '../create-redirect'; import './prism.css'; import './prism-night.css'; @@ -42,8 +41,6 @@ const mapDispatchToProps = { tryToShowDonationModal }; -const RedirectEmailSignUp = createRedirect('/email-sign-up'); - type LearnLayoutProps = { isSignedIn?: boolean; fetchState: FetchState; @@ -53,9 +50,7 @@ type LearnLayoutProps = { }; function LearnLayout({ - isSignedIn, fetchState, - user, tryToShowDonationModal, children }: LearnLayoutProps): JSX.Element { @@ -77,10 +72,6 @@ function LearnLayout({ return ; } - if (isSignedIn && !user.acceptedPrivacyTerms) { - return ; - } - return ( <> From aef941936b8b846687be29e15724effb257eef97 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Mon, 18 Jul 2022 17:56:13 +0300 Subject: [PATCH 04/36] PROD-2382 - replace mobile tabs with dropdown pane picker --- client/src/assets/icons/chevron-down.tsx | 36 ++++ client/src/components/layouts/variables.css | 3 + .../templates/Challenges/classic/classic.css | 4 +- .../templates/Challenges/classic/editor.css | 10 + .../templates/Challenges/classic/editor.tsx | 14 +- .../Challenges/classic/mobile-layout.tsx | 82 ++------ .../classic/mobile-pane-selector.css | 64 ++++++ .../classic/mobile-pane-selector.tsx | 185 ++++++++++++++++++ .../Challenges/components/side-panel.css | 3 +- .../Challenges/components/tool-panel.css | 5 +- 10 files changed, 336 insertions(+), 70 deletions(-) create mode 100755 client/src/assets/icons/chevron-down.tsx create mode 100755 client/src/templates/Challenges/classic/mobile-pane-selector.css create mode 100755 client/src/templates/Challenges/classic/mobile-pane-selector.tsx diff --git a/client/src/assets/icons/chevron-down.tsx b/client/src/assets/icons/chevron-down.tsx new file mode 100755 index 00000000000000..f0635aebb0aed2 --- /dev/null +++ b/client/src/assets/icons/chevron-down.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +function ExternalLink( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { + const { t } = useTranslation(); + + return ( + + {t('icons.chevron-down')} + + + ); +} + +ExternalLink.displayName = 'ExternalLink'; + +export default ExternalLink; diff --git a/client/src/components/layouts/variables.css b/client/src/components/layouts/variables.css index c0f09ade0dd873..294bc1799e77a0 100644 --- a/client/src/components/layouts/variables.css +++ b/client/src/components/layouts/variables.css @@ -37,9 +37,12 @@ --tc-link-blue-light: #5fb7ee; --tc-black: #000; --tc-black-100: #2a2a2a; + --tc-black-20: #d4d4d4; --tc-black-10: #e9e9e9; --tc-black-5: #f4f4f4; --tc-blue-140: #16679a; + --tc-blue-25: #bae1f9; + --tc-blue-10: #eaf6fd; } .dark-palette { diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css index b16469afc244e0..27d1486bb46058 100644 --- a/client/src/templates/Challenges/classic/classic.css +++ b/client/src/templates/Challenges/classic/classic.css @@ -33,9 +33,11 @@ #challenge-page-tabs .tab-content { height: calc( - 100vh - var(--header-height, 0px) - var(--flash-message-height, 0px) - 69px + 100vh - var(--header-height, 0px) - var(--flash-message-height, 0px) - 69px - + 16px ); overflow-y: auto; + padding-bottom: 16px; } #challenge-page-tabs .tab-pane { diff --git a/client/src/templates/Challenges/classic/editor.css b/client/src/templates/Challenges/classic/editor.css index f74d909ef6c287..325dd91c5678de 100644 --- a/client/src/templates/Challenges/classic/editor.css +++ b/client/src/templates/Challenges/classic/editor.css @@ -17,6 +17,16 @@ textarea.inputarea { background: var(--editor-background); } +.editor-monaco-wrap { + height: calc(100% - 26px); + display: block; + overflow: hidden; +} + +.editor-monaco-wrap + .all-rights-link { + padding-left: 32px; +} + .breadcrumbs-demo { font-size: 16px; margin: 0 0 1.2rem; diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx index 1afb22ce9c07e8..8a42878fdbf2ea 100644 --- a/client/src/templates/Challenges/classic/editor.tsx +++ b/client/src/templates/Challenges/classic/editor.tsx @@ -59,12 +59,14 @@ import { } from '../redux'; import GreenPass from '../../../assets/icons/green-pass'; import Code from '../../../assets/icons/code'; +import ExternalLink from '../../../assets/icons/link-external'; import LowerJaw from './lower-jaw'; import './editor.css'; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call const MonacoEditor = Loadable(() => import('react-monaco-editor')); +const currentYear = new Date().getFullYear(); interface EditorProps { canFocus: boolean; @@ -1111,7 +1113,7 @@ const Editor = (props: EditorProps): JSX.Element => { const editorTheme = theme === Themes.Night ? 'vs-dark-custom' : 'vs-custom'; return ( }> - + { theme={editorTheme} /> + ); }; diff --git a/client/src/templates/Challenges/classic/mobile-layout.tsx b/client/src/templates/Challenges/classic/mobile-layout.tsx index a6d437a4225750..b48dbea7bb08ee 100644 --- a/client/src/templates/Challenges/classic/mobile-layout.tsx +++ b/client/src/templates/Challenges/classic/mobile-layout.tsx @@ -1,9 +1,7 @@ -import { TabPane, Tabs } from '@freecodecamp/react-bootstrap'; -import i18next from 'i18next'; import React, { Component, ReactElement } from 'react'; import ToolPanel from '../components/tool-panel'; -import EditorTabs from './editor-tabs'; +import MobilePaneSelector, { Tab } from './mobile-pane-selector'; interface MobileLayoutProps { editor: JSX.Element | null; @@ -19,14 +17,6 @@ interface MobileLayoutProps { usesMultifileEditor: boolean; } -enum Tab { - Editor = 'editor', - Preview = 'preview', - Console = 'console', - Notes = 'notes', - Instructions = 'instructions' -} - interface MobileLayoutState { currentTab: Tab; } @@ -60,64 +50,28 @@ class MobileLayout extends Component { usesMultifileEditor } = this.props; - const editorTabPaneProps = { - mountOnEnter: true, - unmountOnExit: true - }; - // Unlike the desktop layout the mobile version does not have an ActionRow, // but still needs a way to switch between the different tabs. return ( - <> - - {!hasEditableBoundaries && ( - - {instructions} - - )} - - {usesMultifileEditor && } - {editor} - - - {testOutput} - - {hasNotes && usesMultifileEditor && ( - - {notes} - - )} - {hasPreview && ( - - {preview} - - )} - +
+ +
+ {currentTab === Tab.Editor && editor} + {currentTab === Tab.Instructions && instructions} + {currentTab === Tab.Console && testOutput} + {currentTab === Tab.Notes && notes} + {currentTab === Tab.Preview && preview} +
- +
); } } diff --git a/client/src/templates/Challenges/classic/mobile-pane-selector.css b/client/src/templates/Challenges/classic/mobile-pane-selector.css new file mode 100755 index 00000000000000..dada2e41592194 --- /dev/null +++ b/client/src/templates/Challenges/classic/mobile-pane-selector.css @@ -0,0 +1,64 @@ +.mobile-pane-selector { + display: flex; + padding: 0 16px; +} + +.mobile-pane-selector.open .mobile-pane-toggle-icon { + transform: rotate(180deg); +} + +.mobile-pane-selector .dropdown-toggle { + display: flex; + align-items: center; + justify-content: space-between; + font-weight: bold; +} + +.mobile-pane-selector .btn.btn { + width: 100%; + background: var(--tc-blue-10); + border: 0 none; + border-bottom: 1px solid var(--tc-black-20); + + font-family: 'Barlow'; + font-weight: 600; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + margin: 0; + box-shadow: none; + text-align: left; + padding: 9px 16px 10px; + color: var(--tc-black); + outline: none; +} + +.mobile-pane-selector > .btn { + border-radius: 4px 4px 0 0; + font-weight: 700; +} + +.mobile-pane-selector > .btn.dropdown-toggle:hover, +.mobile-pane-selector > .btn.dropdown-toggle:focus { + background: var(--tc-blue-10); + border-color: var(--tc-black-20); +} + +.mobile-pane-selector .btn.active { + font-weight: 700; + background: var(--tc-blue-25); + box-shadow: none; + color: var(--tc-black); +} + +.mobile-pane-selector .dropdown-menu { + padding: 0 16px; + width: 100%; + margin-top: 0; + background: transparent none; + box-shadow: none; + border: 0 none; +} +.mobile-pane-selector .dropdown-menu .btn:last-child { + border-radius: 0 0 4px 4px; +} diff --git a/client/src/templates/Challenges/classic/mobile-pane-selector.tsx b/client/src/templates/Challenges/classic/mobile-pane-selector.tsx new file mode 100755 index 00000000000000..e441915022ffcb --- /dev/null +++ b/client/src/templates/Challenges/classic/mobile-pane-selector.tsx @@ -0,0 +1,185 @@ +import React, { Component } from 'react'; +import i18next from 'i18next'; +import { Button, Dropdown } from '@freecodecamp/react-bootstrap'; +import { find, map } from 'lodash'; +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; + +import { sortChallengeFiles } from '../../../../../utils/sort-challengefiles'; +import { ChallengeFile, ChallengeFiles } from '../../../redux/prop-types'; +import { + toggleVisibleEditor, + visibleEditorsSelector, + challengeFilesSelector +} from '../redux'; +import ChevronDown from '../../../assets/icons/chevron-down'; +import './mobile-pane-selector.css'; + +export enum Tab { + Editor = 'editor', + Preview = 'preview', + Console = 'console', + Notes = 'notes', + Instructions = 'instructions' +} + +type VisibleEditors = { + [key: string]: boolean; +}; + +interface MobilePaneSelectorProps { + activePane: string; + challengeFiles: ChallengeFiles; + hasNotes: boolean; + hasPreview: boolean; + usesMultifileEditor: boolean; + hasEditableBoundaries: boolean; + togglePane: (pane: Tab) => void; + toggleVisibleEditor: typeof toggleVisibleEditor; + visibleEditors: VisibleEditors; +} + +const mapStateToProps = createSelector( + visibleEditorsSelector, + challengeFilesSelector, + (visibleEditors: VisibleEditors, challengeFiles: ChallengeFiles) => ({ + visibleEditors, + challengeFiles + }) +); + +const mapDispatchToProps = { + toggleVisibleEditor +}; + +class MobilePaneSelector extends Component { + static displayName: string; + + state = { + dropdownOpen: false + }; + + handleDopdownToggle = (open: boolean) => { + this.setState({ + dropdownOpen: open + }); + }; + + render() { + const { + activePane, + hasNotes, + hasPreview, + usesMultifileEditor, + challengeFiles, + hasEditableBoundaries, + togglePane: onTogglePane, + toggleVisibleEditor, + visibleEditors + } = this.props; + + const toggleEditor = (file: string) => { + Object.entries(visibleEditors) + .filter(([, visible]) => visible) + .forEach(([key]) => toggleVisibleEditor(key)); + toggleVisibleEditor(file); + this.handleDopdownToggle(false); + }; + + const togglePane = (pane: Tab) => { + onTogglePane(pane); + this.handleDopdownToggle(false); + }; + + const activeEditor = find(challengeFiles, { + fileKey: + Object.keys(visibleEditors).find(d => visibleEditors[d]) ?? + challengeFiles?.[0]?.fileKey + }) as ChallengeFile; + const activeFile = `${activeEditor?.name}.${activeEditor?.ext}`; + + const selectedPane = + activePane === Tab.Editor + ? activeFile + : { + [Tab.Instructions]: i18next.t('learn.editor-tabs.info'), + [Tab.Console]: i18next.t('learn.editor-tabs.tests'), + [Tab.Notes]: i18next.t('learn.editor-tabs.notes'), + [Tab.Preview]: i18next.t('learn.editor-tabs.preview') + }[activePane]; + + return ( + + + {selectedPane} + + + + + + {map( + (sortChallengeFiles(challengeFiles) ?? []) as ChallengeFiles, + (challengeFile: ChallengeFile) => ( + + ) + )} + + {!hasEditableBoundaries && ( + + )} + + + + {hasNotes && usesMultifileEditor && ( + + )} + + {hasPreview && ( + + )} + + + ); + } +} + +MobilePaneSelector.displayName = 'MobilePaneSelector'; + +export default connect(mapStateToProps, mapDispatchToProps)(MobilePaneSelector); diff --git a/client/src/templates/Challenges/components/side-panel.css b/client/src/templates/Challenges/components/side-panel.css index 8f254509c09cd9..522bc6182696c0 100644 --- a/client/src/templates/Challenges/components/side-panel.css +++ b/client/src/templates/Challenges/components/side-panel.css @@ -34,8 +34,7 @@ } .all-rights-link { - text-align: right; - margin-bottom: 32px; + text-align: left; } .all-rights-link a, diff --git a/client/src/templates/Challenges/components/tool-panel.css b/client/src/templates/Challenges/components/tool-panel.css index afb173e9283b4e..69408a27220801 100644 --- a/client/src/templates/Challenges/components/tool-panel.css +++ b/client/src/templates/Challenges/components/tool-panel.css @@ -17,6 +17,7 @@ .tool-panel-group-mobile { display: flex; flex-direction: row-reverse; + padding: 0 16px; } .tool-panel-group .btn-group { @@ -36,7 +37,6 @@ .tool-panel-group-mobile .btn-group { display: block; - width: 100%; margin: 0 2px; } @@ -50,7 +50,8 @@ width: calc(100% + 2px); text-align: center; min-width: 240px; - left: -1px; + left: auto; + right: -1px; } .tool-panel-group .dropdown-menu a { From aa7b2080b086b54056b9a8930c33acdd559d418a Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 10:16:57 -0700 Subject: [PATCH 05/36] turn off SSR --- client/gatsby-ssr.js | 50 -------------------------------------------- 1 file changed, 50 deletions(-) delete mode 100644 client/gatsby-ssr.js diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js deleted file mode 100644 index c0c0fd3ccaf563..00000000000000 --- a/client/gatsby-ssr.js +++ /dev/null @@ -1,50 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import { I18nextProvider } from 'react-i18next'; -import { Provider } from 'react-redux'; - -import i18n from './i18n/config'; -import { createStore } from './src/redux/createStore'; -import layoutSelector from './utils/gatsby/layout-selector'; -import { getheadTagComponents, getPostBodyComponents } from './utils/tags'; - -const store = createStore(); - -export const wrapRootElement = ({ element }) => { - return ( - - {element} - - ); -}; - -wrapRootElement.propTypes = { - element: PropTypes.any -}; - -export const wrapPageElement = layoutSelector; - -export const onRenderBody = ({ - pathname, - setHeadComponents, - setPostBodyComponents -}) => { - setHeadComponents(getheadTagComponents()); - setPostBodyComponents(getPostBodyComponents(pathname)); -}; - -export const onPreRenderHTML = ({ - getHeadComponents, - replaceHeadComponents -}) => { - const headComponents = getHeadComponents(); - headComponents.sort((x, y) => { - if (x.key === 'bootstrap-min-preload' || x.key === 'bootstrap-min') { - return -1; - } else if (y.key === 'bootstrap-min-preload' || y.key === 'bootstrap-min') { - return 1; - } - return 0; - }); - replaceHeadComponents(headComponents); -}; From c399a64def6e334b37c6e785dc240c28f6c5b076 Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 10:35:08 -0700 Subject: [PATCH 06/36] PROD-2492 #comment add ssr back #time 3h --- client/gatsby-ssr.js | 50 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 client/gatsby-ssr.js diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js new file mode 100644 index 00000000000000..c0c0fd3ccaf563 --- /dev/null +++ b/client/gatsby-ssr.js @@ -0,0 +1,50 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { I18nextProvider } from 'react-i18next'; +import { Provider } from 'react-redux'; + +import i18n from './i18n/config'; +import { createStore } from './src/redux/createStore'; +import layoutSelector from './utils/gatsby/layout-selector'; +import { getheadTagComponents, getPostBodyComponents } from './utils/tags'; + +const store = createStore(); + +export const wrapRootElement = ({ element }) => { + return ( + + {element} + + ); +}; + +wrapRootElement.propTypes = { + element: PropTypes.any +}; + +export const wrapPageElement = layoutSelector; + +export const onRenderBody = ({ + pathname, + setHeadComponents, + setPostBodyComponents +}) => { + setHeadComponents(getheadTagComponents()); + setPostBodyComponents(getPostBodyComponents(pathname)); +}; + +export const onPreRenderHTML = ({ + getHeadComponents, + replaceHeadComponents +}) => { + const headComponents = getHeadComponents(); + headComponents.sort((x, y) => { + if (x.key === 'bootstrap-min-preload' || x.key === 'bootstrap-min') { + return -1; + } else if (y.key === 'bootstrap-min-preload' || y.key === 'bootstrap-min') { + return 1; + } + return 0; + }); + replaceHeadComponents(headComponents); +}; From f96d06ee705e5620e19ce73d8f3acbea2621142a Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 11:36:37 -0700 Subject: [PATCH 07/36] PROD-2492 #comment add logging of slugs that are created --- client/utils/gatsby/challenge-page-creator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/utils/gatsby/challenge-page-creator.js b/client/utils/gatsby/challenge-page-creator.js index bcc334f56ec66b..c99912f9347bc8 100644 --- a/client/utils/gatsby/challenge-page-creator.js +++ b/client/utils/gatsby/challenge-page-creator.js @@ -70,7 +70,7 @@ exports.createChallengePages = function (createPage) { } = challenge; // TODO: challengeType === 7 and isPrivate are the same, right? If so, we // should remove one of them. - + console.debug('########## slug', slug); createPage({ path: slug, component: getTemplateComponent(challengeType), From ea28cb576e6cc4efff2c9dbdc03c09757e1ea816 Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 11:39:59 -0700 Subject: [PATCH 08/36] PROD-2492 #comment layout selector logging #time 15 --- client/utils/gatsby/layout-selector.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/utils/gatsby/layout-selector.tsx b/client/utils/gatsby/layout-selector.tsx index bcc173f84fc0e2..d96e6f2488139f 100644 --- a/client/utils/gatsby/layout-selector.tsx +++ b/client/utils/gatsby/layout-selector.tsx @@ -18,7 +18,8 @@ export default function layoutSelector({ const { location: { pathname } } = props; - + console.debug('############ Layout Selector location', location); + console.debug('############ Layout Selector element', element); if (element.type === FourOhFourPage) { return ( From cdf3828b7b5e655168b723fe1c0976f100e3d883 Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 11:44:47 -0700 Subject: [PATCH 09/36] PROD-2492 #comment more path logging #time 5m --- client/src/utils/path-parsers.ts | 1 + client/utils/gatsby/layout-selector.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/utils/path-parsers.ts b/client/src/utils/path-parsers.ts index 587606f409c01d..cb61cf78c6d816 100644 --- a/client/src/utils/path-parsers.ts +++ b/client/src/utils/path-parsers.ts @@ -6,6 +6,7 @@ const splitPath = (pathname: string): string[] => export const isChallenge = (pathname: string): boolean => { const pathArray = splitPath(pathname); + console.debug('########## Path PArsers pathARray', pathArray); return ( // learn/// (pathArray.length === 4 && pathArray[0] === 'learn') || diff --git a/client/utils/gatsby/layout-selector.tsx b/client/utils/gatsby/layout-selector.tsx index d96e6f2488139f..2d5fad1edebd69 100644 --- a/client/utils/gatsby/layout-selector.tsx +++ b/client/utils/gatsby/layout-selector.tsx @@ -18,7 +18,7 @@ export default function layoutSelector({ const { location: { pathname } } = props; - console.debug('############ Layout Selector location', location); + console.debug('############ Layout Selector props', props); console.debug('############ Layout Selector element', element); if (element.type === FourOhFourPage) { return ( From d9b3a9cda16f46c01274996ad668b2a9539a4c3d Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 11:49:34 -0700 Subject: [PATCH 10/36] PROd-2492 #comment improve logging #time 10m --- client/utils/gatsby/layout-selector.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/utils/gatsby/layout-selector.tsx b/client/utils/gatsby/layout-selector.tsx index 2d5fad1edebd69..2623418700639e 100644 --- a/client/utils/gatsby/layout-selector.tsx +++ b/client/utils/gatsby/layout-selector.tsx @@ -18,8 +18,11 @@ export default function layoutSelector({ const { location: { pathname } } = props; - console.debug('############ Layout Selector props', props); - console.debug('############ Layout Selector element', element); + console.debug( + '############ Layout Selector pathname', + props?.location?.pathname + ); + console.debug('############ Layout Selector element type', element?.type); if (element.type === FourOhFourPage) { return ( From 6d2f376750fe14c95cc305d0bc41bc895cdd2d8b Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 13:48:22 -0700 Subject: [PATCH 11/36] PROD-2492 #comment add logging pathname on render body; remove obsolete logging #time 10m --- client/gatsby-ssr.js | 1 + client/utils/gatsby/challenge-page-creator.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js index c0c0fd3ccaf563..89da51c1d59b28 100644 --- a/client/gatsby-ssr.js +++ b/client/gatsby-ssr.js @@ -29,6 +29,7 @@ export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => { + console.debug('on render body', pathname); setHeadComponents(getheadTagComponents()); setPostBodyComponents(getPostBodyComponents(pathname)); }; diff --git a/client/utils/gatsby/challenge-page-creator.js b/client/utils/gatsby/challenge-page-creator.js index c99912f9347bc8..186fdf9940b3c7 100644 --- a/client/utils/gatsby/challenge-page-creator.js +++ b/client/utils/gatsby/challenge-page-creator.js @@ -70,7 +70,6 @@ exports.createChallengePages = function (createPage) { } = challenge; // TODO: challengeType === 7 and isPrivate are the same, right? If so, we // should remove one of them. - console.debug('########## slug', slug); createPage({ path: slug, component: getTemplateComponent(challengeType), From b285137bedb7531b0a3fd62465ddcd1925a7dd04 Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 15:45:30 -0700 Subject: [PATCH 12/36] PROD-2492 #comment use gatsby s3 plugin #time 1h --- Jenkinsfile | 3 +- client/gatsby-config.js | 10 +- package-lock.json | 2256 ++++++++++++++++++++++++++++++++++++++- package.json | 4 +- 4 files changed, 2235 insertions(+), 38 deletions(-) diff --git a/Jenkinsfile b/Jenkinsfile index b218758d02d469..878fe51864429d 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -136,7 +136,8 @@ pipeline { //input(message: 'Hello World!', ok: 'Submit') sh """ #!/bin/bash - ./master_deploy.sh -d CFRONT -e $DEPLOY_ENV -c $ENABLE_CACHE + #./master_deploy.sh -d CFRONT -e $DEPLOY_ENV -c $ENABLE_CACHE + gatsby-plugin-s3 deploy """ } } diff --git a/client/gatsby-config.js b/client/gatsby-config.js index b588b3353197da..c299b5f2984aec 100644 --- a/client/gatsby-config.js +++ b/client/gatsby-config.js @@ -123,6 +123,14 @@ module.exports = { icon: 'src/assets/images/square_puck.png' } }, - 'gatsby-plugin-remove-serviceworker' + 'gatsby-plugin-remove-serviceworker', + { + resolve: `gatsby-plugin-s3`, + options: { + bucketName: 'freecodecamp-mfe.topcoder-dev.com', + hostname: 'freecodecamp-mfe.topcoder-dev.com', + protocol: 'https' + } + } ] }; diff --git a/package-lock.json b/package-lock.json index 3f16129c49ded7..6f01f465cef24d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ ], "dependencies": { "dotenv": "10.0.0", + "gatsby-plugin-s3": "^0.3.8", "invariant": "2.2.4" }, "devDependencies": { @@ -14640,6 +14641,11 @@ "version": "4.2.2", "license": "MIT" }, + "node_modules/@types/async": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/@types/async/-/async-2.4.2.tgz", + "integrity": "sha512-bWBbC7VG2jdjbgZMX0qpds8U/3h3anfIqE81L8jmVrgFZw/urEDnBA78ymGGKTTK6ciBXmmJ/xlok+Re41S8ww==" + }, "node_modules/@types/babel__core": { "version": "7.1.16", "license": "MIT", @@ -14853,6 +14859,11 @@ "@types/node": "*" } }, + "node_modules/@types/glob-to-regexp": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@types/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", + "integrity": "sha512-S0mIukll6fbF0tvrKic/jj+jI8SHoSvGU+Cs95b/jzZEnBYCbj+7aJtQ9yeABuK3xP1okwA3jEH9qIRayijnvQ==" + }, "node_modules/@types/graceful-fs": { "version": "4.1.5", "license": "MIT", @@ -16660,6 +16671,11 @@ "node": ">=8.0.0" } }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==" + }, "node_modules/anymatch": { "version": "3.1.2", "license": "ISC", @@ -16983,7 +16999,6 @@ }, "node_modules/ast-types": { "version": "0.14.2", - "dev": true, "license": "MIT", "dependencies": { "tslib": "^2.0.1" @@ -16998,7 +17013,6 @@ }, "node_modules/ast-types/node_modules/tslib": { "version": "2.4.0", - "dev": true, "license": "0BSD" }, "node_modules/astral-regex": { @@ -18926,7 +18940,6 @@ "version": "1.5.0", "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", - "dev": true, "optional": true, "dependencies": { "file-uri-to-path": "1.0.0" @@ -20182,7 +20195,6 @@ }, "node_modules/cli-spinners": { "version": "2.6.1", - "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -22176,6 +22188,11 @@ "version": "2.0.0", "license": "MIT" }, + "node_modules/data-uri-to-buffer": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-1.2.0.tgz", + "integrity": "sha512-vKQ9DTQPN1FLYiiEEOQ6IBGFqvjCa5rSK3cWMy/Nespm5d/x3dGFT9UBZnkLxCwua/IXBi2TYnwTEpsOvhC4UQ==" + }, "node_modules/data-urls": { "version": "2.0.0", "license": "MIT", @@ -22455,7 +22472,6 @@ }, "node_modules/defaults": { "version": "1.0.3", - "dev": true, "license": "MIT", "dependencies": { "clone": "^1.0.2" @@ -22463,7 +22479,6 @@ }, "node_modules/defaults/node_modules/clone": { "version": "1.0.4", - "dev": true, "license": "MIT", "engines": { "node": ">=0.8" @@ -22508,6 +22523,125 @@ "version": "1.0.0", "license": "MIT" }, + "node_modules/degenerator": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-1.0.4.tgz", + "integrity": "sha512-EMAC+riLSC64jKfOs1jp8J7M4ZXstUUwTdwFBEv6HOzL/Ae+eAzMKEK0nJnpof2fnw9IOjmE6u6qXFejVyk8AA==", + "dependencies": { + "ast-types": "0.x.x", + "escodegen": "1.x.x", + "esprima": "3.x.x" + } + }, + "node_modules/degenerator/node_modules/escodegen": { + "version": "1.14.3", + "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz", + "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==", + "dependencies": { + "esprima": "^4.0.1", + "estraverse": "^4.2.0", + "esutils": "^2.0.2", + "optionator": "^0.8.1" + }, + "bin": { + "escodegen": "bin/escodegen.js", + "esgenerate": "bin/esgenerate.js" + }, + "engines": { + "node": ">=4.0" + }, + "optionalDependencies": { + "source-map": "~0.6.1" + } + }, + "node_modules/degenerator/node_modules/escodegen/node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/degenerator/node_modules/esprima": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", + "integrity": "sha512-AWwVMNxwhN8+NIPQzAQZCm7RkLC4RbM3B1OobMuyp3i+w73X57KCKaVIxaRZb+DYCojq7rspo+fmuQfAboyhFg==", + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/degenerator/node_modules/estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "engines": { + "node": ">=4.0" + } + }, + "node_modules/degenerator/node_modules/levn": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", + "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==", + "dependencies": { + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/degenerator/node_modules/optionator": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", + "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==", + "dependencies": { + "deep-is": "~0.1.3", + "fast-levenshtein": "~2.0.6", + "levn": "~0.3.0", + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2", + "word-wrap": "~1.2.3" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/degenerator/node_modules/prelude-ls": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", + "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==", + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/degenerator/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/degenerator/node_modules/type-check": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", + "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==", + "dependencies": { + "prelude-ls": "~1.1.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/del": { "version": "5.1.0", "license": "MIT", @@ -25686,9 +25820,7 @@ "node_modules/file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", - "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", - "dev": true, - "optional": true + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==" }, "node_modules/filelist": { "version": "1.0.2", @@ -26202,6 +26334,17 @@ "version": "1.0.3", "license": "Unlicense" }, + "node_modules/fs-posix": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/fs-posix/-/fs-posix-6.0.0.tgz", + "integrity": "sha512-EL+fNbjqr+5Ghmn1rNFmKG2X1xJxregp/7dmbMfMuQjR4FqRxU76FsKiE0wT8S1q+T0Xm1eGeQzyyzUViMcSPQ==", + "engines": { + "node": ">=6.0.0" + }, + "optionalDependencies": { + "git-win": "^2.2.4" + } + }, "node_modules/fs-readdir-recursive": { "version": "1.1.0", "dev": true, @@ -26262,6 +26405,39 @@ "dev": true, "license": "MIT" }, + "node_modules/ftp": { + "version": "0.3.10", + "resolved": "https://registry.npmjs.org/ftp/-/ftp-0.3.10.tgz", + "integrity": "sha512-faFVML1aBx2UoDStmLwv2Wptt4vw5x03xxX172nhA5Y5HBshW5JweqQ2W4xL4dezQTG8inJsuYcpPHHU3X5OTQ==", + "dependencies": { + "readable-stream": "1.1.x", + "xregexp": "2.0.0" + }, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/ftp/node_modules/isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" + }, + "node_modules/ftp/node_modules/readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "node_modules/ftp/node_modules/string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==" + }, "node_modules/function-bind": { "version": "1.1.1", "license": "MIT" @@ -27061,6 +27237,279 @@ "version": "1.0.0", "license": "MIT" }, + "node_modules/gatsby-plugin-s3": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/gatsby-plugin-s3/-/gatsby-plugin-s3-0.3.8.tgz", + "integrity": "sha512-NxT+vhTnqD5X0CpwpL3i52OZvuDJThHPij22/AGWhWnpw2JO+bnlF+fKxhLhughpB3gO+OuuoHn7+jS4suMojg==", + "dependencies": { + "@babel/polyfill": "^7.8.3", + "@types/async": "^2.4.1", + "@types/glob-to-regexp": "^0.4.0", + "@types/node": "^12.0.2", + "async": "^2.6.2", + "aws-sdk": "^2.382.0", + "chalk": "^2.4.1", + "fs-extra": "^7.0.1", + "fs-posix": "^6.0.0", + "glob-to-regexp": "^0.4.1", + "inquirer": "^6.2.1", + "is-ci": "^2.0.0", + "klaw": "^3.0.0", + "mime": "^2.4.0", + "minimatch": "^3.0.4", + "ora": "^3.0.0", + "pretty-error": "^2.1.1", + "proxy-agent": "^3.1.1", + "stream-to-promise": "^2.2.0", + "yargs": "^15.4.0" + }, + "bin": { + "gatsby-plugin-s3": "bin.js" + }, + "peerDependencies": { + "gatsby": ">2.0.0-alpha" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/@types/node": { + "version": "12.20.55", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.55.tgz", + "integrity": "sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==" + }, + "node_modules/gatsby-plugin-s3/node_modules/ansi-escapes": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz", + "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==", + "engines": { + "node": ">=4" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/ansi-regex": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz", + "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==", + "engines": { + "node": ">=6" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/async": { + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", + "dependencies": { + "lodash": "^4.17.14" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/cli-cursor": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", + "integrity": "sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==", + "dependencies": { + "restore-cursor": "^2.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/cli-width": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz", + "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==" + }, + "node_modules/gatsby-plugin-s3/node_modules/figures": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz", + "integrity": "sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==", + "dependencies": { + "escape-string-regexp": "^1.0.5" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dependencies": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/inquirer": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz", + "integrity": "sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==", + "dependencies": { + "ansi-escapes": "^3.2.0", + "chalk": "^2.4.2", + "cli-cursor": "^2.1.0", + "cli-width": "^2.0.0", + "external-editor": "^3.0.3", + "figures": "^2.0.0", + "lodash": "^4.17.12", + "mute-stream": "0.0.7", + "run-async": "^2.2.0", + "rxjs": "^6.4.0", + "string-width": "^2.1.0", + "strip-ansi": "^5.1.0", + "through": "^2.3.6" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/is-ci": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz", + "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==", + "dependencies": { + "ci-info": "^2.0.0" + }, + "bin": { + "is-ci": "bin.js" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==", + "engines": { + "node": ">=4" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/klaw": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz", + "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==", + "dependencies": { + "graceful-fs": "^4.1.9" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/log-symbols": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", + "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==", + "dependencies": { + "chalk": "^2.0.1" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/mimic-fn": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", + "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==", + "engines": { + "node": ">=4" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/mute-stream": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", + "integrity": "sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==" + }, + "node_modules/gatsby-plugin-s3/node_modules/onetime": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz", + "integrity": "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==", + "dependencies": { + "mimic-fn": "^1.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/ora": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz", + "integrity": "sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==", + "dependencies": { + "chalk": "^2.4.2", + "cli-cursor": "^2.1.0", + "cli-spinners": "^2.0.0", + "log-symbols": "^2.2.0", + "strip-ansi": "^5.2.0", + "wcwidth": "^1.0.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/restore-cursor": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz", + "integrity": "sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==", + "dependencies": { + "onetime": "^2.0.0", + "signal-exit": "^3.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/string-width": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", + "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", + "dependencies": { + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/string-width/node_modules/ansi-regex": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz", + "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==", + "engines": { + "node": ">=4" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/string-width/node_modules/strip-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", + "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==", + "dependencies": { + "ansi-regex": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/strip-ansi": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "dependencies": { + "ansi-regex": "^4.1.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/gatsby-plugin-s3/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/gatsby-plugin-typescript": { "version": "3.14.0", "license": "MIT", @@ -28700,6 +29149,41 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-uri": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-2.0.4.tgz", + "integrity": "sha512-v7LT/s8kVjs+Tx0ykk1I+H/rbpzkHvuIq87LmeXptcf5sNWm9uQiwjNAt94SJPA1zOlCntmnOlJvVWKmzsxG8Q==", + "dependencies": { + "data-uri-to-buffer": "1", + "debug": "2", + "extend": "~3.0.2", + "file-uri-to-path": "1", + "ftp": "~0.3.10", + "readable-stream": "2" + } + }, + "node_modules/get-uri/node_modules/readable-stream": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "node_modules/get-uri/node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, "node_modules/get-value": { "version": "2.0.6", "license": "MIT", @@ -28735,6 +29219,213 @@ "parse-url": "^6.0.0" } }, + "node_modules/git-win": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/git-win/-/git-win-2.3.0.tgz", + "integrity": "sha512-9HWW6WK4nel4iI6B0zBSiH5emQIVCik9oX+fwTGYDsNKal9VxjnKMLa3wspjz5QP7shb9sEUKYy8B0QW/rATng==", + "hasInstallScript": true, + "optional": true, + "os": [ + "win32", + "linux" + ], + "dependencies": { + "@babel/runtime": "^7.2.0", + "fs-extra": "^7.0.1", + "got": "^9.5.0", + "in-gfw": "^1.2.0", + "nugget": "^2.0.1" + } + }, + "node_modules/git-win/node_modules/@sindresorhus/is": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", + "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==", + "optional": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/git-win/node_modules/@szmarczak/http-timer": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz", + "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==", + "optional": true, + "dependencies": { + "defer-to-connect": "^1.0.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/git-win/node_modules/cacheable-request": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz", + "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==", + "optional": true, + "dependencies": { + "clone-response": "^1.0.2", + "get-stream": "^5.1.0", + "http-cache-semantics": "^4.0.0", + "keyv": "^3.0.0", + "lowercase-keys": "^2.0.0", + "normalize-url": "^4.1.0", + "responselike": "^1.0.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/git-win/node_modules/cacheable-request/node_modules/get-stream": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", + "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", + "optional": true, + "dependencies": { + "pump": "^3.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/git-win/node_modules/decompress-response": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz", + "integrity": "sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==", + "optional": true, + "dependencies": { + "mimic-response": "^1.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/git-win/node_modules/defer-to-connect": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz", + "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==", + "optional": true + }, + "node_modules/git-win/node_modules/fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "optional": true, + "dependencies": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/git-win/node_modules/get-stream": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", + "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", + "optional": true, + "dependencies": { + "pump": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/git-win/node_modules/got": { + "version": "9.6.0", + "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz", + "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==", + "optional": true, + "dependencies": { + "@sindresorhus/is": "^0.14.0", + "@szmarczak/http-timer": "^1.1.2", + "cacheable-request": "^6.0.0", + "decompress-response": "^3.3.0", + "duplexer3": "^0.1.4", + "get-stream": "^4.1.0", + "lowercase-keys": "^1.0.1", + "mimic-response": "^1.0.1", + "p-cancelable": "^1.0.0", + "to-readable-stream": "^1.0.0", + "url-parse-lax": "^3.0.0" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/git-win/node_modules/got/node_modules/lowercase-keys": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", + "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/git-win/node_modules/json-buffer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz", + "integrity": "sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ==", + "optional": true + }, + "node_modules/git-win/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "optional": true, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/git-win/node_modules/keyv": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz", + "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==", + "optional": true, + "dependencies": { + "json-buffer": "3.0.0" + } + }, + "node_modules/git-win/node_modules/p-cancelable": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz", + "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==", + "optional": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/git-win/node_modules/responselike": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz", + "integrity": "sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ==", + "optional": true, + "dependencies": { + "lowercase-keys": "^1.0.0" + } + }, + "node_modules/git-win/node_modules/responselike/node_modules/lowercase-keys": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", + "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/git-win/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "optional": true, + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/github-from-package": { "version": "0.0.0", "license": "MIT" @@ -30404,6 +31095,57 @@ "node": ">=0.8.19" } }, + "node_modules/in-gfw": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/in-gfw/-/in-gfw-1.2.0.tgz", + "integrity": "sha512-LgSoQXzuSS/x/nh0eIggq7PsI7gs/sQdXNEolRmHaFUj6YMFmPO1kxQ7XpcT3nPpC3DMwYiJmgnluqJmFXYiMg==", + "optional": true, + "dependencies": { + "glob": "^7.1.2", + "is-wsl": "^1.1.0", + "mem": "^3.0.1" + } + }, + "node_modules/in-gfw/node_modules/is-wsl": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz", + "integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==", + "optional": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/in-gfw/node_modules/mem": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mem/-/mem-3.0.1.tgz", + "integrity": "sha512-QKs47bslvOE0NbXOqG6lMxn6Bk0Iuw0vfrIeLykmQle2LkCw1p48dZDdzE+D88b/xqRJcZGcMNeDvSVma+NuIQ==", + "optional": true, + "dependencies": { + "mimic-fn": "^1.0.0", + "p-is-promise": "^1.1.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/in-gfw/node_modules/mimic-fn": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", + "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==", + "optional": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/in-gfw/node_modules/p-is-promise": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz", + "integrity": "sha512-zL7VE4JVS2IFSkR2GQKDSPEVxkoH43/p7oEnwpdCndKYJO0HVeRB7fA8TJwuLOTBREtK0ea8eHaxdwcpob5dmg==", + "optional": true, + "engines": { + "node": ">=4" + } + }, "node_modules/indent-string": { "version": "4.0.0", "license": "MIT", @@ -30606,7 +31348,6 @@ }, "node_modules/ip": { "version": "1.1.5", - "devOptional": true, "license": "MIT" }, "node_modules/ip-regex": { @@ -35461,7 +36202,6 @@ }, "node_modules/lru-cache": { "version": "5.1.1", - "dev": true, "license": "ISC", "dependencies": { "yallist": "^3.0.2" @@ -37974,7 +38714,6 @@ "version": "2.15.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz", "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==", - "dev": true, "optional": true }, "node_modules/nanoid": { @@ -38084,6 +38823,14 @@ "dev": true, "license": "MIT" }, + "node_modules/netmask": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/netmask/-/netmask-1.0.6.tgz", + "integrity": "sha512-3DWDqAtIiPSkBXZyYEjwebfK56nrlQfRGt642fu8RPaL+ePu750+HCMHxjJCG3iEHq/0aeMvX6KIzlv7nuhfrA==", + "engines": { + "node": ">= 0.4.0" + } + }, "node_modules/next-tick": { "version": "1.1.0", "license": "ISC" @@ -38593,6 +39340,39 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/nugget": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/nugget/-/nugget-2.0.2.tgz", + "integrity": "sha512-A8A8+PtlH937KWXJnfct6ubGPfgHOe3lwFkkmrT5xW8+aRBnDWqSiW5NRuiVuh/k/auLGsZdu+WrIU2epL/FHg==", + "optional": true, + "dependencies": { + "debug": "^2.1.3", + "minimist": "^1.1.0", + "pretty-bytes": "^4.0.2", + "progress-stream": "^1.1.0", + "request": "^2.45.0", + "single-line-log": "^1.1.2", + "throttleit": "0.0.2" + }, + "bin": { + "nugget": "bin.js" + } + }, + "node_modules/nugget/node_modules/pretty-bytes": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz", + "integrity": "sha512-yJAF+AjbHKlxQ8eezMd/34Mnj/YTQ3i6kLzvVsH4l/BfIFtp444n0wVbnsn66JimZ9uBofv815aRp1zCppxlWw==", + "optional": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/nugget/node_modules/throttleit": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-0.0.2.tgz", + "integrity": "sha512-HtlTFeyYs1elDM2txiIGsdXHaq8kffVaZH/QEBRbo95zQqzlsBx5ELKhkPOZVad9OK9oxzwx6UrQN8Vfh/+yag==", + "optional": true + }, "node_modules/null-loader": { "version": "4.0.1", "license": "MIT", @@ -39465,6 +40245,110 @@ "node": ">=6" } }, + "node_modules/pac-proxy-agent": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-3.0.1.tgz", + "integrity": "sha512-44DUg21G/liUZ48dJpUSjZnFfZro/0K5JTyFYLBcmh9+T6Ooi4/i4efwUiEy0+4oQusCBqWdhv16XohIj1GqnQ==", + "dependencies": { + "agent-base": "^4.2.0", + "debug": "^4.1.1", + "get-uri": "^2.0.0", + "http-proxy-agent": "^2.1.0", + "https-proxy-agent": "^3.0.0", + "pac-resolver": "^3.0.0", + "raw-body": "^2.2.0", + "socks-proxy-agent": "^4.0.1" + } + }, + "node_modules/pac-proxy-agent/node_modules/agent-base": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz", + "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==", + "dependencies": { + "es6-promisify": "^5.0.0" + }, + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/pac-proxy-agent/node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/pac-proxy-agent/node_modules/http-proxy-agent": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz", + "integrity": "sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==", + "dependencies": { + "agent-base": "4", + "debug": "3.1.0" + }, + "engines": { + "node": ">= 4.5.0" + } + }, + "node_modules/pac-proxy-agent/node_modules/http-proxy-agent/node_modules/debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/pac-proxy-agent/node_modules/http-proxy-agent/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, + "node_modules/pac-proxy-agent/node_modules/https-proxy-agent": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-3.0.1.tgz", + "integrity": "sha512-+ML2Rbh6DAuee7d07tYGEKOEi2voWPUGan+ExdPbPW6Z3svq+JCqr0v8WmKPOkz1vOVykPCBSuobe7G8GJUtVg==", + "dependencies": { + "agent-base": "^4.3.0", + "debug": "^3.1.0" + }, + "engines": { + "node": ">= 4.5.0" + } + }, + "node_modules/pac-proxy-agent/node_modules/https-proxy-agent/node_modules/debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dependencies": { + "ms": "^2.1.1" + } + }, + "node_modules/pac-proxy-agent/node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, + "node_modules/pac-resolver": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-3.0.0.tgz", + "integrity": "sha512-tcc38bsjuE3XZ5+4vP96OfhOugrX+JcnpUbhfuc4LuXBLQhoTthOstZeoQJBDnQUDYzYmdImKsbz0xSl1/9qeA==", + "dependencies": { + "co": "^4.6.0", + "degenerator": "^1.0.4", + "ip": "^1.1.5", + "netmask": "^1.0.6", + "thunkify": "^2.1.2" + } + }, "node_modules/package-json": { "version": "6.5.0", "license": "MIT", @@ -41528,6 +42412,68 @@ "node": ">=0.4.0" } }, + "node_modules/progress-stream": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/progress-stream/-/progress-stream-1.2.0.tgz", + "integrity": "sha512-MIBPjZz6oGNSw5rn2mSp+nP9FGoaVo6QsPyPVEaD4puilz5hZNa3kfnrlqRNYFsugslbU3An4mnkLLtZOaWvrA==", + "optional": true, + "dependencies": { + "speedometer": "~0.1.2", + "through2": "~0.2.3" + } + }, + "node_modules/progress-stream/node_modules/isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==", + "optional": true + }, + "node_modules/progress-stream/node_modules/object-keys": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz", + "integrity": "sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw==", + "optional": true + }, + "node_modules/progress-stream/node_modules/readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==", + "optional": true, + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "node_modules/progress-stream/node_modules/string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==", + "optional": true + }, + "node_modules/progress-stream/node_modules/through2": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/through2/-/through2-0.2.3.tgz", + "integrity": "sha512-mLa8Bn2mZurjyomGKWRu3Bo2mvoQojFks9NvOK8H+k4kDJNkdEqG522KFZsEFBEl6rKkxTgFbE5+OPcgfvPEHA==", + "optional": true, + "dependencies": { + "readable-stream": "~1.1.9", + "xtend": "~2.1.1" + } + }, + "node_modules/progress-stream/node_modules/xtend": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz", + "integrity": "sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ==", + "optional": true, + "dependencies": { + "object-keys": "~0.4.0" + }, + "engines": { + "node": ">=0.4" + } + }, "node_modules/promise": { "version": "8.1.0", "license": "MIT", @@ -41665,6 +42611,101 @@ "node": ">= 0.10" } }, + "node_modules/proxy-agent": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-3.1.1.tgz", + "integrity": "sha512-WudaR0eTsDx33O3EJE16PjBRZWcX8GqCEeERw1W3hZJgH/F2a46g7jty6UGty6NeJ4CKQy8ds2CJPMiyeqaTvw==", + "dependencies": { + "agent-base": "^4.2.0", + "debug": "4", + "http-proxy-agent": "^2.1.0", + "https-proxy-agent": "^3.0.0", + "lru-cache": "^5.1.1", + "pac-proxy-agent": "^3.0.1", + "proxy-from-env": "^1.0.0", + "socks-proxy-agent": "^4.0.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/proxy-agent/node_modules/agent-base": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz", + "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==", + "dependencies": { + "es6-promisify": "^5.0.0" + }, + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/proxy-agent/node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/proxy-agent/node_modules/http-proxy-agent": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz", + "integrity": "sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==", + "dependencies": { + "agent-base": "4", + "debug": "3.1.0" + }, + "engines": { + "node": ">= 4.5.0" + } + }, + "node_modules/proxy-agent/node_modules/http-proxy-agent/node_modules/debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/proxy-agent/node_modules/http-proxy-agent/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, + "node_modules/proxy-agent/node_modules/https-proxy-agent": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-3.0.1.tgz", + "integrity": "sha512-+ML2Rbh6DAuee7d07tYGEKOEi2voWPUGan+ExdPbPW6Z3svq+JCqr0v8WmKPOkz1vOVykPCBSuobe7G8GJUtVg==", + "dependencies": { + "agent-base": "^4.3.0", + "debug": "^3.1.0" + }, + "engines": { + "node": ">= 4.5.0" + } + }, + "node_modules/proxy-agent/node_modules/https-proxy-agent/node_modules/debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dependencies": { + "ms": "^2.1.1" + } + }, + "node_modules/proxy-agent/node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, "node_modules/proxy-from-env": { "version": "1.1.0", "license": "MIT" @@ -46895,6 +47936,62 @@ "version": "0.3.2", "license": "MIT" }, + "node_modules/single-line-log": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/single-line-log/-/single-line-log-1.1.2.tgz", + "integrity": "sha512-awzaaIPtYFdexLr6TBpcZSGPB6D1RInNO/qNetgaJloPDF/D0GkVtLvGEp8InfmLV7CyLyQ5fIRP+tVN/JmWQA==", + "optional": true, + "dependencies": { + "string-width": "^1.0.1" + } + }, + "node_modules/single-line-log/node_modules/ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/single-line-log/node_modules/is-fullwidth-code-point": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==", + "optional": true, + "dependencies": { + "number-is-nan": "^1.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/single-line-log/node_modules/string-width": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==", + "optional": true, + "dependencies": { + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/single-line-log/node_modules/strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==", + "optional": true, + "dependencies": { + "ansi-regex": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/single-trailing-newline": { "version": "1.0.0", "license": "MIT", @@ -46986,6 +48083,15 @@ "node": ">=8.0.0" } }, + "node_modules/smart-buffer": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", + "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==", + "engines": { + "node": ">= 6.0.0", + "npm": ">= 3.0.0" + } + }, "node_modules/smee-client": { "version": "1.2.2", "dev": true, @@ -47322,6 +48428,42 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/socks": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/socks/-/socks-2.3.3.tgz", + "integrity": "sha512-o5t52PCNtVdiOvzMry7wU4aOqYWL0PeCXRWBEiJow4/i/wr+wpsJQ9awEu1EonLIqsfGd5qSgDdxEOvCdmBEpA==", + "dependencies": { + "ip": "1.1.5", + "smart-buffer": "^4.1.0" + }, + "engines": { + "node": ">= 6.0.0", + "npm": ">= 3.0.0" + } + }, + "node_modules/socks-proxy-agent": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-4.0.2.tgz", + "integrity": "sha512-NT6syHhI9LmuEMSK6Kd2V7gNv5KFZoLE7V5udWmn0de+3Mkj3UMA/AJPLyeNUVmElCurSHtUdM3ETpR3z770Wg==", + "dependencies": { + "agent-base": "~4.2.1", + "socks": "~2.3.2" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/socks-proxy-agent/node_modules/agent-base": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.1.tgz", + "integrity": "sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==", + "dependencies": { + "es6-promisify": "^5.0.0" + }, + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/source-list-map": { "version": "2.0.1", "license": "MIT" @@ -47508,6 +48650,12 @@ "version": "2.1.2", "license": "MIT" }, + "node_modules/speedometer": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/speedometer/-/speedometer-0.1.4.tgz", + "integrity": "sha512-phdEoDlA6EUIVtzwq1UiNMXDUogczp204aYF/yfOhjNePWFfIpBJ1k5wLMuXQhEOOMjuTJEcc4vdZa+vuP+n/Q==", + "optional": true + }, "node_modules/split": { "version": "0.3.3", "dev": true, @@ -47915,6 +49063,40 @@ "dev": true, "license": "MIT" }, + "node_modules/stream-to-array": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/stream-to-array/-/stream-to-array-2.3.0.tgz", + "integrity": "sha512-UsZtOYEn4tWU2RGLOXr/o/xjRBftZRlG3dEWoaHr8j4GuypJ3isitGbVyjQKAuMu+xbiop8q224TjiZWc4XTZA==", + "dependencies": { + "any-promise": "^1.1.0" + } + }, + "node_modules/stream-to-promise": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/stream-to-promise/-/stream-to-promise-2.2.0.tgz", + "integrity": "sha512-HAGUASw8NT0k8JvIVutB2Y/9iBk7gpgEyAudXwNJmZERdMITGdajOa4VJfD/kNiA3TppQpTP4J+CtcHwdzKBAw==", + "dependencies": { + "any-promise": "~1.3.0", + "end-of-stream": "~1.1.0", + "stream-to-array": "~2.3.0" + } + }, + "node_modules/stream-to-promise/node_modules/end-of-stream": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz", + "integrity": "sha512-EoulkdKF/1xa92q25PbjuDcgJ9RDHYU2Rs3SCIvs2/dSQ3BpmxneNHmA/M7fe60M3PrV7nNGTTNbkK62l6vXiQ==", + "dependencies": { + "once": "~1.3.0" + } + }, + "node_modules/stream-to-promise/node_modules/once": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz", + "integrity": "sha512-6vaNInhu+CHxtONf3zw3vq4SP2DOQhjBvIa3rNcG0+P7eKWlYH6Peu7rHizSloRU2EwMz6GraLieis9Ac9+p1w==", + "dependencies": { + "wrappy": "1" + } + }, "node_modules/streamsearch": { "version": "0.1.2", "engines": { @@ -49418,6 +50600,11 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/thunkify": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/thunkify/-/thunkify-2.1.2.tgz", + "integrity": "sha512-w9foI80XcGImrhMQ19pxunaEC5Rp2uzxZZg4XBAFRfiLOplk3F0l7wo+bO16vC2/nlQfR/mXZxcduo0MF2GWLg==" + }, "node_modules/thunky": { "version": "1.1.0", "license": "MIT" @@ -51415,7 +52602,6 @@ }, "node_modules/wcwidth": { "version": "1.0.1", - "dev": true, "license": "MIT", "dependencies": { "defaults": "^1.0.3" @@ -51948,7 +53134,6 @@ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -53103,6 +54288,14 @@ "node": ">=0.4.0" } }, + "node_modules/xregexp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-2.0.0.tgz", + "integrity": "sha512-xl/50/Cf32VsGq/1R8jJE5ajH1yMCQkpmoS10QbFZWl2Oor4H0Me64Pu2yxvsRWK3m6soJbmGfzSR7BYmDcWAA==", + "engines": { + "node": "*" + } + }, "node_modules/xss": { "version": "1.0.10", "license": "MIT", @@ -53142,7 +54335,6 @@ }, "node_modules/yallist": { "version": "3.1.1", - "dev": true, "license": "ISC" }, "node_modules/yaml": { @@ -64270,6 +65462,11 @@ "@types/aria-query": { "version": "4.2.2" }, + "@types/async": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/@types/async/-/async-2.4.2.tgz", + "integrity": "sha512-bWBbC7VG2jdjbgZMX0qpds8U/3h3anfIqE81L8jmVrgFZw/urEDnBA78ymGGKTTK6ciBXmmJ/xlok+Re41S8ww==" + }, "@types/babel__core": { "version": "7.1.16", "requires": { @@ -64454,6 +65651,11 @@ "@types/node": "*" } }, + "@types/glob-to-regexp": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@types/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", + "integrity": "sha512-S0mIukll6fbF0tvrKic/jj+jI8SHoSvGU+Cs95b/jzZEnBYCbj+7aJtQ9yeABuK3xP1okwA3jEH9qIRayijnvQ==" + }, "@types/graceful-fs": { "version": "4.1.5", "requires": { @@ -65741,6 +66943,11 @@ "entities": "^2.0.0" } }, + "any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==" + }, "anymatch": { "version": "3.1.2", "requires": { @@ -65938,14 +67145,12 @@ }, "ast-types": { "version": "0.14.2", - "dev": true, "requires": { "tslib": "^2.0.1" }, "dependencies": { "tslib": { - "version": "2.4.0", - "dev": true + "version": "2.4.0" } } }, @@ -67406,7 +68611,6 @@ "version": "1.5.0", "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", - "dev": true, "optional": true, "requires": { "file-uri-to-path": "1.0.0" @@ -68245,8 +69449,7 @@ } }, "cli-spinners": { - "version": "2.6.1", - "dev": true + "version": "2.6.1" }, "cli-table3": { "version": "0.6.1", @@ -69561,6 +70764,11 @@ "dasherize": { "version": "2.0.0" }, + "data-uri-to-buffer": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-1.2.0.tgz", + "integrity": "sha512-vKQ9DTQPN1FLYiiEEOQ6IBGFqvjCa5rSK3cWMy/Nespm5d/x3dGFT9UBZnkLxCwua/IXBi2TYnwTEpsOvhC4UQ==" + }, "data-urls": { "version": "2.0.0", "requires": { @@ -69742,14 +70950,12 @@ }, "defaults": { "version": "1.0.3", - "dev": true, "requires": { "clone": "^1.0.2" }, "dependencies": { "clone": { - "version": "1.0.4", - "dev": true + "version": "1.0.4" } } }, @@ -69775,6 +70981,88 @@ "defined": { "version": "1.0.0" }, + "degenerator": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-1.0.4.tgz", + "integrity": "sha512-EMAC+riLSC64jKfOs1jp8J7M4ZXstUUwTdwFBEv6HOzL/Ae+eAzMKEK0nJnpof2fnw9IOjmE6u6qXFejVyk8AA==", + "requires": { + "ast-types": "0.x.x", + "escodegen": "1.x.x", + "esprima": "3.x.x" + }, + "dependencies": { + "escodegen": { + "version": "1.14.3", + "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz", + "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==", + "requires": { + "esprima": "^4.0.1", + "estraverse": "^4.2.0", + "esutils": "^2.0.2", + "optionator": "^0.8.1", + "source-map": "~0.6.1" + }, + "dependencies": { + "esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" + } + } + }, + "esprima": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", + "integrity": "sha512-AWwVMNxwhN8+NIPQzAQZCm7RkLC4RbM3B1OobMuyp3i+w73X57KCKaVIxaRZb+DYCojq7rspo+fmuQfAboyhFg==" + }, + "estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==" + }, + "levn": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", + "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==", + "requires": { + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2" + } + }, + "optionator": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", + "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==", + "requires": { + "deep-is": "~0.1.3", + "fast-levenshtein": "~2.0.6", + "levn": "~0.3.0", + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2", + "word-wrap": "~1.2.3" + } + }, + "prelude-ls": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", + "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==" + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "optional": true + }, + "type-check": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", + "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==", + "requires": { + "prelude-ls": "~1.1.2" + } + } + } + }, "del": { "version": "5.1.0", "requires": { @@ -71870,9 +73158,7 @@ "file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", - "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", - "dev": true, - "optional": true + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==" }, "filelist": { "version": "1.0.2", @@ -72218,6 +73504,14 @@ "fs-monkey": { "version": "1.0.3" }, + "fs-posix": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/fs-posix/-/fs-posix-6.0.0.tgz", + "integrity": "sha512-EL+fNbjqr+5Ghmn1rNFmKG2X1xJxregp/7dmbMfMuQjR4FqRxU76FsKiE0wT8S1q+T0Xm1eGeQzyyzUViMcSPQ==", + "requires": { + "git-win": "^2.2.4" + } + }, "fs-readdir-recursive": { "version": "1.1.0", "dev": true @@ -72267,6 +73561,38 @@ "version": "1.1.0", "dev": true }, + "ftp": { + "version": "0.3.10", + "resolved": "https://registry.npmjs.org/ftp/-/ftp-0.3.10.tgz", + "integrity": "sha512-faFVML1aBx2UoDStmLwv2Wptt4vw5x03xxX172nhA5Y5HBshW5JweqQ2W4xL4dezQTG8inJsuYcpPHHU3X5OTQ==", + "requires": { + "readable-stream": "1.1.x", + "xregexp": "2.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" + }, + "readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==", + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==" + } + } + }, "function-bind": { "version": "1.1.1" }, @@ -73191,6 +74517,223 @@ "gatsby-plugin-remove-serviceworker": { "version": "1.0.0" }, + "gatsby-plugin-s3": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/gatsby-plugin-s3/-/gatsby-plugin-s3-0.3.8.tgz", + "integrity": "sha512-NxT+vhTnqD5X0CpwpL3i52OZvuDJThHPij22/AGWhWnpw2JO+bnlF+fKxhLhughpB3gO+OuuoHn7+jS4suMojg==", + "requires": { + "@babel/polyfill": "^7.8.3", + "@types/async": "^2.4.1", + "@types/glob-to-regexp": "^0.4.0", + "@types/node": "^12.0.2", + "async": "^2.6.2", + "aws-sdk": "^2.382.0", + "chalk": "^2.4.1", + "fs-extra": "^7.0.1", + "fs-posix": "^6.0.0", + "glob-to-regexp": "^0.4.1", + "inquirer": "^6.2.1", + "is-ci": "^2.0.0", + "klaw": "^3.0.0", + "mime": "^2.4.0", + "minimatch": "^3.0.4", + "ora": "^3.0.0", + "pretty-error": "^2.1.1", + "proxy-agent": "^3.1.1", + "stream-to-promise": "^2.2.0", + "yargs": "^15.4.0" + }, + "dependencies": { + "@types/node": { + "version": "12.20.55", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.55.tgz", + "integrity": "sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==" + }, + "ansi-escapes": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz", + "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==" + }, + "ansi-regex": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz", + "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==" + }, + "async": { + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", + "requires": { + "lodash": "^4.17.14" + } + }, + "cli-cursor": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", + "integrity": "sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==", + "requires": { + "restore-cursor": "^2.0.0" + } + }, + "cli-width": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz", + "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==" + }, + "figures": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz", + "integrity": "sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==", + "requires": { + "escape-string-regexp": "^1.0.5" + } + }, + "fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, + "inquirer": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz", + "integrity": "sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==", + "requires": { + "ansi-escapes": "^3.2.0", + "chalk": "^2.4.2", + "cli-cursor": "^2.1.0", + "cli-width": "^2.0.0", + "external-editor": "^3.0.3", + "figures": "^2.0.0", + "lodash": "^4.17.12", + "mute-stream": "0.0.7", + "run-async": "^2.2.0", + "rxjs": "^6.4.0", + "string-width": "^2.1.0", + "strip-ansi": "^5.1.0", + "through": "^2.3.6" + } + }, + "is-ci": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz", + "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==", + "requires": { + "ci-info": "^2.0.0" + } + }, + "is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==" + }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "requires": { + "graceful-fs": "^4.1.6" + } + }, + "klaw": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz", + "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==", + "requires": { + "graceful-fs": "^4.1.9" + } + }, + "log-symbols": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", + "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==", + "requires": { + "chalk": "^2.0.1" + } + }, + "mimic-fn": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", + "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==" + }, + "mute-stream": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", + "integrity": "sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==" + }, + "onetime": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz", + "integrity": "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==", + "requires": { + "mimic-fn": "^1.0.0" + } + }, + "ora": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz", + "integrity": "sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==", + "requires": { + "chalk": "^2.4.2", + "cli-cursor": "^2.1.0", + "cli-spinners": "^2.0.0", + "log-symbols": "^2.2.0", + "strip-ansi": "^5.2.0", + "wcwidth": "^1.0.1" + } + }, + "restore-cursor": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz", + "integrity": "sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==", + "requires": { + "onetime": "^2.0.0", + "signal-exit": "^3.0.2" + } + }, + "string-width": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", + "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", + "requires": { + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" + }, + "dependencies": { + "ansi-regex": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz", + "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==" + }, + "strip-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", + "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==", + "requires": { + "ansi-regex": "^3.0.0" + } + } + } + }, + "strip-ansi": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "requires": { + "ansi-regex": "^4.1.0" + } + }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==" + } + } + }, "gatsby-plugin-typescript": { "version": "3.14.0", "requires": { @@ -73796,6 +75339,43 @@ "get-intrinsic": "^1.1.1" } }, + "get-uri": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-2.0.4.tgz", + "integrity": "sha512-v7LT/s8kVjs+Tx0ykk1I+H/rbpzkHvuIq87LmeXptcf5sNWm9uQiwjNAt94SJPA1zOlCntmnOlJvVWKmzsxG8Q==", + "requires": { + "data-uri-to-buffer": "1", + "debug": "2", + "extend": "~3.0.2", + "file-uri-to-path": "1", + "ftp": "~0.3.10", + "readable-stream": "2" + }, + "dependencies": { + "readable-stream": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "requires": { + "safe-buffer": "~5.1.0" + } + } + } + }, "get-value": { "version": "2.0.6" }, @@ -73825,6 +75405,177 @@ "parse-url": "^6.0.0" } }, + "git-win": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/git-win/-/git-win-2.3.0.tgz", + "integrity": "sha512-9HWW6WK4nel4iI6B0zBSiH5emQIVCik9oX+fwTGYDsNKal9VxjnKMLa3wspjz5QP7shb9sEUKYy8B0QW/rATng==", + "optional": true, + "requires": { + "@babel/runtime": "^7.2.0", + "fs-extra": "^7.0.1", + "got": "^9.5.0", + "in-gfw": "^1.2.0", + "nugget": "^2.0.1" + }, + "dependencies": { + "@sindresorhus/is": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", + "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==", + "optional": true + }, + "@szmarczak/http-timer": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz", + "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==", + "optional": true, + "requires": { + "defer-to-connect": "^1.0.1" + } + }, + "cacheable-request": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz", + "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==", + "optional": true, + "requires": { + "clone-response": "^1.0.2", + "get-stream": "^5.1.0", + "http-cache-semantics": "^4.0.0", + "keyv": "^3.0.0", + "lowercase-keys": "^2.0.0", + "normalize-url": "^4.1.0", + "responselike": "^1.0.2" + }, + "dependencies": { + "get-stream": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", + "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", + "optional": true, + "requires": { + "pump": "^3.0.0" + } + } + } + }, + "decompress-response": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz", + "integrity": "sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==", + "optional": true, + "requires": { + "mimic-response": "^1.0.0" + } + }, + "defer-to-connect": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz", + "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==", + "optional": true + }, + "fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "optional": true, + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, + "get-stream": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", + "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", + "optional": true, + "requires": { + "pump": "^3.0.0" + } + }, + "got": { + "version": "9.6.0", + "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz", + "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==", + "optional": true, + "requires": { + "@sindresorhus/is": "^0.14.0", + "@szmarczak/http-timer": "^1.1.2", + "cacheable-request": "^6.0.0", + "decompress-response": "^3.3.0", + "duplexer3": "^0.1.4", + "get-stream": "^4.1.0", + "lowercase-keys": "^1.0.1", + "mimic-response": "^1.0.1", + "p-cancelable": "^1.0.0", + "to-readable-stream": "^1.0.0", + "url-parse-lax": "^3.0.0" + }, + "dependencies": { + "lowercase-keys": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", + "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==", + "optional": true + } + } + }, + "json-buffer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz", + "integrity": "sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ==", + "optional": true + }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "optional": true, + "requires": { + "graceful-fs": "^4.1.6" + } + }, + "keyv": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz", + "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==", + "optional": true, + "requires": { + "json-buffer": "3.0.0" + } + }, + "p-cancelable": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz", + "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==", + "optional": true + }, + "responselike": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz", + "integrity": "sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ==", + "optional": true, + "requires": { + "lowercase-keys": "^1.0.0" + }, + "dependencies": { + "lowercase-keys": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", + "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==", + "optional": true + } + } + }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "optional": true + } + } + }, "github-from-package": { "version": "0.0.0" }, @@ -74900,6 +76651,47 @@ "imurmurhash": { "version": "0.1.4" }, + "in-gfw": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/in-gfw/-/in-gfw-1.2.0.tgz", + "integrity": "sha512-LgSoQXzuSS/x/nh0eIggq7PsI7gs/sQdXNEolRmHaFUj6YMFmPO1kxQ7XpcT3nPpC3DMwYiJmgnluqJmFXYiMg==", + "optional": true, + "requires": { + "glob": "^7.1.2", + "is-wsl": "^1.1.0", + "mem": "^3.0.1" + }, + "dependencies": { + "is-wsl": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz", + "integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==", + "optional": true + }, + "mem": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mem/-/mem-3.0.1.tgz", + "integrity": "sha512-QKs47bslvOE0NbXOqG6lMxn6Bk0Iuw0vfrIeLykmQle2LkCw1p48dZDdzE+D88b/xqRJcZGcMNeDvSVma+NuIQ==", + "optional": true, + "requires": { + "mimic-fn": "^1.0.0", + "p-is-promise": "^1.1.0" + } + }, + "mimic-fn": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", + "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==", + "optional": true + }, + "p-is-promise": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz", + "integrity": "sha512-zL7VE4JVS2IFSkR2GQKDSPEVxkoH43/p7oEnwpdCndKYJO0HVeRB7fA8TJwuLOTBREtK0ea8eHaxdwcpob5dmg==", + "optional": true + } + } + }, "indent-string": { "version": "4.0.0" }, @@ -75046,8 +76838,7 @@ "version": "2.0.0" }, "ip": { - "version": "1.1.5", - "devOptional": true + "version": "1.1.5" }, "ip-regex": { "version": "2.1.0", @@ -78173,7 +79964,6 @@ }, "lru-cache": { "version": "5.1.1", - "dev": true, "requires": { "yallist": "^3.0.2" } @@ -79691,7 +81481,6 @@ "version": "2.15.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz", "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==", - "dev": true, "optional": true }, "nanoid": { @@ -79766,6 +81555,11 @@ "version": "2.1.0", "dev": true }, + "netmask": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/netmask/-/netmask-1.0.6.tgz", + "integrity": "sha512-3DWDqAtIiPSkBXZyYEjwebfK56nrlQfRGt642fu8RPaL+ePu750+HCMHxjJCG3iEHq/0aeMvX6KIzlv7nuhfrA==" + }, "next-tick": { "version": "1.1.0" }, @@ -80134,6 +81928,35 @@ "boolbase": "^1.0.0" } }, + "nugget": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/nugget/-/nugget-2.0.2.tgz", + "integrity": "sha512-A8A8+PtlH937KWXJnfct6ubGPfgHOe3lwFkkmrT5xW8+aRBnDWqSiW5NRuiVuh/k/auLGsZdu+WrIU2epL/FHg==", + "optional": true, + "requires": { + "debug": "^2.1.3", + "minimist": "^1.1.0", + "pretty-bytes": "^4.0.2", + "progress-stream": "^1.1.0", + "request": "^2.45.0", + "single-line-log": "^1.1.2", + "throttleit": "0.0.2" + }, + "dependencies": { + "pretty-bytes": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz", + "integrity": "sha512-yJAF+AjbHKlxQ8eezMd/34Mnj/YTQ3i6kLzvVsH4l/BfIFtp444n0wVbnsn66JimZ9uBofv815aRp1zCppxlWw==", + "optional": true + }, + "throttleit": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-0.0.2.tgz", + "integrity": "sha512-HtlTFeyYs1elDM2txiIGsdXHaq8kffVaZH/QEBRbo95zQqzlsBx5ELKhkPOZVad9OK9oxzwx6UrQN8Vfh/+yag==", + "optional": true + } + } + }, "null-loader": { "version": "4.0.1", "requires": { @@ -80654,6 +82477,99 @@ "p-try": { "version": "2.2.0" }, + "pac-proxy-agent": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-3.0.1.tgz", + "integrity": "sha512-44DUg21G/liUZ48dJpUSjZnFfZro/0K5JTyFYLBcmh9+T6Ooi4/i4efwUiEy0+4oQusCBqWdhv16XohIj1GqnQ==", + "requires": { + "agent-base": "^4.2.0", + "debug": "^4.1.1", + "get-uri": "^2.0.0", + "http-proxy-agent": "^2.1.0", + "https-proxy-agent": "^3.0.0", + "pac-resolver": "^3.0.0", + "raw-body": "^2.2.0", + "socks-proxy-agent": "^4.0.1" + }, + "dependencies": { + "agent-base": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz", + "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==", + "requires": { + "es6-promisify": "^5.0.0" + } + }, + "debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "requires": { + "ms": "2.1.2" + } + }, + "http-proxy-agent": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz", + "integrity": "sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==", + "requires": { + "agent-base": "4", + "debug": "3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + } + } + }, + "https-proxy-agent": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-3.0.1.tgz", + "integrity": "sha512-+ML2Rbh6DAuee7d07tYGEKOEi2voWPUGan+ExdPbPW6Z3svq+JCqr0v8WmKPOkz1vOVykPCBSuobe7G8GJUtVg==", + "requires": { + "agent-base": "^4.3.0", + "debug": "^3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "requires": { + "ms": "^2.1.1" + } + } + } + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + } + } + }, + "pac-resolver": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-3.0.0.tgz", + "integrity": "sha512-tcc38bsjuE3XZ5+4vP96OfhOugrX+JcnpUbhfuc4LuXBLQhoTthOstZeoQJBDnQUDYzYmdImKsbz0xSl1/9qeA==", + "requires": { + "co": "^4.6.0", + "degenerator": "^1.0.4", + "ip": "^1.1.5", + "netmask": "^1.0.6", + "thunkify": "^2.1.2" + } + }, "package-json": { "version": "6.5.0", "requires": { @@ -81845,6 +83761,67 @@ "progress": { "version": "2.0.3" }, + "progress-stream": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/progress-stream/-/progress-stream-1.2.0.tgz", + "integrity": "sha512-MIBPjZz6oGNSw5rn2mSp+nP9FGoaVo6QsPyPVEaD4puilz5hZNa3kfnrlqRNYFsugslbU3An4mnkLLtZOaWvrA==", + "optional": true, + "requires": { + "speedometer": "~0.1.2", + "through2": "~0.2.3" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==", + "optional": true + }, + "object-keys": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz", + "integrity": "sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw==", + "optional": true + }, + "readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==", + "optional": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==", + "optional": true + }, + "through2": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/through2/-/through2-0.2.3.tgz", + "integrity": "sha512-mLa8Bn2mZurjyomGKWRu3Bo2mvoQojFks9NvOK8H+k4kDJNkdEqG522KFZsEFBEl6rKkxTgFbE5+OPcgfvPEHA==", + "optional": true, + "requires": { + "readable-stream": "~1.1.9", + "xtend": "~2.1.1" + } + }, + "xtend": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz", + "integrity": "sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ==", + "optional": true, + "requires": { + "object-keys": "~0.4.0" + } + } + } + }, "promise": { "version": "8.1.0", "requires": { @@ -81942,6 +83919,87 @@ "ipaddr.js": "1.9.1" } }, + "proxy-agent": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-3.1.1.tgz", + "integrity": "sha512-WudaR0eTsDx33O3EJE16PjBRZWcX8GqCEeERw1W3hZJgH/F2a46g7jty6UGty6NeJ4CKQy8ds2CJPMiyeqaTvw==", + "requires": { + "agent-base": "^4.2.0", + "debug": "4", + "http-proxy-agent": "^2.1.0", + "https-proxy-agent": "^3.0.0", + "lru-cache": "^5.1.1", + "pac-proxy-agent": "^3.0.1", + "proxy-from-env": "^1.0.0", + "socks-proxy-agent": "^4.0.1" + }, + "dependencies": { + "agent-base": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz", + "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==", + "requires": { + "es6-promisify": "^5.0.0" + } + }, + "debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "requires": { + "ms": "2.1.2" + } + }, + "http-proxy-agent": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz", + "integrity": "sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==", + "requires": { + "agent-base": "4", + "debug": "3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + } + } + }, + "https-proxy-agent": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-3.0.1.tgz", + "integrity": "sha512-+ML2Rbh6DAuee7d07tYGEKOEi2voWPUGan+ExdPbPW6Z3svq+JCqr0v8WmKPOkz1vOVykPCBSuobe7G8GJUtVg==", + "requires": { + "agent-base": "^4.3.0", + "debug": "^3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "requires": { + "ms": "^2.1.1" + } + } + } + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + } + } + }, "proxy-from-env": { "version": "1.1.0" }, @@ -85356,6 +87414,52 @@ } } }, + "single-line-log": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/single-line-log/-/single-line-log-1.1.2.tgz", + "integrity": "sha512-awzaaIPtYFdexLr6TBpcZSGPB6D1RInNO/qNetgaJloPDF/D0GkVtLvGEp8InfmLV7CyLyQ5fIRP+tVN/JmWQA==", + "optional": true, + "requires": { + "string-width": "^1.0.1" + }, + "dependencies": { + "ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==", + "optional": true + }, + "is-fullwidth-code-point": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==", + "optional": true, + "requires": { + "number-is-nan": "^1.0.0" + } + }, + "string-width": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==", + "optional": true, + "requires": { + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" + } + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==", + "optional": true, + "requires": { + "ansi-regex": "^2.0.0" + } + } + } + }, "single-trailing-newline": { "version": "1.0.0", "requires": { @@ -85413,6 +87517,11 @@ "slugify": { "version": "1.6.3" }, + "smart-buffer": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", + "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==" + }, "smee-client": { "version": "1.2.2", "dev": true, @@ -85654,6 +87763,34 @@ } } }, + "socks": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/socks/-/socks-2.3.3.tgz", + "integrity": "sha512-o5t52PCNtVdiOvzMry7wU4aOqYWL0PeCXRWBEiJow4/i/wr+wpsJQ9awEu1EonLIqsfGd5qSgDdxEOvCdmBEpA==", + "requires": { + "ip": "1.1.5", + "smart-buffer": "^4.1.0" + } + }, + "socks-proxy-agent": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-4.0.2.tgz", + "integrity": "sha512-NT6syHhI9LmuEMSK6Kd2V7gNv5KFZoLE7V5udWmn0de+3Mkj3UMA/AJPLyeNUVmElCurSHtUdM3ETpR3z770Wg==", + "requires": { + "agent-base": "~4.2.1", + "socks": "~2.3.2" + }, + "dependencies": { + "agent-base": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.1.tgz", + "integrity": "sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==", + "requires": { + "es6-promisify": "^5.0.0" + } + } + } + }, "source-list-map": { "version": "2.0.1" }, @@ -85781,6 +87918,12 @@ } } }, + "speedometer": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/speedometer/-/speedometer-0.1.4.tgz", + "integrity": "sha512-phdEoDlA6EUIVtzwq1UiNMXDUogczp204aYF/yfOhjNePWFfIpBJ1k5wLMuXQhEOOMjuTJEcc4vdZa+vuP+n/Q==", + "optional": true + }, "split": { "version": "0.3.3", "dev": true, @@ -86058,6 +88201,42 @@ "version": "1.0.1", "dev": true }, + "stream-to-array": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/stream-to-array/-/stream-to-array-2.3.0.tgz", + "integrity": "sha512-UsZtOYEn4tWU2RGLOXr/o/xjRBftZRlG3dEWoaHr8j4GuypJ3isitGbVyjQKAuMu+xbiop8q224TjiZWc4XTZA==", + "requires": { + "any-promise": "^1.1.0" + } + }, + "stream-to-promise": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/stream-to-promise/-/stream-to-promise-2.2.0.tgz", + "integrity": "sha512-HAGUASw8NT0k8JvIVutB2Y/9iBk7gpgEyAudXwNJmZERdMITGdajOa4VJfD/kNiA3TppQpTP4J+CtcHwdzKBAw==", + "requires": { + "any-promise": "~1.3.0", + "end-of-stream": "~1.1.0", + "stream-to-array": "~2.3.0" + }, + "dependencies": { + "end-of-stream": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.1.0.tgz", + "integrity": "sha512-EoulkdKF/1xa92q25PbjuDcgJ9RDHYU2Rs3SCIvs2/dSQ3BpmxneNHmA/M7fe60M3PrV7nNGTTNbkK62l6vXiQ==", + "requires": { + "once": "~1.3.0" + } + }, + "once": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz", + "integrity": "sha512-6vaNInhu+CHxtONf3zw3vq4SP2DOQhjBvIa3rNcG0+P7eKWlYH6Peu7rHizSloRU2EwMz6GraLieis9Ac9+p1w==", + "requires": { + "wrappy": "1" + } + } + } + }, "streamsearch": { "version": "0.1.2" }, @@ -86974,6 +89153,11 @@ } } }, + "thunkify": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/thunkify/-/thunkify-2.1.2.tgz", + "integrity": "sha512-w9foI80XcGImrhMQ19pxunaEC5Rp2uzxZZg4XBAFRfiLOplk3F0l7wo+bO16vC2/nlQfR/mXZxcduo0MF2GWLg==" + }, "thunky": { "version": "1.1.0" }, @@ -88279,7 +90463,6 @@ }, "wcwidth": { "version": "1.0.1", - "dev": true, "requires": { "defaults": "^1.0.3" } @@ -88643,7 +90826,6 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "dev": true, "optional": true, "peer": true, "requires": { @@ -89454,6 +91636,11 @@ "xmlhttprequest-ssl": { "version": "1.6.3" }, + "xregexp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-2.0.0.tgz", + "integrity": "sha512-xl/50/Cf32VsGq/1R8jJE5ajH1yMCQkpmoS10QbFZWl2Oor4H0Me64Pu2yxvsRWK3m6soJbmGfzSR7BYmDcWAA==" + }, "xss": { "version": "1.0.10", "requires": { @@ -89476,8 +91663,7 @@ "version": "4.0.3" }, "yallist": { - "version": "3.1.1", - "dev": true + "version": "3.1.1" }, "yaml": { "version": "1.10.2" diff --git a/package.json b/package.json index bad54b6fe0cef2..3f3bb020954d28 100644 --- a/package.json +++ b/package.json @@ -102,10 +102,12 @@ "test-tools": "jest tools", "test-utils": "jest utils", "test-ui-components": "jest tools/ui-components", - "prepare": "husky install" + "prepare": "husky install", + "deploy": "gatsby-plugin-s3 deploy" }, "dependencies": { "dotenv": "10.0.0", + "gatsby-plugin-s3": "^0.3.8", "invariant": "2.2.4" }, "devDependencies": { From 8805020731e9d1c4b0c0adff405dbd35479537d7 Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 16:04:22 -0700 Subject: [PATCH 13/36] PROD-2492 #comment use npx for gatsby s3 plugin #time 5m --- Jenkinsfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Jenkinsfile b/Jenkinsfile index 878fe51864429d..a3cd71498fe3fb 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -137,7 +137,7 @@ pipeline { sh """ #!/bin/bash #./master_deploy.sh -d CFRONT -e $DEPLOY_ENV -c $ENABLE_CACHE - gatsby-plugin-s3 deploy + npx --yes gatsby-plugin-s3 deploy """ } } From 2a87e80d46c6ffecc6ed88a67c1ec45367e35c3b Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 16:21:52 -0700 Subject: [PATCH 14/36] PROD-2492 #comment try doing build in same step as deploy #time 30m --- Jenkinsfile | 30 +++++++++++++++--------------- package.json | 3 +-- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/Jenkinsfile b/Jenkinsfile index a3cd71498fe3fb..3074eb48279bb3 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -122,25 +122,25 @@ pipeline { git config --global url."https://git@".insteadOf git:// npm ci npm run build + npx --yes gatsby-plugin-s3 deploy ls -lath """ } } - stage('appdeploy') - { - //Deploying app - when { expression { IS_APP_DEPLOY } } - steps { - //Doing Deployment - echo "Deploying application" - //input(message: 'Hello World!', ok: 'Submit') - sh """ - #!/bin/bash - #./master_deploy.sh -d CFRONT -e $DEPLOY_ENV -c $ENABLE_CACHE - npx --yes gatsby-plugin-s3 deploy - """ - } - } + // stage('appdeploy') + // { + // //Deploying app + // when { expression { IS_APP_DEPLOY } } + // steps { + // //Doing Deployment + // echo "Deploying application" + // //input(message: 'Hello World!', ok: 'Submit') + // sh """ + // #!/bin/bash + // ./master_deploy.sh -d CFRONT -e $DEPLOY_ENV -c $ENABLE_CACHE + // """ + // } + // } stage('apideploy') { //Deploying app diff --git a/package.json b/package.json index 3f3bb020954d28..7f0ec026a9fe46 100644 --- a/package.json +++ b/package.json @@ -102,8 +102,7 @@ "test-tools": "jest tools", "test-utils": "jest utils", "test-ui-components": "jest tools/ui-components", - "prepare": "husky install", - "deploy": "gatsby-plugin-s3 deploy" + "prepare": "husky install" }, "dependencies": { "dotenv": "10.0.0", From 21b2329acb3e463bd931004a57b71839478246e8 Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 16:44:39 -0700 Subject: [PATCH 15/36] PROD-2492 #comment remove some logging to trigger build #time 15m --- client/src/utils/path-parsers.ts | 1 - client/utils/gatsby/layout-selector.tsx | 5 ----- 2 files changed, 6 deletions(-) diff --git a/client/src/utils/path-parsers.ts b/client/src/utils/path-parsers.ts index cb61cf78c6d816..587606f409c01d 100644 --- a/client/src/utils/path-parsers.ts +++ b/client/src/utils/path-parsers.ts @@ -6,7 +6,6 @@ const splitPath = (pathname: string): string[] => export const isChallenge = (pathname: string): boolean => { const pathArray = splitPath(pathname); - console.debug('########## Path PArsers pathARray', pathArray); return ( // learn/// (pathArray.length === 4 && pathArray[0] === 'learn') || diff --git a/client/utils/gatsby/layout-selector.tsx b/client/utils/gatsby/layout-selector.tsx index 2623418700639e..7fc1435fa000af 100644 --- a/client/utils/gatsby/layout-selector.tsx +++ b/client/utils/gatsby/layout-selector.tsx @@ -18,11 +18,6 @@ export default function layoutSelector({ const { location: { pathname } } = props; - console.debug( - '############ Layout Selector pathname', - props?.location?.pathname - ); - console.debug('############ Layout Selector element type', element?.type); if (element.type === FourOhFourPage) { return ( From fc4d05900189bbb80b212af59a5fff6a123a4c00 Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 17:02:45 -0700 Subject: [PATCH 16/36] PROD-2492 #comment add S3 #time 5m --- Jenkinsfile | 2 ++ s3.config.json | 1 + 2 files changed, 3 insertions(+) create mode 100644 s3.config.json diff --git a/Jenkinsfile b/Jenkinsfile index 3074eb48279bb3..dc4dd8e4872438 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -120,6 +120,8 @@ pipeline { node --version npm --version git config --global url."https://git@".insteadOf git:// + pwd + ls npm ci npm run build npx --yes gatsby-plugin-s3 deploy diff --git a/s3.config.json b/s3.config.json new file mode 100644 index 00000000000000..0967ef424bce67 --- /dev/null +++ b/s3.config.json @@ -0,0 +1 @@ +{} From a49fb93cd46297f5aab5a34f0d9c54cc5007447d Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 17:20:35 -0700 Subject: [PATCH 17/36] PROD-2492 #comment add gatsby config --- s3.config.json => .cache/s3.config.json | 0 .gitignore | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename s3.config.json => .cache/s3.config.json (100%) diff --git a/s3.config.json b/.cache/s3.config.json similarity index 100% rename from s3.config.json rename to .cache/s3.config.json diff --git a/.gitignore b/.gitignore index 286a2e722b191d..ba416e2b1814f1 100644 --- a/.gitignore +++ b/.gitignore @@ -152,7 +152,7 @@ jspm_packages/ chris.env # gatsby files -.cache/ +#.cache/ ### Netlify ### .netlify From 6087cf905f7ac4405d4583cd327ca7bded68dc7f Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 17:35:30 -0700 Subject: [PATCH 18/36] PROD-2492 #comment add s3.params.json #time 30m --- .cache/s3.params.json | 1 + 1 file changed, 1 insertion(+) create mode 100644 .cache/s3.params.json diff --git a/.cache/s3.params.json b/.cache/s3.params.json new file mode 100644 index 00000000000000..0967ef424bce67 --- /dev/null +++ b/.cache/s3.params.json @@ -0,0 +1 @@ +{} From 3f1aa7ba91748d4bcc3b1fc9f6b543f6d95683e4 Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 17:50:06 -0700 Subject: [PATCH 19/36] PROD-2492 #comment add s3.routingRules.json --- .cache/s3.routingRules.json | 1 + 1 file changed, 1 insertion(+) create mode 100644 .cache/s3.routingRules.json diff --git a/.cache/s3.routingRules.json b/.cache/s3.routingRules.json new file mode 100644 index 00000000000000..0967ef424bce67 --- /dev/null +++ b/.cache/s3.routingRules.json @@ -0,0 +1 @@ +{} From 9a7fdc57a3347706a167b33a38af2ae23d4df4cf Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 18 Jul 2022 18:11:30 -0700 Subject: [PATCH 20/36] PROD-2492 #comment revert gatsby deploy #time 15m --- Jenkinsfile | 35 ++++++++++++++++------------------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/Jenkinsfile b/Jenkinsfile index dc4dd8e4872438..e5cd18640e9e11 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -120,30 +120,27 @@ pipeline { node --version npm --version git config --global url."https://git@".insteadOf git:// - pwd - ls npm ci npm run build - npx --yes gatsby-plugin-s3 deploy ls -lath """ } } - // stage('appdeploy') - // { - // //Deploying app - // when { expression { IS_APP_DEPLOY } } - // steps { - // //Doing Deployment - // echo "Deploying application" - // //input(message: 'Hello World!', ok: 'Submit') - // sh """ - // #!/bin/bash - // ./master_deploy.sh -d CFRONT -e $DEPLOY_ENV -c $ENABLE_CACHE - // """ - // } - // } - stage('apideploy') + stage('appdeploy') + { + //Deploying app + when { expression { IS_APP_DEPLOY } } + steps { + //Doing Deployment + echo "Deploying application" + //input(message: 'Hello World!', ok: 'Submit') + sh """ + #!/bin/bash + ./master_deploy.sh -d CFRONT -e $DEPLOY_ENV -c $ENABLE_CACHE + """ + } + } + stage('apideploy') { //Deploying app when { expression { IS_API_DEPLOY } } @@ -156,7 +153,7 @@ pipeline { sed -i '/node_modules/d' ./.dockerignore docker build -f docker/api/ECSDockerfile -t $APPNAME-api:latest . ./master_deploy.sh -d ECS -e $DEPLOY_ENV -t latest -s ${LOGICAL_ENV}-${APPNAME}-appvar -i ${APPNAME}-api - """ + """ } } } From bdc08333030c64bb0fa06f148950ee497f4e8e39 Mon Sep 17 00:00:00 2001 From: Brooke Date: Tue, 19 Jul 2022 09:22:38 -0700 Subject: [PATCH 21/36] PROD-2492 #comment roll back debugging code; remove -mfe from environment #time 30m --- .cache/s3.config.json | 1 - .cache/s3.params.json | 1 - .cache/s3.routingRules.json | 1 - .gitignore | 2 +- Jenkinsfile | 6 ++---- client/gatsby-ssr.js | 1 - 6 files changed, 3 insertions(+), 9 deletions(-) delete mode 100644 .cache/s3.config.json delete mode 100644 .cache/s3.params.json delete mode 100644 .cache/s3.routingRules.json diff --git a/.cache/s3.config.json b/.cache/s3.config.json deleted file mode 100644 index 0967ef424bce67..00000000000000 --- a/.cache/s3.config.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/.cache/s3.params.json b/.cache/s3.params.json deleted file mode 100644 index 0967ef424bce67..00000000000000 --- a/.cache/s3.params.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/.cache/s3.routingRules.json b/.cache/s3.routingRules.json deleted file mode 100644 index 0967ef424bce67..00000000000000 --- a/.cache/s3.routingRules.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/.gitignore b/.gitignore index ba416e2b1814f1..286a2e722b191d 100644 --- a/.gitignore +++ b/.gitignore @@ -152,7 +152,7 @@ jspm_packages/ chris.env # gatsby files -#.cache/ +.cache/ ### Netlify ### .netlify diff --git a/Jenkinsfile b/Jenkinsfile index e5cd18640e9e11..0dc35d669c8bf2 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -1,8 +1,7 @@ // Define Application name -def APPNAME = "freecodecamp-mfe" +def APPNAME = "freecodecamp" // Define which branch build and deploy need to run in the below array - def branchfilter = ['dev', 'prod'] if (!branchfilter.contains(env.BRANCH_NAME)) { @@ -13,7 +12,7 @@ if (!branchfilter.contains(env.BRANCH_NAME)) { return } -//Define branch specific var +// Define branch specific vars if (env.BRANCH_NAME == 'dev') { DEPLOY_ENV = 'DEV' LOGICAL_ENV = 'dev' @@ -24,7 +23,6 @@ if (env.BRANCH_NAME == 'dev') { ENABLE_CACHE = false } -// NOTE: main/prod is not supported yet if (env.BRANCH_NAME == 'prod') { DEPLOY_ENV = 'PROD' LOGICAL_ENV = 'prod' diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js index 89da51c1d59b28..c0c0fd3ccaf563 100644 --- a/client/gatsby-ssr.js +++ b/client/gatsby-ssr.js @@ -29,7 +29,6 @@ export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => { - console.debug('on render body', pathname); setHeadComponents(getheadTagComponents()); setPostBodyComponents(getPostBodyComponents(pathname)); }; From a872f45427c23476e0bf9e64c3a509de9aad33d8 Mon Sep 17 00:00:00 2001 From: Brooke Date: Wed, 20 Jul 2022 15:29:19 -0700 Subject: [PATCH 22/36] remove lessons and modules from responsive web design course for testing --- .../meta.json | 360 -------- .../meta.json | 260 ------ .../build-a-product-landing-page.md | 436 --------- .../build-a-survey-form.md | 518 ----------- .../build-a-technical-documentation-page.md | 529 ----------- .../build-a-tribute-page.md | 325 ------- .../613297a923965e0703b64796.md | 56 -- .../61329b210dac0b08047fd6ab.md | 61 -- .../61329d52e5010e08d9b9d66b.md | 68 -- .../6133acc353338c0bba9cb553.md | 63 -- .../6133d11ef548f51f876149e3.md | 68 -- .../613e2546d0594208229ada50.md | 93 -- .../613e275749ebd008e74bb62e.md | 66 -- .../6140827cff96e906bd38fc2b.md | 93 -- .../6140883f74224508174794c0.md | 89 -- .../61408e4ae3e35d08feb260eb.md | 83 -- .../61408f155e798909b6908712.md | 112 --- .../614090d5a22b6f0a5a6b464c.md | 102 --- .../6141fabd6f75610664e908fd.md | 125 --- .../6141fed65b61320743da5894.md | 111 --- .../614202874ca576084fca625f.md | 171 ---- .../614206033d366c090ca7dd42.md | 140 --- .../61435e3c0679a306c20f1acc.md | 125 --- .../6143610161323a081b249c19.md | 173 ---- .../6143639d5eddc7094161648c.md | 195 ---- .../6143908b6aafb00a659ca189.md | 161 ---- .../6143920c8eafb00b735746ce.md | 127 --- .../6143931a113bb80c45546287.md | 139 --- .../614394fb41985e0d2012a93e.md | 125 --- .../6143956ed76ed60e012faa51.md | 197 ---- .../614396f7ae83f20ea6f9f4b3.md | 200 ---- .../6143cb26f7edff2dc28f7da5.md | 177 ---- .../6144e818fd5ea704fe56081d.md | 195 ---- .../6144f8dc6849e405dd8bb829.md | 231 ----- .../6145e6eeaa66c605eb087fe9.md | 207 ----- .../6145e8b5080a5f06bb0223d0.md | 287 ------ .../6145eb5f08a38a0786c7a80c.md | 224 ----- .../6145ed1f22caab087630aaad.md | 191 ---- .../6145ee65e2e1530938cb594d.md | 232 ----- .../6145f02240ff8f09f7ec913c.md | 215 ----- .../6145f14f019a4b0adb94b051.md | 250 ----- .../6145f3a5cd9be60b9459cdd6.md | 222 ----- .../6145f47393fbe70c4d885f9c.md | 229 ----- .../6145f59029474c0d3dc1c8b8.md | 217 ----- .../6145f685797bd30df9784e8c.md | 230 ----- .../6145f829ac6a920ebf5797d7.md | 215 ----- .../6145f8f8bcd4370f6509078e.md | 220 ----- .../6145fb5018cb5b100cb2a88c.md | 229 ----- .../6145fc3707fc3310c277f5c8.md | 256 ------ .../614796cb8086be482d60e0ac.md | 260 ------ .../6147a14ef5668b5881ef2297.md | 260 ------ .../614878f7a412310647873015.md | 253 ------ .../61487b77d4a37707073a64e5.md | 261 ------ .../61487da611a65307e78d2c20.md | 275 ------ .../61487f703571b60899055cf9.md | 287 ------ .../614880dc16070e093e29bc56.md | 259 ------ .../614883b6fa720e09fb167de9.md | 280 ------ .../614884c1f5d6f30ab3d78cde.md | 364 -------- .../61488ecfd05e290b5712e6da.md | 286 ------ .../6148d99cdc7acd0c519862cb.md | 291 ------ .../6148da157cc0bd0d06df5c0a.md | 306 ------- .../6148dc095264000dce348bf5.md | 323 ------- .../6148dcaaf2e8750e6cb4501a.md | 316 ------- .../6148dd31d210990f0fb140f8.md | 312 ------- .../6148defa9c01520fb9d178a0.md | 315 ------- .../6148dfab9b54c110577de165.md | 360 -------- .../6148e0bcc13efd10f7d7a6a9.md | 336 ------- .../6148e161ecec9511941f8833.md | 356 -------- .../6148e28706b34912340fd042.md | 359 -------- .../6148e335c1edd512d00e4691.md | 342 ------- .../6148e41c728f65138addf9cc.md | 350 ------- .../6148e5aeb102e3142de026a2.md | 685 -------------- .../614ccc21ea91ef1736b9b578.md | 50 - .../5f331e55dfab7a896e53c3a1.md | 47 - .../5f3326b143638ee1a09ff1e3.md | 54 -- .../5f33294a6af5e9188dbdb8f3.md | 60 -- .../5f332a88dc25a0fd25c7687a.md | 62 -- .../5f332b23c2045fb843337579.md | 59 -- .../5f33310c1851c6c4da013250.md | 59 -- .../5f344f9c805cd193c33d829c.md | 71 -- .../5f344fad8bf01691e71a30eb.md | 57 -- .../5f344fbc22624a2976425065.md | 70 -- .../5f344fc1520b6719f2e35605.md | 61 -- .../5f3477ae34c1239cafe128be.md | 73 -- .../5f3477ae8466a9a3d2cc953c.md | 67 -- .../5f3477ae9675db8bb7655b30.md | 87 -- .../5f3477aefa51bfc29327200b.md | 77 -- .../5f3477cb2e27333b1ab2b955.md | 89 -- .../5f3477cb303c5cb61b43aa9b.md | 70 -- .../5f3477cbcb6ba47918c1da92.md | 72 -- .../5f34a1fd611d003edeafd681.md | 64 -- .../5f356ed60785e1f3e9850b6e.md | 74 -- .../5f356ed60a5decd94ab66986.md | 79 -- .../5f356ed6199b0cdef1d2be8f.md | 85 -- .../5f356ed63c7807a4f1e6d054.md | 76 -- .../5f356ed63e0fa262326eef05.md | 74 -- .../5f356ed656a336993abd9f7c.md | 83 -- .../5f356ed69db0a491745e2bb6.md | 75 -- .../5f356ed6cf6eab5f15f5cfe6.md | 77 -- .../5f35e5c4321f818cdc4bed30.md | 86 -- .../5f35e5c44359872a137bd98f.md | 92 -- .../5f3c866d0fc037f7311b4ac8.md | 107 --- .../5f3c866d28d7ad0de6470505.md | 100 -- .../5f3c866d5414453fc2d7b480.md | 128 --- .../5f3c866daec9a49519871816.md | 88 -- .../5f3c866dbf362f99b9a0c6d0.md | 117 --- .../5f3c866dd0d0275f01d4d847.md | 111 --- .../5f3c866de7a5b784048f94b1.md | 108 --- .../5f3cade94c6576e7f7b7953f.md | 108 --- .../5f3cade9993019e26313fa8e.md | 119 --- .../5f3cade99dda4e6071a85dfd.md | 114 --- .../5f3cade9fa77275d9f4efe62.md | 103 --- .../5f3ef6e01f288a026d709587.md | 158 ---- .../5f3ef6e03d719d5ac4738993.md | 122 --- .../5f3ef6e04559b939080db057.md | 147 --- .../5f3ef6e050279c7a4a7101d3.md | 144 --- .../5f3ef6e05473f91f948724ab.md | 121 --- .../5f3ef6e056bdde6ae6892ba2.md | 138 --- .../5f3ef6e06d34faac0447fc44.md | 135 --- .../5f3ef6e07276f782bb46b93d.md | 149 --- .../5f3ef6e0819d4f23ca7285e6.md | 111 --- .../5f3ef6e087d56ed3ffdc36be.md | 134 --- .../5f3ef6e0a81099d9a697b550.md | 156 ---- .../5f3ef6e0b431cc215bb16f55.md | 141 --- .../5f3ef6e0e0c3feaebcf647ad.md | 110 --- .../5f3ef6e0e9629bad967cd71e.md | 121 --- .../5f3ef6e0eaa7da26e3d34d78.md | 135 --- .../5f3ef6e0f8c230bdd2349716.md | 147 --- .../5f3f26fa39591db45e5cd7a0.md | 156 ---- .../5f459225127805351a6ad057.md | 148 --- .../5f459a7ceb8b5c446656d88b.md | 152 ---- .../5f459cf202c2a3472fae6a9f.md | 153 ---- .../5f459fd48bdc98491ca6d1a3.md | 150 --- .../5f45a05977e2fa49d9119437.md | 150 --- .../5f45a276c093334f0f6e9df4.md | 176 ---- .../5f45a5a7c49a8251f0bdb527.md | 162 ---- .../5f45a66d4a2b0453301e5a26.md | 178 ---- .../5f45b0731d39e15d54df4dfc.md | 175 ---- .../5f45b25e7ec2405f166b9de1.md | 182 ---- .../5f45b3c93c027860d9298dbd.md | 186 ---- .../5f45b45d099f3e621fbbb256.md | 189 ---- .../5f45b4c81cea7763550e40df.md | 182 ---- .../5f45b715301bbf667badc04a.md | 184 ---- .../5f46e270702a8456a664f0df.md | 183 ---- .../5f46e36e745ead58487aabf2.md | 195 ---- .../5f46e7a4750dd05b5a673920.md | 191 ---- .../5f46e8284aae155c83015dee.md | 194 ---- .../5f46ede1ff8fec5ba656b44c.md | 154 ---- .../5f46fc57528aa1c4b5ea7c2e.md | 167 ---- .../5f4701b942c824109626c3d8.md | 157 ---- .../5f475bb508746c16c9431d42.md | 223 ----- .../5f475e1c7f71a61d913836c6.md | 199 ---- .../5f47633757ae3469f2d33d2e.md | 106 --- .../5f47fe7e31980053a8d4403b.md | 363 -------- .../5f716ad029ee4053c7027a7a.md | 119 --- .../5f716bee5838c354c728a7c5.md | 145 --- .../5f7691dafd882520797cd2f0.md | 100 -- .../5f7692f7c5b3ce22a57788b6.md | 126 --- .../5f769541be494f25449b292f.md | 105 --- .../5f76967fad478126d6552b0d.md | 102 --- .../5f769702e6e33127d14aa120.md | 106 --- .../5f7b87422a560036fd03ccff.md | 120 --- .../5f7b88d37b1f98386f04edc0.md | 104 --- .../6140c7e645d8e905819f1dd4.md | 178 ---- .../6140c9d35015ae0ba0c250e8.md | 79 -- .../6140cbeec34e970dfe75e710.md | 74 -- .../6140cd32d018ed0f600eefce.md | 72 -- .../6140cdebd39d6a101e747529.md | 85 -- .../6140cfc08ca9c5128c3e6478.md | 83 -- .../6140d0069049f5139d78da40.md | 77 -- .../6140d10d50636e14695013b2.md | 85 -- .../6140d1a351e88f159ed54fca.md | 126 --- .../6140d263016325162fd076fe.md | 111 --- .../6140d2b687a2cd17bac5730c.md | 103 --- .../6140d36b8b747718b50d4b7a.md | 100 -- .../6140d3dc359b371b1a21d783.md | 117 --- .../6140d4bc9db3c81c51a09ab7.md | 199 ---- .../6140d94b5fab7f1d73c9bedb.md | 137 --- .../6140dc5e13d0c81e7496f182.md | 139 --- .../6140dd77e0bc5a1f70bd7466.md | 131 --- .../6140de31b1f5b420410728ff.md | 146 --- .../6140df547f09402144e40b92.md | 142 --- .../6140e0d875ec16262f26432b.md | 144 --- .../6140f4b5c1555a2960de1e5f.md | 191 ---- .../614100d7d335bb2a5ff74f1f.md | 149 --- .../61410126fa3a6d2b3cda502e.md | 151 --- .../6141019eadec6d2c6c6f007b.md | 148 --- .../6141026ec9882f2d39dcf2b8.md | 291 ------ .../6169ab1aaeb4cd1174def700.md | 154 ---- .../6169b1357fcb701bb5efc619.md | 164 ---- .../6169b284950e171d8d0bb16a.md | 304 ------- .../617ace7d831f9c16a569b38a.md | 69 -- .../61695197ac34f0407e339882.md | 66 -- .../61695ab9f6ffe951c16d03dd.md | 67 -- .../61695c4aad56f95497c19583.md | 56 -- .../61695d1fbc003856628bf561.md | 52 -- .../616965351e74d4689eb6de30.md | 53 -- .../616968c2c94c8071b349c146.md | 72 -- .../61696ef7ac756c829f9e4048.md | 74 -- .../616971b3cd990186b66c99a1.md | 59 -- .../616d3a67ccf800ad94ec89ae.md | 71 -- .../616d47bc9eedc4bc7f621bec.md | 66 -- .../616d4a84b756d9c4b8255093.md | 68 -- .../616d50b93ba424d6282c99cf.md | 62 -- .../616d525007b8c5d8b3308b1c.md | 60 -- .../616d55bd160a95e22453a081.md | 91 -- .../616d595270d902f0e7086e18.md | 65 -- .../61764c602bee6974e7790f35.md | 73 -- .../61764f23ea21477b76f3b80f.md | 61 -- .../61764f7e5240eb7ccc7f6a0a.md | 68 -- .../61764fdda535587e1fefb3aa.md | 86 -- .../6176519636a76b810ab1219a.md | 86 -- .../617b65579ce424bf5f02ca73.md | 84 -- .../617b8b38f32bf2080a140675.md | 90 -- .../617b8e0d93a8d10d9a90e720.md | 98 -- .../617b92b9de349513466f6156.md | 78 -- .../617b954d9f4f6217a749380e.md | 84 -- .../617b97abd9f3f61d1590b815.md | 79 -- .../617b9ad735109e217284e095.md | 79 -- .../617bb5624a75e86463b7e638.md | 79 -- .../617bb77353188166af43f3ac.md | 77 -- .../617bb9fdef27bc6aa0470ac2.md | 77 -- .../617bbb6b97a83f6d1f7d6e38.md | 79 -- .../617bc3386dc7d07d6469bf20.md | 79 -- .../617bc4824e233180553a8069.md | 77 -- .../617bd6ec666b1da2587e4e37.md | 95 -- .../618a00ed1ca871a2b3aca0cb.md | 91 -- .../618a0927005553b74bfa05ae.md | 87 -- .../618a0b2befb143baefab632b.md | 87 -- .../618a1275e873dcc803c2d1aa.md | 84 -- .../618a132676346ac9f7fd59dd.md | 82 -- .../618a16873520a8d088ffdf44.md | 79 -- .../618a16d21bd3dad1bb3aa8ef.md | 87 -- .../619b72a0db211f1c29afb906.md | 89 -- .../619b7396e57b771f903be90d.md | 77 -- .../619b7424f43ec9215e538afe.md | 99 -- .../619b74fa777a2b2473c94f82.md | 107 --- .../619b761916dac02643940022.md | 81 -- .../619b7c3c83de403126b69c1e.md | 85 -- .../619b7fd56aa2253778bcf5f7.md | 87 -- .../61a489b8579e87364b2d2cdb.md | 83 -- .../61a493ead935c148d2b76312.md | 87 -- .../61a498399534644f59cff05e.md | 79 -- .../61a49d15bdbb5e57cc6fd280.md | 85 -- .../61a4a53c4459446dc134a1c6.md | 79 -- .../61a4a6e908bc34725b4c25ac.md | 77 -- .../61a4a7877da33a73a1c1723e.md | 79 -- .../61a4ac092eb21e7dbfe61c33.md | 79 -- .../61a4acbb5587197f68544d00.md | 79 -- .../61a4ada3aabeec822b2975d9.md | 79 -- .../61a4ae5f29eb5584187201c3.md | 79 -- .../61a5be9833e7dc178de2af10.md | 79 -- .../61a5bfe091060f1d6a629dd0.md | 81 -- .../61a5c906ab73313316e342f0.md | 91 -- .../61a5ca57f50ded36d33eef96.md | 79 -- .../61a5d594b887335228ee6533.md | 77 -- .../61a5d6701ee08953ca375243.md | 77 -- .../61a5d79c858bef560e26c685.md | 77 -- .../61a5d7ef1cfcf45764df07a2.md | 87 -- .../61adc60b69cd4b87739d2174.md | 92 -- .../61adc91467b5d59328b9f781.md | 98 -- .../61add79e739a5faee9d96080.md | 97 -- .../61add929e41980b1edbdba7e.md | 100 -- .../61addaf7e83988b59a7d18ff.md | 123 --- .../61ade49b2dad60c076cbd32d.md | 97 -- .../61b092eb9e7fc020b43b1bb2.md | 85 -- .../61b093179e7fc020b43b1bb3.md | 88 -- .../61b093219e7fc020b43b1bb4.md | 89 -- .../61b093329e7fc020b43b1bb5.md | 92 -- .../61b093429e7fc020b43b1bb6.md | 103 --- .../61b0934c9e7fc020b43b1bb7.md | 99 -- .../61b0936d9e7fc020b43b1bb8.md | 104 --- .../61b095989e7fc020b43b1bb9.md | 79 -- .../61b095a79e7fc020b43b1bba.md | 79 -- .../61b095c79e7fc020b43b1bbb.md | 77 -- .../61b09f739aa6572d2064f9b8.md | 97 -- .../61b0a1b2af494934b7ec1a72.md | 123 --- .../61b0a44a6b865738ba49b9fb.md | 109 --- .../61b306305810f1c9040ce5a2.md | 104 --- .../61b30995968123ceb6b76167.md | 108 --- .../61b30a286c228bd0c493c09a.md | 111 --- .../61b31287fb580ae75a486047.md | 104 --- .../61b315e76a63b3ecbbb11b75.md | 104 --- .../61b3183655ec10efd8c0bb07.md | 110 --- .../61b31a451057fff645ec09be.md | 102 --- .../61b31cd7b0c76bfc076b4719.md | 184 ---- .../61537485c4f2a624f18d7794.md | 110 --- .../61537a8054753e2f1f2a1574.md | 58 -- .../61537bb9b1a29430ac15ad38.md | 62 -- .../61537c5f81f0cf325b4a854c.md | 62 -- .../61537c9eecea6a335db6da79.md | 65 -- .../61537d86bdc3dd343688fceb.md | 120 --- .../615380dff67172357fcf0425.md | 63 -- .../6153893900438b4643590367.md | 78 -- .../6153897c27f6334716ee5abe.md | 90 -- .../615389bd81347947ea7ba896.md | 86 -- .../6153908a366afb4d57185c8d.md | 82 -- .../615392916d83fa4f02f7e2cf.md | 85 -- .../6153938dce8b294ff8f5a4e9.md | 84 -- .../6153947986535e5117e60615.md | 85 -- .../61539e07e7430b528fbffe21.md | 87 -- .../61539f32a206bd53ec116465.md | 87 -- .../6153a04847abee57a3a406ac.md | 94 -- .../6153a3485f0b20591d26d2a1.md | 88 -- .../6153a3952facd25a83fe8083.md | 112 --- .../6153a3ebb4f7f05b8401b716.md | 207 ----- .../615f171d05def3218035dc85.md | 77 -- .../61437d575fb98f57fa8f7f36.md | 135 --- .../614385513d91ae5c251c2052.md | 102 --- .../6143862a5e54455d262c212e.md | 75 -- .../6143869bb45bd85e3b1926aa.md | 109 --- .../614387cbefeeba5f3654a291.md | 152 ---- .../614389f601bb4f611db98563.md | 134 --- .../61438b5b66d76a6264430f2a.md | 139 --- .../61438ec09438696391076d6a.md | 129 --- .../61439dc084fa5f659cf75d7c.md | 109 --- .../61439dfc811e12666b04be6f.md | 113 --- .../61439e33e4fb7967609e0c83.md | 148 --- .../6143a1a228f7d068ab16a130.md | 130 --- .../6143a73279ce6369de4b9bcc.md | 128 --- .../6143a778bffc206ac6b1dbe3.md | 135 --- .../6143a83fcc32c26bcfae3efa.md | 166 ---- .../6143b97c06c3306d23d5da47.md | 174 ---- .../6143b9e1f5035c6e5f2a8231.md | 228 ----- .../6143bb50e8e48c6f5ef9d8d5.md | 195 ---- .../6143c2a363865c715f1a3f72.md | 206 ----- .../6143cd08fe927072ca3a371d.md | 213 ----- .../6143cdf48b634a747de42104.md | 220 ----- .../6143d003ad9e9d76766293ec.md | 226 ----- .../6143d2842b497779bad947de.md | 217 ----- .../6144d66a5358db0c80628757.md | 226 ----- .../6144d7dbdd3e580da730ff45.md | 234 ----- .../6144de308591ec10e27d5383.md | 228 ----- .../6144e1ba93e435127a7f516d.md | 232 ----- .../6144ee46a9d6e614c598cc05.md | 241 ----- .../6144ee790af79815ad15a832.md | 242 ----- .../6144f1410990ea17187a722b.md | 238 ----- .../6144f3818bfbc51844152e36.md | 239 ----- .../6144f42204c8c8195f1f3345.md | 237 ----- .../6144f47b7c631e1a6f304dd5.md | 250 ----- .../6148b07081759c2c691166a9.md | 250 ----- .../6148b0d764e4192e5712ed92.md | 248 ----- .../6148b185ef37522f688316b0.md | 253 ------ .../6148b30464daf630848c21d4.md | 250 ----- .../6148b4b150434734143db6f2.md | 261 ------ .../6148b5623efa8f369f2c3643.md | 255 ------ .../6148b59ef318e03875f35c4a.md | 271 ------ .../6148bd62bbb8c83a5f1fc1b3.md | 280 ------ .../6148be3d605d6b3ca9425d11.md | 286 ------ .../6148be82ca63c63daa8cca49.md | 287 ------ .../6148bf49fcc7913f05dbf9b7.md | 287 ------ .../6148bfc43df3bc40fe0e6405.md | 289 ------ .../6148c004ffc8434252940dc3.md | 299 ------ .../6148c224ecb157439bc5247c.md | 290 ------ .../6148c434bd731d45617a76c6.md | 295 ------ .../6148c5036ddad94692a66230.md | 294 ------ .../6148c58bace368497fb11bcf.md | 295 ------ .../6148c6aa9981d74af202125e.md | 300 ------ .../6148c721e74ecd4c619ae51c.md | 298 ------ .../6148ceaf5d897d4d8b3554b3.md | 299 ------ .../6148cf094b3f2b4e8a032c63.md | 314 ------- .../6148d0b863d10d50544ace0e.md | 309 ------- .../6148d1bdf39c5b5186f5974b.md | 313 ------- .../6148d1f9eb63c252e1f8acc4.md | 311 ------- .../6148d2444d01ab541e64a1e4.md | 330 ------- .../6148d33e31fccf558696c745.md | 317 ------- .../6148d3fff5186b57123d97e2.md | 341 ------- .../6148d4d57b965358c9fa38bf.md | 335 ------- .../6148d7720f0db36775db868a.md | 335 ------- .../6148d94fdf6a5d6899f8ff15.md | 331 ------- .../6148d9825b50a3698aeee644.md | 340 ------- .../6148e162e255676ae0da6a76.md | 336 ------- .../6148e19c3e26436be0155690.md | 345 ------- .../6148e246146b646cf4255f0c.md | 349 ------- .../6148e2dcdd60306dd77d41cc.md | 355 -------- .../6148e4d6861a486f60681f36.md | 357 -------- .../6148e5a204d99e70343a63e4.md | 353 ------- .../6148e62a6f768f71c4f04828.md | 354 ------- .../6148e789329dc9736ce59b85.md | 361 -------- .../6148f34ebedc2274bceeb99c.md | 375 -------- .../6148f600cde42b7670c2611f.md | 379 -------- .../6148f693e0728f77c87f3020.md | 404 -------- .../6148f6f7d8914c78e93136ca.md | 780 ---------------- .../614e0e503b110f76d3ac2ff6.md | 256 ------ .../614e0e588f0e8a772a8a81a6.md | 69 -- .../6165d3b702a5d92ad970b30c.md | 104 --- .../6169cd8a558aa8434e0ad7f6.md | 77 -- .../619665c9abd72906f3ad30f9.md | 125 --- .../61967e74a8e3690ab6292daa.md | 56 -- .../61968df2acd5550bf1616c34.md | 53 -- .../61968e9243a4090cc805531c.md | 51 -- .../61968f8877c6720d6d61aaf5.md | 64 -- .../619691693bc14b0e528f5a20.md | 66 -- .../6196928658b6010f28c39484.md | 58 -- .../619692ff79f5770fc6d8c0b4.md | 73 -- .../6196990f966e8f10a40094f6.md | 75 -- .../619699c10a0f6e11591d73c4.md | 75 -- .../61969aa6acef5b12200f672e.md | 83 -- .../61969c487ced6f12db8fef94.md | 89 -- .../61969d66cfcdba137d021558.md | 76 -- .../61969e7451455614217e901b.md | 91 -- .../6196adc17f77a714d51485f2.md | 90 -- .../6196aead7ac7bf1584b17a7f.md | 86 -- .../6196ce0415498d2463989e84.md | 92 -- .../6196cee94c6da1253809dff9.md | 100 -- .../6196d00a5d7292262bc02f4c.md | 87 -- .../6196d0cda039d026f7f78d1e.md | 100 -- .../6196d1ac33c68d27dcda5796.md | 119 --- .../6196d213d99f16287bff22ae.md | 104 --- .../6196d2c0f22ca0293107c048.md | 112 --- .../6196d32d1340d829f0f6f57d.md | 105 --- .../6196d41d40bf9b2aaea5d520.md | 107 --- .../6197cff995d03905b0cca8ad.md | 118 --- .../6197f40a16afea068c7e60c8.md | 125 --- .../6197f667297bb30a552ce017.md | 65 -- .../61993b72e874e709b8dfd666.md | 128 --- .../61993cf26a8e0f0a553db223.md | 122 --- .../61993dbb35adf30b10d49e38.md | 139 --- .../61993e9adc9e9a0bb4d28fff.md | 133 --- .../6199409834ccaf0d10736596.md | 139 --- .../6199429802b7c10dc79ff871.md | 154 ---- .../619943285a41720e6370d985.md | 156 ---- .../619943876b706d0f35c01dbc.md | 146 --- .../6199442866286d0ff421a4fc.md | 148 --- .../619bcf239fc15905ecd66fce.md | 145 --- .../619be73b3c806006ccc00bb0.md | 158 ---- .../619be7af7b0bf60770f5d2a4.md | 155 ---- .../619be80062551a080e32c821.md | 160 ---- .../619be8ce4ea49008c5bfbc30.md | 152 ---- .../619be946958c6009844f1dee.md | 166 ---- .../619c155df0063a0a3fec0e32.md | 193 ---- .../619c16debd0c270b01c5ce38.md | 165 ---- .../619cfdf2e63ddf05feab86ad.md | 169 ---- .../619d019488f98c06acbbb71a.md | 171 ---- .../619d022dc8400c0763829a17.md | 177 ---- .../619d02c7bc95bf0827a5d296.md | 181 ---- .../619d033915012509031f309a.md | 184 ---- .../619d03dadadb6509a16f4f5f.md | 210 ----- .../619d0503e03a790a4179d463.md | 206 ----- .../619d05c54dabca0b10058235.md | 197 ---- .../619d0882f54bf40bdc4671ed.md | 197 ---- .../619d090cd8d6db0c93dc5087.md | 222 ----- .../619d0b51ca42ed0d74582186.md | 207 ----- .../619d0bc9cb05360e1bf549c3.md | 200 ---- .../619d0c1594c38c0ebae75878.md | 215 ----- .../619d0d18ca99870f884a7bff.md | 225 ----- .../619d0daf214542102739b0da.md | 227 ----- .../619d0e56f9ca9710fcb974e3.md | 226 ----- .../619d0eec0ac40611b41e2ccc.md | 247 ----- .../619d0fc9825c271253df28d4.md | 238 ----- .../619d102d786c3d13124c37c6.md | 231 ----- .../619d107edf7ddf13cc77106a.md | 246 ----- .../619d10cc98145f14820399c5.md | 271 ------ .../619d115e2adcd71538e82ebb.md | 256 ------ .../619d11e6d5ef9515d2a16033.md | 262 ------ .../619d129a417d0716a94de913.md | 267 ------ .../619d1340361095175f4b5115.md | 267 ------ .../619d15797b580c1828b05426.md | 263 ------ .../619d15d955d9d418c4487bbc.md | 264 ------ .../619d1629a8adc61960ca8b40.md | 278 ------ .../619d1c5fc9f8941a400955da.md | 272 ------ .../619d1dab9ff3421ae1976991.md | 273 ------ .../619d1deb8b04811b8839ffe4.md | 281 ------ .../619d1e7a8e81a61c5a819dc4.md | 272 ------ .../619d1ed33c9a071cf657a0d6.md | 306 ------- .../619d1fb5d244c31db8a7fdb7.md | 295 ------ .../619d204bd73ae51e743b8e94.md | 288 ------ .../619d20b12996101f430920fb.md | 304 ------- .../619d21fe6a3f9b2016be9d9d.md | 304 ------- .../619d229b0e542520cd91c685.md | 300 ------ .../619d23089e787e216a7043d6.md | 295 ------ .../619d237a107c10221ed743fa.md | 328 ------- .../619d26b12e651022d80cd017.md | 317 ------- .../619d2712853306238f41828e.md | 332 ------- .../619d2b7a84e78b246f2d17a2.md | 340 ------- .../619d2bd9c1d43c2526e96f1f.md | 325 ------- .../619d2d4e80400325ff89664a.md | 320 ------- .../619d2ebc81ba81271460850d.md | 321 ------- .../619d2f0e9440bc27caee1cec.md | 327 ------- .../619d2fd3ff4f772882e3d998.md | 323 ------- .../619d30350883802921bfcccc.md | 333 ------- .../619d324f5915c929f36ae91d.md | 345 ------- .../619d32c7fa21f32aaa91d499.md | 338 ------- .../619d333b738e3c2b5d58b095.md | 338 ------- .../619d337765b9f02c10e93722.md | 344 ------- .../619d33c51140292cc5a21742.md | 357 -------- .../619d3482f505452d861d0f62.md | 347 ------- .../619d3561a951bf2e41a24f10.md | 346 ------- .../619d36103839c82efa95dd34.md | 357 -------- .../619d3711d04d623000013e9e.md | 670 -------------- .../61a8fe15a6a31306e60d1e89.md | 55 -- .../5d822fd413a79914d39e98c9.md | 53 -- .../5d822fd413a79914d39e98ca.md | 54 -- .../5d822fd413a79914d39e98cb.md | 69 -- .../5d822fd413a79914d39e98cc.md | 100 -- .../5d822fd413a79914d39e98cd.md | 55 -- .../5d822fd413a79914d39e98ce.md | 60 -- .../5d822fd413a79914d39e98cf.md | 68 -- .../5d822fd413a79914d39e98d0.md | 64 -- .../5d822fd413a79914d39e98d1.md | 67 -- .../5d822fd413a79914d39e98d2.md | 82 -- .../5d822fd413a79914d39e98d3.md | 104 --- .../5d822fd413a79914d39e98d4.md | 137 --- .../5d822fd413a79914d39e98d5.md | 111 --- .../5d822fd413a79914d39e98d6.md | 102 --- .../5d822fd413a79914d39e98d7.md | 97 -- .../5d822fd413a79914d39e98d8.md | 123 --- .../5d822fd413a79914d39e98d9.md | 98 -- .../5d822fd413a79914d39e98da.md | 132 --- .../5d822fd413a79914d39e98db.md | 132 --- .../5d822fd413a79914d39e98dc.md | 126 --- .../5d822fd413a79914d39e98dd.md | 141 --- .../5d822fd413a79914d39e98de.md | 139 --- .../5d822fd413a79914d39e98df.md | 123 --- .../5d822fd413a79914d39e98e0.md | 141 --- .../5d822fd413a79914d39e98e1.md | 154 ---- .../5d822fd413a79914d39e98e2.md | 134 --- .../5d822fd413a79914d39e98e3.md | 137 --- .../5d822fd413a79914d39e98e4.md | 146 --- .../5d822fd413a79914d39e98e5.md | 160 ---- .../5d822fd413a79914d39e98e6.md | 191 ---- .../5d822fd413a79914d39e98e7.md | 252 ----- .../5d822fd413a79914d39e98e8.md | 189 ---- .../5d822fd413a79914d39e98e9.md | 222 ----- .../5d822fd413a79914d39e98ea.md | 180 ---- .../5d822fd413a79914d39e98eb.md | 202 ---- .../5d822fd413a79914d39e98ec.md | 202 ---- .../5d822fd413a79914d39e98ed.md | 201 ---- .../5d822fd413a79914d39e98ee.md | 195 ---- .../5d822fd413a79914d39e98ef.md | 196 ---- .../5d822fd413a79914d39e98f0.md | 217 ----- .../5d822fd413a79914d39e98f1.md | 222 ----- .../5d822fd413a79914d39e98f2.md | 236 ----- .../5d822fd413a79914d39e98f3.md | 221 ----- .../5d822fd413a79914d39e98f4.md | 226 ----- .../5d822fd413a79914d39e98f5.md | 197 ---- .../5d822fd413a79914d39e98f6.md | 206 ----- .../5d822fd413a79914d39e98f7.md | 202 ---- .../5d822fd413a79914d39e98f8.md | 209 ----- .../5d822fd413a79914d39e98f9.md | 206 ----- .../5d822fd413a79914d39e98fa.md | 210 ----- .../5d822fd413a79914d39e98fb.md | 239 ----- .../5d822fd413a79914d39e98fc.md | 210 ----- .../5d822fd413a79914d39e98fd.md | 208 ----- .../5d822fd413a79914d39e98fe.md | 259 ------ .../5d822fd413a79914d39e98ff.md | 237 ----- .../5d822fd413a79914d39e9900.md | 223 ----- .../5d822fd413a79914d39e9901.md | 223 ----- .../5d822fd413a79914d39e9902.md | 226 ----- .../5d822fd413a79914d39e9903.md | 222 ----- .../5d822fd413a79914d39e9904.md | 244 ----- .../5d822fd413a79914d39e9905.md | 222 ----- .../5d822fd413a79914d39e9906.md | 248 ----- .../5d822fd413a79914d39e9907.md | 257 ------ .../5d822fd413a79914d39e9908.md | 257 ------ .../5d822fd413a79914d39e9909.md | 244 ----- .../5d822fd413a79914d39e990a.md | 276 ------ .../5d822fd413a79914d39e990b.md | 253 ------ .../5d822fd413a79914d39e990c.md | 252 ----- .../5d822fd413a79914d39e990d.md | 254 ------ .../5d822fd413a79914d39e990e.md | 264 ------ .../5d822fd413a79914d39e990f.md | 285 ------ .../5d822fd413a79914d39e9910.md | 265 ------ .../5d822fd413a79914d39e9911.md | 290 ------ .../5d822fd413a79914d39e9912.md | 286 ------ .../5d822fd413a79914d39e9913.md | 279 ------ .../5d822fd413a79914d39e9914.md | 283 ------ .../5d822fd413a79914d39e9915.md | 390 -------- .../5d822fd413a79914d39e9916.md | 296 ------ .../5d822fd413a79914d39e9917.md | 306 ------- .../5d822fd413a79914d39e9918.md | 297 ------ .../5d822fd413a79914d39e9919.md | 300 ------ .../5d822fd413a79914d39e991a.md | 311 ------- .../5d822fd413a79914d39e991b.md | 313 ------- .../5d822fd413a79914d39e991c.md | 316 ------- .../5d822fd413a79914d39e991d.md | 314 ------- .../5d822fd413a79914d39e991e.md | 325 ------- .../5d822fd413a79914d39e991f.md | 323 ------- .../5d822fd413a79914d39e9920.md | 329 ------- .../5d822fd413a79914d39e9921.md | 347 ------- .../5d822fd413a79914d39e9922.md | 346 ------- .../5d822fd413a79914d39e9923.md | 347 ------- .../5d822fd413a79914d39e9924.md | 339 ------- .../5d822fd413a79914d39e9925.md | 345 ------- .../5d822fd413a79914d39e9926.md | 354 ------- .../5d822fd413a79914d39e9927.md | 349 ------- .../5d822fd413a79914d39e9928.md | 348 ------- .../5d822fd413a79914d39e9929.md | 361 -------- .../5d822fd413a79914d39e992a.md | 358 -------- .../5d822fd413a79914d39e992b.md | 360 -------- .../5d822fd413a79914d39e992c.md | 363 -------- .../5d822fd413a79914d39e992d.md | 376 -------- .../5d822fd413a79914d39e992e.md | 373 -------- .../5d822fd413a79914d39e992f.md | 376 -------- .../5d822fd413a79914d39e9930.md | 380 -------- .../5d822fd413a79914d39e9931.md | 403 -------- .../5d822fd413a79914d39e9932.md | 395 -------- .../5d822fd413a79914d39e9933.md | 401 -------- .../5d822fd413a79914d39e9934.md | 408 --------- .../5d822fd413a79914d39e9935.md | 408 --------- .../5d822fd413a79914d39e9936.md | 401 -------- .../5d822fd413a79914d39e9937.md | 402 -------- .../5d822fd413a79914d39e9938.md | 420 --------- .../5d822fd413a79914d39e9939.md | 409 --------- .../5d822fd413a79914d39e993a.md | 421 --------- .../5d822fd413a79914d39e993b.md | 423 --------- .../5d822fd413a79914d39e993c.md | 436 --------- .../5d822fd413a79914d39e993d.md | 448 --------- .../5d822fd413a79914d39e993e.md | 860 ------------------ .../5dc17d3bf86c76b9248c6eb4.md | 60 -- .../5dc17dc8f86c76b9248c6eb5.md | 68 -- .../5dc2385ff86c76b9248c6eb7.md | 73 -- .../5dc23991f86c76b9248c6eb8.md | 95 -- .../5dc23f9bf86c76b9248c6eba.md | 61 -- .../5dc24073f86c76b9248c6ebb.md | 59 -- .../5dc24165f86c76b9248c6ebc.md | 57 -- .../5dc24614f86c76b9248c6ebd.md | 79 -- .../5ddbd81294d8ddc1510a8e56.md | 57 -- .../5dfa22d1b521be39a3de7be0.md | 66 -- .../5dfa2407b521be39a3de7be1.md | 55 -- .../5dfa30b9eacea3f48c6300ad.md | 88 -- .../5dfa3589eacea3f48c6300ae.md | 75 -- .../5dfa371beacea3f48c6300af.md | 82 -- .../5dfa37b9eacea3f48c6300b0.md | 58 -- .../5dfb5ecbeacea3f48c6300b1.md | 77 -- .../5dfb6250eacea3f48c6300b2.md | 88 -- .../5dfb655eeacea3f48c6300b3.md | 76 -- .../5dfb6a35eacea3f48c6300b4.md | 106 --- .../5ef9b03c81a63668521804d0.md | 85 -- .../5ef9b03c81a63668521804d1.md | 79 -- .../5ef9b03c81a63668521804d2.md | 92 -- .../5ef9b03c81a63668521804d3.md | 72 -- .../5ef9b03c81a63668521804d4.md | 96 -- .../5ef9b03c81a63668521804d5.md | 103 --- .../5ef9b03c81a63668521804d6.md | 88 -- .../5ef9b03c81a63668521804d7.md | 116 --- .../5ef9b03c81a63668521804d8.md | 109 --- .../5ef9b03c81a63668521804d9.md | 104 --- .../5ef9b03c81a63668521804da.md | 93 -- .../5ef9b03c81a63668521804db.md | 91 -- .../5ef9b03c81a63668521804dc.md | 135 --- .../5ef9b03c81a63668521804dd.md | 104 --- .../5ef9b03c81a63668521804de.md | 98 -- .../5ef9b03c81a63668521804df.md | 89 -- .../5ef9b03c81a63668521804e1.md | 100 -- .../5ef9b03c81a63668521804e2.md | 128 --- .../5ef9b03c81a63668521804e3.md | 122 --- .../5ef9b03c81a63668521804e5.md | 117 --- .../5ef9b03c81a63668521804e7.md | 102 --- .../5ef9b03c81a63668521804e8.md | 104 --- .../5ef9b03c81a63668521804e9.md | 118 --- .../5ef9b03c81a63668521804ea.md | 108 --- .../5ef9b03c81a63668521804eb.md | 110 --- .../5ef9b03c81a63668521804ec.md | 105 --- .../5ef9b03c81a63668521804ee.md | 166 ---- .../5efada803cbd2bbdab94e332.md | 100 -- .../5efae0543cbd2bbdab94e333.md | 97 -- .../5efae16e3cbd2bbdab94e334.md | 123 --- .../5efb23e70dc218d6c85f89b1.md | 104 --- .../5efb2c990dc218d6c85f89b2.md | 101 -- .../5efc4f528d6a74d05e68af74.md | 136 --- .../5efc518e8d6a74d05e68af75.md | 98 -- .../5efc54138d6a74d05e68af76.md | 86 -- .../5efc575c8d6a74d05e68af77.md | 124 --- .../5f05a1d8e233dff4a68508d8.md | 107 --- .../5f07be6ef7412fbad0c5626b.md | 63 -- .../5f07c98cdb9413cbd4b16750.md | 81 -- .../5f07fb1579dc934717801375.md | 98 -- .../5f0d48e7b435f13ab6550051.md | 105 --- .../5f0d4ab1b435f13ab6550052.md | 128 --- .../5f0d4d04b435f13ab6550053.md | 114 --- .../5f1a80975fc4bcae0edb3497.md | 101 -- .../5f1a89f1190aff21ae42105a.md | 106 --- .../7cf9b03d81a65668421804c3.md | 103 --- .../60eebd07ea685b0e777b5583.md | 52 -- .../60f027099a15b00485563dd2.md | 54 -- .../60f027c87bc98f050395c139.md | 67 -- .../60f0286404aefb0562a4fdf9.md | 99 -- .../60f02e7361b68405e27b62a5.md | 43 - .../60f030d388cb74067cf291c3.md | 54 -- .../60f1922fcbd2410527b3bd89.md | 54 -- .../60f1a5e2d2c23707a4f9a660.md | 51 -- .../60f1a9cbd23023082e149fee.md | 64 -- .../60f5c3e399ff1a05629964e4.md | 62 -- .../60f5cb8875ab6a0610f05071.md | 63 -- .../60f5d2776c854e069560fbe6.md | 61 -- .../60f5dc35c07ac1078f140916.md | 81 -- .../60f803d5241e6a0433a523a1.md | 72 -- .../60f805f813eaf2049bc2ceea.md | 94 -- .../60f80e0081e0f2052ae5b505.md | 87 -- .../60f81167d0d4910809f88945.md | 79 -- .../60f81616cff80508badf9ad5.md | 93 -- .../60f83e7bfc09900959f41e20.md | 73 -- .../60f84ec41116b209c280ba91.md | 81 -- .../60f852f645b5310a8264f555.md | 75 -- .../60f85a62fb30c80bcea0cedb.md | 84 -- .../60f8604682407e0d017bbf7f.md | 81 -- .../60f8618d191b940d62038513.md | 105 --- .../60fab4a123ce4b04526b082b.md | 83 -- .../60fab8367d35de04e5cb7929.md | 85 -- .../60fab9f17fa294054b74228c.md | 88 -- .../60fabf0dd4959805dbae09e6.md | 102 --- .../60fac4095512d3066053d73c.md | 84 -- .../60fac56271087806def55b33.md | 94 -- .../60fac8d7fdfaee0796934f20.md | 116 --- .../60faca286cb48b07f6482970.md | 110 --- .../60facde2d0dc61085b41063f.md | 105 --- .../60facf914c7b9b08d7510c2c.md | 95 -- .../60fad0a812d9890938524f50.md | 95 -- .../60fad1cafcde010995e15306.md | 155 ---- .../60fad6dfcc0d930a59becf12.md | 102 --- .../60fad8e6148f310bba7890b1.md | 103 --- .../60fad99e09f9d30c1657e790.md | 120 --- .../60fadb18058e950c73925279.md | 121 --- .../60fadce90f85c50d0bb0dd4f.md | 114 --- .../60fadd972e6ffe0d6858fa2d.md | 151 --- .../60fadfa2b540b70dcfa8b771.md | 131 --- .../60fc219d333e37046f474a6e.md | 125 --- .../60fc22d1e64d1b04cdd4e602.md | 140 --- .../60fc236dc04532052926fdac.md | 125 --- .../60ffe1bc30415f042faea936.md | 142 --- .../60ffe3936796ac04959285a9.md | 139 --- .../60ffe4f4ec18cd04dc470c56.md | 144 --- .../60ffe69ee377c6055e192a46.md | 152 ---- .../60ffe7d8aae62c05bcc9e7eb.md | 145 --- .../60ffe8a5ceb0e90618db06d9.md | 143 --- .../60ffe947a868ec068f7850f6.md | 145 --- .../60ffe9cb47809106eda2f2c9.md | 150 --- .../60ffec2825da1007509ddd06.md | 151 --- .../60ffecefac971607ae73c60f.md | 152 ---- .../60ffefd6479a3d084fb77cbc.md | 284 ------ .../60b69a66b6ddb80858c51578.md | 112 --- .../60b69a66b6ddb80858c51579.md | 63 -- .../60b69a66b6ddb80858c5157a.md | 58 -- .../60b69a66b6ddb80858c5157b.md | 50 - .../60b69a66b6ddb80858c5157c.md | 51 -- .../60b69a66b6ddb80858c5157d.md | 54 -- .../60b69a66b6ddb80858c5157e.md | 56 -- .../60b69a66b6ddb80858c5157f.md | 69 -- .../60b69a66b6ddb80858c51580.md | 59 -- .../60b69a66b6ddb80858c51581.md | 68 -- .../60b69a66b6ddb80858c51582.md | 70 -- .../60b69a66b6ddb80858c51583.md | 84 -- .../60b69a66b6ddb80858c51584.md | 79 -- .../60b69a66b6ddb80858c51585.md | 74 -- .../60b69a66b6ddb80858c51586.md | 93 -- .../60b69a66b6ddb80858c51587.md | 91 -- .../60b69a66b6ddb80858c51588.md | 102 --- .../60b69a66b6ddb80858c51589.md | 88 -- .../60b69a66b6ddb80858c5158a.md | 107 --- .../60b69a66b6ddb80858c5158b.md | 105 --- .../60b69a66b6ddb80858c5158c.md | 116 --- .../60b69a66b6ddb80858c5158d.md | 114 --- .../60b69a66b6ddb80858c5158e.md | 105 --- .../60b69a66b6ddb80858c5158f.md | 126 --- .../60b69a66b6ddb80858c51590.md | 124 --- .../60b69a66b6ddb80858c51591.md | 115 --- .../60b69a66b6ddb80858c51592.md | 136 --- .../60b69a66b6ddb80858c51593.md | 125 --- .../60b69a66b6ddb80858c51594.md | 135 --- .../60b69a66b6ddb80858c51595.md | 146 --- .../60b69a66b6ddb80858c51596.md | 144 --- .../60b69a66b6ddb80858c51597.md | 135 --- .../60b69a66b6ddb80858c51598.md | 142 --- .../60b69a66b6ddb80858c51599.md | 156 ---- .../60b69a66b6ddb80858c5159a.md | 158 ---- .../60b69a66b6ddb80858c5159b.md | 161 ---- .../60b69a66b6ddb80858c5159c.md | 169 ---- .../60b69a66b6ddb80858c5159d.md | 167 ---- .../60b69a66b6ddb80858c5159e.md | 178 ---- .../60b69a66b6ddb80858c5159f.md | 183 ---- .../60b69a66b6ddb80858c515a0.md | 181 ---- .../60b69a66b6ddb80858c515a1.md | 192 ---- .../60b69a66b6ddb80858c515a2.md | 190 ---- .../60b69a66b6ddb80858c515a3.md | 201 ---- .../60b69a66b6ddb80858c515a4.md | 199 ---- .../60b69a66b6ddb80858c515a5.md | 190 ---- .../60b69a66b6ddb80858c515a6.md | 211 ----- .../60b69a66b6ddb80858c515a7.md | 217 ----- .../60b69a66b6ddb80858c515a8.md | 207 ----- .../60b69a66b6ddb80858c515a9.md | 217 ----- .../60b69a66b6ddb80858c515aa.md | 220 ----- .../60b69a66b6ddb80858c515ab.md | 225 ----- .../60b69a66b6ddb80858c515ac.md | 228 ----- .../60b69a66b6ddb80858c515ad.md | 225 ----- .../60b69a66b6ddb80858c515ae.md | 245 ----- .../60b69a66b6ddb80858c515af.md | 240 ----- .../60b69a66b6ddb80858c515b0.md | 238 ----- .../60b69a66b6ddb80858c515b1.md | 298 ------ .../60b69a66b6ddb80858c515b2.md | 281 ------ .../60b69a66b6ddb80858c515b3.md | 287 ------ .../60b69a66b6ddb80858c515b4.md | 285 ------ .../60b69a66b6ddb80858c515b5.md | 296 ------ .../60b69a66b6ddb80858c515b6.md | 282 ------ .../60b69a66b6ddb80858c515b7.md | 295 ------ .../60b69a66b6ddb80858c515b8.md | 286 ------ .../60b69a66b6ddb80858c515b9.md | 301 ------ .../60b69a66b6ddb80858c515ba.md | 304 ------- .../60b69a66b6ddb80858c515bc.md | 295 ------ .../60b69a66b6ddb80858c515bd.md | 348 ------- .../60b69a66b6ddb80858c515be.md | 337 ------- .../60b69a66b6ddb80858c515bf.md | 348 ------- .../60b69a66b6ddb80858c515c0.md | 359 -------- .../60b69a66b6ddb80858c515c1.md | 365 -------- .../60b69a66b6ddb80858c515c2.md | 363 -------- .../60b69a66b6ddb80858c515c3.md | 354 ------- .../60b69a66b6ddb80858c515c4.md | 381 -------- .../60b69a66b6ddb80858c515c5.md | 382 -------- .../60b69a66b6ddb80858c515c6.md | 388 -------- .../60b69a66b6ddb80858c515c7.md | 739 --------------- .../60b80da8676fb3227967a731.md | 74 -- .../60ba890832b4940f24d1936b.md | 312 ------- .../60ba89123a445e0f5c9e4022.md | 326 ------- .../60ba8913f1704c0f7a8906b8.md | 312 ------- .../60ba89146b25080f99ab54ad.md | 315 ------- .../60ba8914bab51f0fb8228e9c.md | 310 ------- .../60ba929345ab0714a3743655.md | 327 ------- .../60ba9296d4d6b414c1b10995.md | 330 ------- .../60ba92987c1e4914dfa7a0b9.md | 321 ------- .../60bad32219ebcb4a8810ac6a.md | 164 ---- .../61fd5a93fd62bb35968adeab.md | 123 --- .../61fd6343fb42013d99bcd7f3.md | 48 - .../61fd66c687e610436494c6f1.md | 52 -- .../61fd67a656743144844941cb.md | 78 -- .../61fd6ab779390f49148773bb.md | 65 -- .../61fd6b7c83dbf54a08cf0498.md | 79 -- .../61fd6cc9475a784b7776233e.md | 80 -- .../61fd70336ebb3e4f62ee81ba.md | 73 -- .../61fd719788899952e67692b9.md | 86 -- .../61fd71d596e8f253b9408b39.md | 86 -- .../61fd75ea7f663457612dba02.md | 125 --- .../61fd7648a7ba2e5882436831.md | 96 -- .../61fd778081276b59d59abad6.md | 134 --- .../61fd77f7ad2aeb5ae34d07d6.md | 138 --- .../61fd78621573aa5e8b512f5e.md | 142 --- .../61fd7a160ed17960e971f28b.md | 140 --- .../61fd7b3fcaa5406257abc5d1.md | 130 --- .../61fd8e491324ce717da97ffe.md | 119 --- .../61fd8fd08af43372f02952d0.md | 149 --- .../61fd9126aa72a474301fc49f.md | 131 --- .../61fd933ba685de776a94997e.md | 169 ---- .../61fd94056e0355785fbba4d3.md | 173 ---- .../61fd986ddbcbd47ba8fbc5ec.md | 177 ---- .../61fd990577d8227dd93fbeeb.md | 181 ---- .../61fd9a4ff2fc4481b9157bd7.md | 165 ---- .../61fd9ad665a4a282c8106be3.md | 198 ---- .../61fd9b7285bde783ad5b8aac.md | 208 ----- .../61fd9d9fbdfe078800317055.md | 158 ---- .../61fda307bde0b091cf7d884a.md | 168 ---- .../61fda339eadcfd92a6812bed.md | 171 ---- .../61fdac1e31692f9a9ad97295.md | 178 ---- .../61fdaea3999cb19d76ce717b.md | 173 ---- .../61fdaf9ff894b6a084ecdc1b.md | 175 ---- .../61fdafe6f07fd7a1c6785bc2.md | 183 ---- .../61fdb04d9939f0a26ca51c2b.md | 193 ---- .../620159cd5431aa34bc6a4c9c.md | 199 ---- .../62015a5da1c95c358f079ebb.md | 195 ---- .../62015cd2654a1139321a89d2.md | 197 ---- .../62015d8942384c3aed48329e.md | 213 ----- .../620167374bb8b4455cd11125.md | 225 ----- .../620174ed519dd7506c1a4b61.md | 213 ----- .../620175b3710a0951cfa86edf.md | 230 ----- .../6201782cc420715562f36271.md | 233 ----- .../620179bc0a6a2358c72b90ad.md | 225 ----- .../62017b6f47454059bf2d3bd1.md | 231 ----- .../62017f47c87be96457c49f46.md | 299 ------ .../62017fa5bbef406580ceb44f.md | 237 ----- .../62018243f046a368fab8ffb6.md | 239 ----- .../6201830cb0c74b69f1b41635.md | 243 ----- .../620186f4b6b8356d2def576b.md | 253 ------ .../62018ba1aa263770c953be66.md | 252 ----- .../62018c3e94434a71af1d5eaa.md | 262 ------ .../62018ec29b3ae674f40bef31.md | 256 ------ .../62019093fe30e278e797d2f6.md | 266 ------ .../620191707bc65579ddd3ce15.md | 271 ------ .../620192a767533a7ad19d96d7.md | 278 ------ .../6201995d9ab88e80f1989dce.md | 275 ------ .../620199c7a7a32c81d4db3410.md | 279 ------ .../6201a1a7af32c287bd6b8183.md | 285 ------ .../6201a1cc668a34888f5b2f52.md | 289 ------ .../6201a20d742f5c89736c8cfb.md | 303 ------ .../6201a42e39bf3b95b6a33bf3.md | 321 ------- .../6201a4adcc6414968b391592.md | 297 ------ .../6201a5258af7b398b030bfaf.md | 313 ------- .../6201a59be346d399c21d10b1.md | 591 ------------ .../612e6afc009b450a437940a1.md | 131 --- .../612e77aba7ca691f598feb02.md | 64 -- .../612e78af05201622d4bab8aa.md | 57 -- .../612e7d1c29fb872d6384379c.md | 60 -- .../612e804c54d5e7308d7ebe56.md | 60 -- .../612e813b3ba67633222cbe54.md | 95 -- .../612e8279827a28352ce83a72.md | 74 -- .../612e83ec2eca1e370f830511.md | 99 -- .../612e89562043183c86df287c.md | 77 -- .../612e89d254fe5d3df7d6693d.md | 83 -- .../612e8eebe3a6dc3fcc33a66f.md | 95 -- .../612e95ef2e4bdf41f69067f9.md | 81 -- .../612e96fc87fe8e44f69f7ec5.md | 102 --- .../612e98f3245c98475e49cfc6.md | 88 -- .../612e9a21381a1949327512e6.md | 89 -- .../612e9d142affc44a453655db.md | 117 --- .../612e9f1e7e5ccd4fa9ada0be.md | 103 --- .../612ea4c4993aba52ab4aa32e.md | 119 --- .../612ea97df5742154772f312e.md | 110 --- .../612ead8788d28655ef8db056.md | 112 --- .../612eaf56b7ba3257fdbfb0db.md | 144 --- .../612eb4893b63c75bb9251ddf.md | 129 --- .../612eb75153591b5e3b1ab65e.md | 115 --- .../612eb7ca8c275d5f89c73333.md | 116 --- .../612eb8e984cd73677a92b7e9.md | 117 --- .../612eb934f64a4d6890a45518.md | 118 --- .../612ebcba99bfa46a15370b11.md | 127 --- .../612ebe7fe6d07e6b76d1cae2.md | 133 --- .../612ebedec97e096c8bf64999.md | 136 --- .../612ebf9a210f2b6d77001e68.md | 139 --- .../612ec0490ae8626e9adf82e4.md | 133 --- .../612ec19d5268da7074941f84.md | 144 --- .../612ec29c84b9a6718b1f5cec.md | 288 ------ .../60a3e3396c7b40068ad6996a.md | 55 -- .../60a3e3396c7b40068ad6996b.md | 65 -- .../60a3e3396c7b40068ad6996c.md | 42 - .../60a3e3396c7b40068ad6996d.md | 41 - .../60a3e3396c7b40068ad6996e.md | 43 - .../60a3e3396c7b40068ad6996f.md | 47 - .../60a3e3396c7b40068ad69970.md | 59 -- .../60a3e3396c7b40068ad69971.md | 69 -- .../60a3e3396c7b40068ad69972.md | 54 -- .../60a3e3396c7b40068ad69973.md | 55 -- .../60a3e3396c7b40068ad69974.md | 67 -- .../60a3e3396c7b40068ad69975.md | 67 -- .../60a3e3396c7b40068ad69976.md | 64 -- .../60a3e3396c7b40068ad69977.md | 65 -- .../60a3e3396c7b40068ad69978.md | 66 -- .../60a3e3396c7b40068ad69979.md | 71 -- .../60a3e3396c7b40068ad6997a.md | 74 -- .../60a3e3396c7b40068ad6997b.md | 70 -- .../60a3e3396c7b40068ad6997c.md | 71 -- .../60a3e3396c7b40068ad6997d.md | 74 -- .../60a3e3396c7b40068ad6997e.md | 75 -- .../60a3e3396c7b40068ad6997f.md | 82 -- .../60a3e3396c7b40068ad69980.md | 84 -- .../60a3e3396c7b40068ad69981.md | 84 -- .../60a3e3396c7b40068ad69982.md | 79 -- .../60a3e3396c7b40068ad69983.md | 80 -- .../60a3e3396c7b40068ad69984.md | 81 -- .../60a3e3396c7b40068ad69986.md | 93 -- .../60a3e3396c7b40068ad69987.md | 94 -- .../60a3e3396c7b40068ad69988.md | 87 -- .../60a3e3396c7b40068ad69989.md | 88 -- .../60a3e3396c7b40068ad6998a.md | 89 -- .../60a3e3396c7b40068ad6998b.md | 93 -- .../60a3e3396c7b40068ad6998c.md | 92 -- .../60a3e3396c7b40068ad6998d.md | 116 --- .../60a3e3396c7b40068ad6998e.md | 95 -- .../60a3e3396c7b40068ad6998f.md | 98 -- .../60a3e3396c7b40068ad69990.md | 97 -- .../60a3e3396c7b40068ad69991.md | 98 -- .../60a3e3396c7b40068ad69992.md | 101 -- .../60a3e3396c7b40068ad69993.md | 100 -- .../60a3e3396c7b40068ad69994.md | 103 --- .../60a3e3396c7b40068ad69995.md | 104 --- .../60a3e3396c7b40068ad69996.md | 103 --- .../60a3e3396c7b40068ad69997.md | 180 ---- .../615f2abbe7d18d49a1e0e1c8.md | 55 -- .../615f2d4150fe0d4cbd0f2628.md | 60 -- .../615f34948891834dd77655a6.md | 61 -- .../615f34ecc1091b4fd5a8a484.md | 67 -- .../615f357957e370510f21ea16.md | 53 -- .../615f378014c2da526a109c81.md | 55 -- .../615f38279e5c3d53692ea441.md | 64 -- .../615f38cabc64e3556f98cc1a.md | 63 -- .../615f3949f58e12577dcefb00.md | 59 -- .../615f39d7da41b15851fa3fb9.md | 64 -- .../615f3b091162165948e1cb33.md | 70 -- .../615f3cafd794015aa9547a6d.md | 74 -- .../615f3d9e59db4b5b8e960762.md | 68 -- .../615f3e1b7233ee5c7595771f.md | 69 -- .../615f3e4af8008c5d494d3afe.md | 78 -- .../615f3ed16592445e57941aec.md | 94 -- .../615f405b89a7ec5f8e2d11f4.md | 89 -- .../615f40b01f680e608d360ed4.md | 82 -- .../615f4172e9eec061d6456221.md | 89 -- .../615f41c979787462e76dab90.md | 102 --- .../615f423cf65d5864132a0956.md | 84 -- .../615f42a021625f656101ef93.md | 104 --- .../615f4bfb9de4a16703b56eb6.md | 94 -- .../615f4ce9d877b668417c0c42.md | 104 --- .../615f4dde9d72e3694cb9ee3b.md | 105 --- .../615f4ec58334106a4170c2a8.md | 105 --- .../615f4f9e4a40566b776a8f38.md | 111 --- .../615f50473cc0196c6dd3892a.md | 99 -- .../615f51257a8a516d80b6c743.md | 113 --- .../615f51e4e5b24a6e80eccce1.md | 116 --- .../615f522dea4f776f64dc3e91.md | 113 --- .../615f5486b8fd4b71633f69b0.md | 138 --- .../615f575b50b91e72af079480.md | 119 --- .../615f5af373a68e744a3c5a76.md | 120 --- .../615f5c1cb7575c7551ed8a40.md | 116 --- .../615f5fd85d0062761f288364.md | 119 --- .../615f61338c8ca176d6445574.md | 126 --- .../615f666ac5edea782feb7e75.md | 127 --- .../615f671b6d1919792745aa5d.md | 153 ---- .../615f6823d0815b7a991f2a75.md | 139 --- .../615f6a7d4ba8037bc086c2c7.md | 127 --- .../615f6b2d164f81809efd9bdc.md | 165 ---- .../615f6cc778f7698258467596.md | 156 ---- .../615f6fddaac1e083502d3e6a.md | 130 --- .../615f70077a4ff98424236c1e.md | 138 --- .../615f72a872354a850d4f533e.md | 142 --- .../615f74a71f1e498619e38ee8.md | 149 --- .../615f7ad94380408d971d14f6.md | 161 ---- .../615f7bc680f7168ea01ebf99.md | 146 --- .../615f7c71eab8218f846e4503.md | 165 ---- .../615f7d489a581590d1350288.md | 146 --- .../615f7de4487b64919bb4aa5e.md | 178 ---- .../615f7e7281626a92bbd62da8.md | 179 ---- .../615f7ecb09de9a938ef94756.md | 180 ---- .../615f7fa959ab75948f96a0d6.md | 164 ---- .../615f808d85793195b0f53be9.md | 166 ---- .../615f829d07b18f96f6f6684b.md | 150 --- .../615f83ef928ec9982b785b6a.md | 156 ---- .../615f84f246e8ba98e3cd97be.md | 193 ---- .../615f887466db4ba14b5342cc.md | 176 ---- .../615f89e055040ba294719d2f.md | 175 ---- .../615f8bfe0f30a1a3c340356b.md | 202 ---- .../615f8f1223601fa546e93f31.md | 184 ---- .../615f905fbd1017a65ca224eb.md | 192 ---- .../615f94786869e1a7fec54375.md | 176 ---- .../615f951dff9317a900ef683f.md | 325 ------- 1029 files changed, 171789 deletions(-) delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c9d35015ae0ba0c250e8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d2b687a2cd17bac5730c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d3dc359b371b1a21d783.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d4bc9db3c81c51a09ab7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f23ea21477b76f3b80f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764fdda535587e1fefb3aa.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6343fb42013d99bcd7f3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd70336ebb3e4f62ee81ba.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md diff --git a/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json b/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json index 2950df77db6d6e..ec6643b1983887 100644 --- a/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json +++ b/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json @@ -17,365 +17,5 @@ [ "5f3313e74582ad9d063e3a38", "Step 2" - ], - [ - "5f331e55dfab7a896e53c3a1", - "Step 3" - ], - [ - "5f3326b143638ee1a09ff1e3", - "Step 4" - ], - [ - "5f33294a6af5e9188dbdb8f3", - "Step 5" - ], - [ - "5f332a88dc25a0fd25c7687a", - "Step 6" - ], - [ - "5f332b23c2045fb843337579", - "Step 7" - ], - [ - "5f33310c1851c6c4da013250", - "Step 8" - ], - [ - "5f344fc1520b6719f2e35605", - "Step 9" - ], - [ - "5f344fbc22624a2976425065", - "Step 10" - ], - [ - "5f344fad8bf01691e71a30eb", - "Step 11" - ], - [ - "5f344f9c805cd193c33d829c", - "Step 12" - ], - [ - "5f3477ae9675db8bb7655b30", - "Step 13" - ], - [ - "5f3477ae34c1239cafe128be", - "Step 14" - ], - [ - "5f3477aefa51bfc29327200b", - "Step 15" - ], - [ - "5f3477ae8466a9a3d2cc953c", - "Step 16" - ], - [ - "5f3477cb2e27333b1ab2b955", - "Step 17" - ], - [ - "5f3477cbcb6ba47918c1da92", - "Step 18" - ], - [ - "5f3477cb303c5cb61b43aa9b", - "Step 19" - ], - [ - "5f34a1fd611d003edeafd681", - "Step 20" - ], - [ - "5f356ed6cf6eab5f15f5cfe6", - "Step 21" - ], - [ - "5f356ed63c7807a4f1e6d054", - "Step 22" - ], - [ - "5f356ed60a5decd94ab66986", - "Step 23" - ], - [ - "5f356ed63e0fa262326eef05", - "Step 24" - ], - [ - "5f356ed60785e1f3e9850b6e", - "Step 25" - ], - [ - "5f356ed656a336993abd9f7c", - "Step 26" - ], - [ - "5f356ed6199b0cdef1d2be8f", - "Step 27" - ], - [ - "5f356ed69db0a491745e2bb6", - "Step 28" - ], - [ - "5f35e5c44359872a137bd98f", - "Step 29" - ], - [ - "5f35e5c4321f818cdc4bed30", - "Step 30" - ], - [ - "5f3c866daec9a49519871816", - "Step 31" - ], - [ - "5f3c866d5414453fc2d7b480", - "Step 32" - ], - [ - "5f3c866d28d7ad0de6470505", - "Step 33" - ], - [ - "5f769541be494f25449b292f", - "Step 34" - ], - [ - "5f76967fad478126d6552b0d", - "Step 35" - ], - [ - "5f769702e6e33127d14aa120", - "Step 36" - ], - [ - "5f3c866de7a5b784048f94b1", - "Step 37" - ], - [ - "5f3c866dbf362f99b9a0c6d0", - "Step 38" - ], - [ - "5f3c866d0fc037f7311b4ac8", - "Step 39" - ], - [ - "5f3c866dd0d0275f01d4d847", - "Step 40" - ], - [ - "5f3cade9fa77275d9f4efe62", - "Step 41" - ], - [ - "5f3cade94c6576e7f7b7953f", - "Step 42" - ], - [ - "5f3cade9993019e26313fa8e", - "Step 43" - ], - [ - "5f7691dafd882520797cd2f0", - "Step 44" - ], - [ - "5f7692f7c5b3ce22a57788b6", - "Step 45" - ], - [ - "5f47633757ae3469f2d33d2e", - "Step 46" - ], - [ - "5f3cade99dda4e6071a85dfd", - "Step 47" - ], - [ - "5f3ef6e0e0c3feaebcf647ad", - "Step 48" - ], - [ - "5f3ef6e0819d4f23ca7285e6", - "Step 49" - ], - [ - "5f716ad029ee4053c7027a7a", - "Step 50" - ], - [ - "5f7b87422a560036fd03ccff", - "Step 51" - ], - [ - "5f7b88d37b1f98386f04edc0", - "Step 52" - ], - [ - "5f716bee5838c354c728a7c5", - "Step 53" - ], - [ - "5f3ef6e0eaa7da26e3d34d78", - "Step 54" - ], - [ - "5f3ef6e050279c7a4a7101d3", - "Step 55" - ], - [ - "5f3ef6e04559b939080db057", - "Step 56" - ], - [ - "5f3ef6e03d719d5ac4738993", - "Step 57" - ], - [ - "5f3ef6e05473f91f948724ab", - "Step 58" - ], - [ - "5f3ef6e056bdde6ae6892ba2", - "Step 59" - ], - [ - "5f3ef6e0e9629bad967cd71e", - "Step 60" - ], - [ - "5f3ef6e06d34faac0447fc44", - "Step 61" - ], - [ - "5f3ef6e087d56ed3ffdc36be", - "Step 62" - ], - [ - "5f3ef6e0f8c230bdd2349716", - "Step 63" - ], - [ - "5f3ef6e07276f782bb46b93d", - "Step 64" - ], - [ - "5f3ef6e0a81099d9a697b550", - "Step 65" - ], - [ - "5f3ef6e0b431cc215bb16f55", - "Step 66" - ], - [ - "5f3ef6e01f288a026d709587", - "Step 67" - ], - [ - "5f3f26fa39591db45e5cd7a0", - "Step 68" - ], - [ - "5f459225127805351a6ad057", - "Step 69" - ], - [ - "5f459a7ceb8b5c446656d88b", - "Step 70" - ], - [ - "5f459cf202c2a3472fae6a9f", - "Step 71" - ], - [ - "5f459fd48bdc98491ca6d1a3", - "Step 72" - ], - [ - "5f45a05977e2fa49d9119437", - "Step 73" - ], - [ - "5f45a276c093334f0f6e9df4", - "Step 74" - ], - [ - "5f45a5a7c49a8251f0bdb527", - "Step 75" - ], - [ - "5f46fc57528aa1c4b5ea7c2e", - "Step 76" - ], - [ - "5f4701b942c824109626c3d8", - "Step 77" - ], - [ - "5f46ede1ff8fec5ba656b44c", - "Step 78" - ], - [ - "5f45a66d4a2b0453301e5a26", - "Step 79" - ], - [ - "5f45b0731d39e15d54df4dfc", - "Step 80" - ], - [ - "5f45b25e7ec2405f166b9de1", - "Step 81" - ], - [ - "5f45b3c93c027860d9298dbd", - "Step 82" - ], - [ - "5f45b45d099f3e621fbbb256", - "Step 83" - ], - [ - "5f45b4c81cea7763550e40df", - "Step 84" - ], - [ - "5f45b715301bbf667badc04a", - "Step 85" - ], - [ - "5f46e270702a8456a664f0df", - "Step 86" - ], - [ - "5f46e36e745ead58487aabf2", - "Step 87" - ], - [ - "5f46e7a4750dd05b5a673920", - "Step 88" - ], - [ - "5f46e8284aae155c83015dee", - "Step 89" - ], - [ - "5f475bb508746c16c9431d42", - "Step 90" - ], - [ - "5f475e1c7f71a61d913836c6", - "Step 91" - ], - [ - "5f47fe7e31980053a8d4403b", - "Step 92" ] ]} diff --git a/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json b/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json index 73932dfe0b19d6..d1313627499ee5 100644 --- a/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json +++ b/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json @@ -17,265 +17,5 @@ [ "5dc1798ff86c76b9248c6eb3", "Step 2" - ], - [ - "5dc17d3bf86c76b9248c6eb4", - "Step 3" - ], - [ - "5dc17dc8f86c76b9248c6eb5", - "Step 4" - ], - [ - "5dc2385ff86c76b9248c6eb7", - "Step 5" - ], - [ - "5dc23991f86c76b9248c6eb8", - "Step 6" - ], - [ - "5dc23f9bf86c76b9248c6eba", - "Step 7" - ], - [ - "5dc24073f86c76b9248c6ebb", - "Step 8" - ], - [ - "5dc24165f86c76b9248c6ebc", - "Step 9" - ], - [ - "5dc24614f86c76b9248c6ebd", - "Step 10" - ], - [ - "5ddbd81294d8ddc1510a8e56", - "Step 11" - ], - [ - "5dfa22d1b521be39a3de7be0", - "Step 12" - ], - [ - "5dfa2407b521be39a3de7be1", - "Step 13" - ], - [ - "5dfa30b9eacea3f48c6300ad", - "Step 14" - ], - [ - "5f07be6ef7412fbad0c5626b", - "Step 15" - ], - [ - "5f07c98cdb9413cbd4b16750", - "Step 16" - ], - [ - "5dfa3589eacea3f48c6300ae", - "Step 17" - ], - [ - "5dfa371beacea3f48c6300af", - "Step 18" - ], - [ - "5dfa37b9eacea3f48c6300b0", - "Step 19" - ], - [ - "5dfb5ecbeacea3f48c6300b1", - "Step 20" - ], - [ - "5dfb6250eacea3f48c6300b2", - "Step 21" - ], - [ - "5dfb655eeacea3f48c6300b3", - "Step 22" - ], - [ - "5dfb6a35eacea3f48c6300b4", - "Step 23" - ], - [ - "5ef9b03c81a63668521804d0", - "Step 24" - ], - [ - "5ef9b03c81a63668521804d1", - "Step 25" - ], - [ - "5ef9b03c81a63668521804d2", - "Step 26" - ], - [ - "5ef9b03c81a63668521804d3", - "Step 27" - ], - [ - "5efada803cbd2bbdab94e332", - "Step 28" - ], - [ - "5efae0543cbd2bbdab94e333", - "Step 29" - ], - [ - "5efae16e3cbd2bbdab94e334", - "Step 30" - ], - [ - "5ef9b03c81a63668521804d4", - "Step 31" - ], - [ - "5f07fb1579dc934717801375", - "Step 32" - ], - [ - "5ef9b03c81a63668521804d5", - "Step 33" - ], - [ - "5ef9b03c81a63668521804d6", - "Step 34" - ], - [ - "5ef9b03c81a63668521804d7", - "Step 35" - ], - [ - "5ef9b03c81a63668521804d8", - "Step 36" - ], - [ - "5efb23e70dc218d6c85f89b1", - "Step 37" - ], - [ - "7cf9b03d81a65668421804c3", - "Step 38" - ], - [ - "5ef9b03c81a63668521804d9", - "Step 39" - ], - [ - "5ef9b03c81a63668521804db", - "Step 40" - ], - [ - "5ef9b03c81a63668521804da", - "Step 41" - ], - [ - "5efb2c990dc218d6c85f89b2", - "Step 42" - ], - [ - "5ef9b03c81a63668521804dc", - "Step 43" - ], - [ - "5ef9b03c81a63668521804dd", - "Step 44" - ], - [ - "5ef9b03c81a63668521804df", - "Step 45" - ], - [ - "5f05a1d8e233dff4a68508d8", - "Step 46" - ], - [ - "5ef9b03c81a63668521804de", - "Step 47" - ], - [ - "5f1a80975fc4bcae0edb3497", - "Step 48" - ], - [ - "5ef9b03c81a63668521804e1", - "Step 49" - ], - [ - "5f0d48e7b435f13ab6550051", - "Step 50" - ], - [ - "5f0d4ab1b435f13ab6550052", - "Step 51" - ], - [ - "5f0d4d04b435f13ab6550053", - "Step 52" - ], - [ - "5ef9b03c81a63668521804e2", - "Step 53" - ], - [ - "5efc54138d6a74d05e68af76", - "Step 54" - ], - [ - "5efc4f528d6a74d05e68af74", - "Step 55" - ], - [ - "5efc518e8d6a74d05e68af75", - "Step 56" - ], - [ - "5ef9b03c81a63668521804e3", - "Step 57" - ], - [ - "5efc575c8d6a74d05e68af77", - "Step 58" - ], - [ - "5f1a89f1190aff21ae42105a", - "Step 59" - ], - [ - "5ef9b03c81a63668521804e5", - "Step 60" - ], - [ - "5ef9b03c81a63668521804e7", - "Step 61" - ], - [ - "5ef9b03c81a63668521804e8", - "Step 62" - ], - [ - "5ef9b03c81a63668521804e9", - "Step 63" - ], - [ - "5ef9b03c81a63668521804ea", - "Step 64" - ], - [ - "5ef9b03c81a63668521804eb", - "Step 65" - ], - [ - "5ef9b03c81a63668521804ec", - "Step 66" - ], - [ - "5ef9b03c81a63668521804ee", - "Step 67" ] ]} diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md deleted file mode 100644 index 381b65bbc3e28c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md +++ /dev/null @@ -1,436 +0,0 @@ ---- -id: 587d78af367417b2b2512b04 -title: Build a Product Landing Page -challengeType: 14 -forumTopicId: 301144 -dashedName: build-a-product-landing-page ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://product-landing-page.freecodecamp.rocks - -**User Stories:** - -1. Your product landing page should have a `header` element with a corresponding `id="header"` -1. You can see an image within the `header` element with a corresponding `id="header-img"` (A logo would make a good image here) -1. Within the `#header` element, you can see a `nav` element with a corresponding `id="nav-bar"` -1. You can see at least three clickable elements inside the `nav` element, each with the class `nav-link` -1. When you click a `.nav-link` button in the `nav` element, you are taken to the corresponding section of the landing page -1. You can watch an embedded product video with `id="video"` -1. Your landing page has a `form` element with a corresponding `id="form"` -1. Within the form, there is an `input` field with `id="email"` where you can enter an email address -1. The `#email` input field should have placeholder text to let users know what the field is for -1. The `#email` input field uses HTML5 validation to confirm that the entered text is an email address -1. Within the form, there is a submit `input` with a corresponding `id="submit"` -1. When you click the `#submit` element, the email is submitted to a static page (use this mock URL: `https://www.freecodecamp.com/email-submit`) -1. The navbar should always be at the top of the viewport -1. Your product landing page should have at least one media query -1. Your product landing page should utilize CSS flexbox at least once - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -You should have a `header` element with an `id` of `header`. - -```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') -``` - -You should have an `img` element with an `id` of `header-img`. - -```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') -``` - -Your `#header-img` should be a descendant of the `#header`. - -```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) -``` - -Your `#header-img` should have a `src` attribute. - -```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) -``` - -Your `#header-img`’s `src` value should be a valid URL (starts with `http`). - -```js -const el = document.getElementById('header-img') -assert(!!el && /^http/.test(el.src)) -``` - -You should have a `nav` element with an `id` of `nav-bar`. - -```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') -``` - -Your `#nav-bar` should be a descendant of the `#header`. - -```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) -``` - -You should have at least 3 `.nav-link` elements within the `#nav-bar`. - -```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) -``` - -Each `.nav-link` element should have an `href` attribute. - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (!el.href) assert(false) -}) -assert(els.length > 0) -``` - -Each `.nav-link` element should link to a corresponding element on the landing page (has an `href` with a value of another element's id. e.g. `#footer`). - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) -}) -assert(els.length > 0) -``` - -You should have a `video` or `iframe` element with an `id` of `video`. - -```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) -``` - -Your `#video` should have a `src` attribute. - -```js -let el = document.getElementById('video') -const sourceNode = el.children; -let sourceElement = null; -if (sourceNode.length) { - sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; -} -if (sourceElement) { - el = sourceElement; -} -assert(el.hasAttribute('src')); -``` - -You should have a `form` element with an `id` of `form`. - -```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') -``` - -You should have an `input` element with an `id` of `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#email` should be a descendant of the `#form`. - -```js -const els = document.querySelectorAll('#form #email') -assert(els.length > 0) -``` - -Your `#email` should have the `placeholder` attribute with placeholder text. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Your `#email` should use HTML5 validation by setting its `type` to `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -You should have an `input` element with an `id` of `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#submit` should be a descendant of the `#form`. - -```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) -``` - -Your `#submit` should have a `type` of `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Your `#form` should have an `action` attribute of `https://www.freecodecamp.com/email-submit`. - -```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') -``` - -Your `#email` should have a `name` attribute of `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') -``` - -Your `#nav-bar` should always be at the top of the viewport. - -```js -const el = document.getElementById('nav-bar') -const top1 = el?.offsetTop -const top2 = el?.offsetTop -assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15) -``` - -Your Product Landing Page should use at least one media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -Your Product Landing Page should use CSS Flexbox at least once. - -```js -const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() -const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) -const usesFlex = cssRules.find(rule => { - return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex' -}) -assert(usesFlex) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Product Landing Page - - - -
-

- Pokemon Daycare Service -

-
-

What we offer

-
-
- -
-
Guaranteed friendly and loving staff!
-
-
-
- -
-
- Comfortable environment for Pokemon to explore and play! -
-
-
-
- -
-
- Multiple membership plans to fit your lifestyle! -
-
-
-
-

Check us out!

- A sneak peek into our facility: -
- -
-
-

Membership Plans

-
-
- Basic Membership
-
    -
  • One Pokemon
    • -
  • Food and berries provided
    • -
- $9.99/month -
-
- Silver Membership
-
    -
  • Up to Three Pokemon
    • -
  • Food and berries provided
    • -
  • Grooming and accessories included
    • -
- $19.99/month -
-
- Gold Membership
-
    -
  • Up to six Pokemon!
    • -
  • Food and berries provided
    • -
  • Grooming and accessories included
    • -
  • Personal training for each Pokemon
    • -
  • Breeding and egg hatching
    • -
- $29.99/month -
-
-
-
-

Sign up for our newsletter!

- - -
- -
- - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - max-width: 750px; - margin: 50px auto; -} -input { - background-color: #92869c; -} -a:not(.nav-link) { - color: white; -} -#header-img { - max-height: 25px; -} -#nav-bar { - position: fixed; - width: 100%; - text-align: center; - top: 0%; - background-color: #92869c; -} -h1 { - text-align: center; -} -body { - text-align: center; -} -footer { - text-align: center; -} -#bullet { - max-height: 25px; -} -.flex-here { - display: flex; - justify-content: center; -} -.flex-left { - height: 25px; -} -.flex-mem { - display: flex; - justify-content: center; -} -.flex-mem-box { - background-color: #92869c; - border-color: black; - border-width: 5px; - border-style: solid; - margin: 10px; - padding: 10px; - color: black; -} -@media (max-width: 350px) { - #video { - width: 300; - height: 200; - } -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md deleted file mode 100644 index b079753f111634..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 587d78af367417b2b2512b03 -title: Build a Survey Form -challengeType: 14 -forumTopicId: 301145 -dashedName: build-a-survey-form ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://survey-form.freecodecamp.rocks - -**User Stories:** - -1. You should have a page title in an `h1` element with an `id` of `title` -1. You should have a short explanation in a `p` element with an `id` of `description` -1. You should have a `form` element with an `id` of `survey-form` -1. Inside the form element, you are **required** to enter your name in an `input` field that has an `id` of `name` and a `type` of `text` -1. Inside the form element, you are **required** to enter your email in an `input` field that has an `id` of `email` -1. If you enter an email that is not formatted correctly, you will see an HTML5 validation error -1. Inside the form, you can enter a number in an `input` field that has an `id` of `number` -1. If you enter non-numbers in the number input, you will see an HTML5 validation error -1. If you enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, you will see an HTML5 validation error -1. For the name, email, and number input fields, you can see corresponding `label` elements in the form, that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"` -1. For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field -1. Inside the form element, you should have a `select` dropdown element with an `id` of `dropdown` and at least two options to choose from -1. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the `name` attribute -1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a `value` attribute -1. Inside the form element, you are presented with a `textarea` for additional comments -1. Inside the form element, you are presented with a button with `id` of `submit` to submit all the inputs - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -You should have an `h1` element with an `id` of `title`. - -```js -const el = document.getElementById('title') -assert(!!el && el.tagName === 'H1') -``` - -Your `#title` should not be empty. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) -``` - -You should have a `p` element with an `id` of `description`. - -```js -const el = document.getElementById('description') -assert(!!el && el.tagName === 'P') -``` - -Your `#description` should not be empty. - -```js -const el = document.getElementById('description') -assert(!!el && el.innerText.length > 0) -``` - -You should have a `form` element with an `id` of `survey-form`. - -```js -const el = document.getElementById('survey-form') -assert(!!el && el.tagName === 'FORM') -``` - -You should have an `input` element with an `id` of `name`. - -```js -const el = document.getElementById('name') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#name` should have a `type` of `text`. - -```js -const el = document.getElementById('name') -assert(!!el && el.type === 'text') -``` - -Your `#name` should require input. - -```js -const el = document.getElementById('name') -assert(!!el && el.required) -``` - -Your `#name` should be a descedant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name') -assert(!!el) -``` - -You should have an `input` element with an `id` of `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#email` should have a `type` of `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -Your `#email` should require input. - -```js -const el = document.getElementById('email') -assert(!!el && el.required) -``` - -Your `#email` should be a descedant of `#survey-form` - -```js -const el = document.querySelector('#survey-form #email') -assert(!!el) -``` - -You should have an `input` element with an `id` of `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#number` should be a descedant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number') -assert(!!el) -``` - -Your `#number` should have a `type` of `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.type === 'number') -``` - -Your `#number` should have a `min` attribute with a numeric value. - -```js -const el = document.getElementById('number') -assert(!!el && el.min && isFinite(el.min)) -``` - -Your `#number` should have a `max` attribute with a numeric value. - -```js -const el = document.getElementById('number') -assert(!!el && el.max && isFinite(el.max)) -``` - -You should have a `label` element with an `id` of `name-label`. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.tagName === 'LABEL') -``` - -You should have a `label` element with an `id` of `email-label`. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.tagName === 'LABEL') -``` - -You should have a `label` element with an `id` of `number-label`. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Your `#name-label` should not be empty. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.innerText.length > 0) -``` - -Your `#email-label` should not be empty. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.innerText.length > 0) -``` - -Your `#number-label` should not be empty. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.innerText.length > 0) -``` - -Your `#name-label` should be a descedant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name-label') -assert(!!el) -``` - -Your `#email-label` should be a descedant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email-label') -assert(!!el) -``` - -Your `#number-label` should be a descedant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number-label') -assert(!!el) -``` - -Your `#name` should have a `placeholder` attribute and value. - -```js -const el = document.getElementById('name') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Your `#email` should have a `placeholder` attribute and value. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Your `#number` should have a `placeholder` attribute and value. - -```js -const el = document.getElementById('number') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -You should have a `select` field with an `id` of `dropdown`. - -```js -const el = document.getElementById('dropdown') -assert(!!el && el.tagName === 'SELECT') -``` - -Your `#dropdown` should have at least two selectable (not disabled) `option` elements. - -```js -const els = document.querySelectorAll('#dropdown option:not([disabled])') -assert(els.length >= 2) -``` - -Your `#dropdown` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #dropdown') -assert(!!el) -``` - -You should have at least two `input` elements with a `type` of `radio` (radio buttons). - -```js -const els = document.querySelectorAll('input[type="radio"]') -assert(els.length >= 2) -``` - -You should have at least two radio buttons that are descendants of `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="radio"]') -assert(els.length >= 2) -``` - -All your radio buttons should have a `value` attribute and value. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -All your radio buttons should have a `name` attribute and value. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') -assert(els1.length > 0 && els2.length === 0) -``` - -Every radio button group should have at least 2 radio buttons. - -```js -const radioButtons = document.querySelectorAll('input[type="radio"]'); -const groups = {} - -if (radioButtons) { - radioButtons.forEach(el => { - if (!groups[el.name]) groups[el.name] = [] - groups[el.name].push(el) - }) -} - -const groupKeys = Object.keys(groups) - -groupKeys.forEach(key => { - if (groups[key].length < 2) assert(false) -}) - -assert(groupKeys.length > 0) -``` - -You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); -assert(els.length >= 2) -``` - -All your checkboxes inside `#survey-form` should have a `value` attribute and value. - -```js -const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') -const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -You should have at least one `textarea` element that is a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form textarea') -assert(!!el) -``` - -You should have an `input` or `button` element with an `id` of `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) -``` - -Your `#submit` should have a `type` of `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Your `#submit` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #submit') -assert(!!el) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Survey Form - - -

Survey Form

-

The card below was built as a sample survey form for freeCodeCamp.

-
-

Join the Togepi Fan Club!

-

- Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -

-
- - - - -

Who is your favourite Pokemon?

- - - -

Which communications do you want to receive?

- - - -

Any other information you would like to share?

- -

- Please note: This form is a proof of concept. Submitting the form - will not actually transmit your data. -

- -
-
- - - -``` - -```css -main { - text-align: center; - background-color: #92869c; - background-blend-mode: lighten; - max-width: 500px; - margin: 20px auto; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); - color: black; -} -body { - text-align: center; - background: #3a3240; - color: white; -} -input, textarea, select, button { - background: #3a3240; - color: white; -} -a { - color: white; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md deleted file mode 100644 index def1dfbf48bf84..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md +++ /dev/null @@ -1,529 +0,0 @@ ---- -id: 587d78b0367417b2b2512b05 -title: Build a Technical Documentation Page -challengeType: 14 -forumTopicId: 301146 -dashedName: build-a-technical-documentation-page ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://technical-documentation-page.freecodecamp.rocks - -**User Stories:** - -1. You can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation) -1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five -1. The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section. -1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`) -1. The `.main-section` elements should contain at least ten `p` elements total (not each) -1. The `.main-section` elements should contain at least five `code` elements total (not each) -1. The `.main-section` elements should contain at least five `li` items total (not each) -1. You can see a `nav` element with a corresponding `id="navbar"` -1. The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation -1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section` -1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar -1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world") -1. When you click on a navbar element, the page should navigate to the corresponding section of the `#main-doc` element (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header) -1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user -1. Your technical documentation should use at least one media query - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -You should have a `main` element with an `id` of `main-doc`. - -```js -const el = document.getElementById('main-doc') -assert(!!el) -``` - -You should have at least five `section` elements with a class of `main-section`. - -```js -const els = document.querySelectorAll('#main-doc section') -assert(els.length >= 5) -``` - -All of your `.main-section` elements should be `section` elements. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (el.tagName !== 'SECTION') assert(false) -}) -assert(els.length > 0) -``` - -You should have at least five `.main-section` elements that are descendants of `#main-doc`. - -```js -const els = document.querySelectorAll('#main-doc .main-section') -assert(els.length >= 5) -``` - -The first child of each `.main-section` should be a `header` element. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if(el.firstElementChild?.tagName !== 'HEADER') assert(false) -}) -assert(els.length > 0) -``` - -None of your `header` elements should be empty. - -```js -const els = document.querySelectorAll('header') -els.forEach(el => { - if (el.innerText?.length <= 0) assert(false) -}) -assert(els.length > 0) -``` - -All of your `.main-section` elements should have an `id`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (!el.id || el.id === '') assert(false) -}) -assert(els.length > 0) -``` - -Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id's. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') - if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) -}) -assert(els.length > 0) -``` - -You should have at least 10 `p` elements (total) within your `.main-section` elements. - -```js -const els = document.querySelectorAll('.main-section p') -assert(els.length >= 10) -``` - -You should have at least five `code` elements that are descendants of `.main-section` elements. - -```js -const els = document.querySelectorAll('.main-section code') -assert(els.length >= 5) -``` - -You should have at least five `li` elements that are descendants of `.main-section` elements. - -```js -const els = document.querySelectorAll('.main-section li') -assert(els.length >= 5) -``` - -You should have a `nav` element with an `id` of `navbar`. - -```js -const el = document.getElementById('navbar') -assert(!!el && el.tagName === 'NAV') -``` - -Your `#navbar` should have exactly one `header` element within it. - -```js -const els = document.querySelectorAll('#navbar header') -assert(els.length === 1) -``` - -You should have at least one `a` element with a class of `nav-link`. - -```js -const els = document.querySelectorAll('a.nav-link') -assert(els.length >= 1) -``` - -All of your `.nav-link` elements should be anchor (`a`) elements. - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (el.tagName !== 'A') assert(false) -}) -assert(els.length > 0) -``` - -All of your `.nav-link` elements should be in the `#navbar`. - -```js -const els1 = document.querySelectorAll('.nav-link') -const els2 = document.querySelectorAll('#navbar .nav-link') -assert(els2.length > 0 && els1.length === els2.length) -``` - -You should have the same number of `.nav-link` and `.main-section` elements. - -```js -const els1 = document.querySelectorAll('.main-section') -const els2 = document.querySelectorAll('.nav-link') -assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) -``` - -The `header` element in the `#navbar` should come before any link (`a`) elements also in the `#navbar`. - -```js -const navLinks = document.querySelectorAll('#navbar a.nav-link'); -const header = document.querySelector('#navbar header'); -navLinks.forEach((navLink) => { - if ( - ( - header.compareDocumentPosition(navLink) & - Node.DOCUMENT_POSITION_PRECEDING - ) - ) assert(false) -}); -assert(!!header) -``` - -Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world"). - -```js -const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => - el.firstElementChild?.innerText?.trim().toUpperCase() -) -const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => - el.innerText?.trim().toUpperCase() -) -const remainder = headerText.filter(str => linkText.indexOf(str) === -1) -assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) -``` - -Each `.nav-link` should have an `href` attribute that links to its corresponding `.main-section` (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id). - -```js -const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) -const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) -const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) -assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) -``` - -Your `#navbar` should always be on the left edge of the window. - -```js -const el = document.getElementById('navbar') -const left1 = el?.offsetLeft -const left2 = el?.offsetLeft -assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) -``` - -Your Technical Documentation project should use at least one media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Technical Documentation Page - - - -
-
-
Introduction
-

- Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -

-
-
-
Definitions
-

- To start with, let's define some of the more common terms used in - algebra: -

-
    -
  • - Variable: A variable is an unknown value, usually represented - by a letter. -
    • -
  • - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. -
    • -
  • - Equation: An equation is a mathematical argument in which two - expressions result in the same value. -
    • -
-
-
-
Examples
-

- Sometimes it is easier to understand the definitions when you have a - physical example to look at. Here is an example of the above terms.

- x + 5 = 12

- In this above example, we have: -

-
    -
  • Variable: The variable in the example is "x".
    • -
  • - Expression: There are two expressions in this example. They - are "x+5" and "12". -
    • -
  • - Equation: The entire example, "x+5=12", is an equation. -
    • -
-
-
-
Solving Equations
-

- The primary use for algebra is to determine an unknown value, the - "variable", with the information provided. Continuing to use our - example from above, we can find the value of the variable "x".

- x + 5 = 12

- In an equation, both sides result in the same value. So you can - manipulate the two expressions however you need, as long as you - perform the same operation (or change) to each side. You do this - because the goal when solving an equation is to - get the variable into its own expression, or by itself on one side - of the = sign.
For this example, we want to remove the "+5" so the "x" is - alone. To do this, we can subtract 5, because subtraction is - the opposite operation to addition. But remember, we have to perform - the same operation to both sides of the equation. Now our equation - looks like this.

- x + 5 - 5 = 12 - 5

- The equation looks like a mess right now, because we haven't completed - the operations. We can simplify this equation to make it easier - to read by performing the operations "5-5" and "12-5". The result - is:

- x = 7

- We now have our solution to this equation! -

-
-
-
Solving Equations II
-

- Let us look at a slightly more challenging equation.

- 3x + 4 = 13

- Again we can start with subtraction. In this case, we want to subtract - 4 from each side of the equation. We will also go ahead and simplify - with each step. So now we have:

- 3x = 9

- "3x" translates to "3*x", where the "*" symbol indicates - multiplication. We use the "*" to avoid confusion, as the "x" is now a - variable instead of a multiplication symbol. The opposite operation - for multiplication is division, so we need to - divide each expression by 3.

- x = 3

- And now we have our solution! -

-
-
-
Solving Equations III
-

- Now we are getting in to more complex operations. Here is another - equation for us to look at:

- x^2 - 8 = 8

- Our very first step will be to add 8 to each side. This is - different from our previous examples, where we had to subtract. But - remember, our goal is to get the variable alone by performing opposite - operations.

- x^2 = 16

- But what does the "^2" mean? The "^" symbol is used to denote - exponents in situations where superscript is not available. When - superscript is available, you would see it as x2. - For the sake of this project, however, we will use the "^" symbol.
- An exponent tells you how many times the base (in our case, "x") is - multiplied by itself. So, "x^2" would be the same as "x*x". Now the - opposite function of multiplication is division, but we would have to - divide both sides by "x". We do not want to do this, as that - would put an "x" on the other side of the equation. So instead, we - need to use the root operation! For an exponent of "2", we call this - the "square root" and denote it with "√". Our equation is now: -

- x = √9

- Performing a root operation by hand can be a tedious process, so we - recommend using a calculator when necessary. However, we are lucky in - that "9" is a - perfect square, so we do not need to calculate anything. Instead, we find our - answer to be:

- x = 3 -

-
-
-
System of Equations
-

- As you explore your algebra studies further, you may start to run - across equations with more than one variable. The first such equations - will likely look like:

- y = 3x

- An equation like this does not have one single solution. - Rather, there are a series of values for which the equation is true. - For example, if "x=3" and "y=9", the equation is true. These equations - are usually used to plot a graph.
- Getting more complicated, though, you may be given a pair of - equations. This is called a "system of equations", and CAN be solved. - Let's look at how we do this! Consider the following system of - equations:

- y = 3x | y - 6 = x - A system of equations IS solvable, but it is a multi-step process. To - get started, we need to chose a variable we are solving for. Let's - solve for "x" first. From the second equation, we know that "x" equals - "y - 6", but we cannot simplify that further because we do not have a - value for "y". Except, thanks to the system of equations, we DO have a - value for "y". We know that "y" equals "3x". So, looking at our second - equation, we can replace "y" with "3x" because they have the same - value. We then get:

- 3x - 6 = x

- Now we can solve for "x"! We start by adding 6 to each side.

- 3x = x + 6

- We still need to get "x" by itself, so we subtract "x" from both sides - and get:

- 2x = 6

- If this confuses you, remember that "3x" is the same as "x+x+x". - Subtract an "x" from that and you get "x+x", or "2x". Now we divide - both sides by 2 and have our value for x!

- x = 3

- However, our work is not done yet. We still need to find the value for - "y". Let's go back to our first equation:

- y = 3x

- We have a value for "x" now, so let's see what happens if we put that - value in.

- y = 3*3

- We perform the multiplication and discover that "y=9"! Our solution to - this system of equations then is:

- x = 3 and y = 9

-

-
-
-
Try it Yourself!
-

Coming Soon!

-

Keep an eye out for new additions!

-
-
-
More Information
-

Check out the following links for more information!

- -
-
- - - -``` - -```css -* { - background-color: #3a3240; -} -a { - color: #92869c; -} -a:hover { - background-color: #92869c; - color: #3a3240; -} -#navbar { - border-style: solid; - border-width: 5px; - border-color: #92869c; - height: 100%; - top: -5px; - left: -5px; - padding: 5px; - text-align: center; - color: #92869c -} -@media (min-width: 480px) { - #navbar { - position: fixed; - } -} -main { - margin-left: 220px; - color: #92869c -} -header { - font-size: 20pt; -} -code { - background-color: #92869c; - border-style: dashed; - border-width: 2px; - border-color: #92869c; - padding: 5px; - color: black; -} -footer { - text-align: center; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md deleted file mode 100644 index e6ba533c7d1d6f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: bd7158d8c442eddfaeb5bd18 -title: Build a Tribute Page -challengeType: 14 -forumTopicId: 301147 -dashedName: build-a-tribute-page ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://tribute-page.freecodecamp.rocks - -**User Stories:** - -1. Your tribute page should have an element with a corresponding `id="main"`, which contains all other elements -1. You should see an element with an `id` of `title`, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug") -1. You should see either a `figure` or a `div` element with an `id` of `img-div` -1. Within the `#img-div` element, you should see an `img` element with a corresponding `id="image"` -1. Within the `#img-div` element, you should see an element with a corresponding `id="img-caption"` that contains textual content describing the image shown in `#img-div` -1. You should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page -1. You should see an a element with a corresponding `id="tribute-link"`, which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of `target` and set it to `_blank` in order for your link to open in a new tab -1. Your `#image` should use `max-width` and `height` properties to resize responsively, relative to the width of its parent element, without exceeding its original size -1. Your `img` element should be centered within its parent element - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -You should have a `main` element with an `id` of `main`. - -```js -const el = document.getElementById('main') -assert(!!el && el.tagName === 'MAIN') -``` - -Your `#img-div`, `#image`, `#img-caption`, `#tribute-info`, and `#tribute-link` should all be descendants of `#main`. - -```js -const el1 = document.querySelector('#main #img-div') -const el2 = document.querySelector('#main #image') -const el3 = document.querySelector('#main #img-caption') -const el4 = document.querySelector('#main #tribute-info') -const el5 = document.querySelector('#main #tribute-link') -assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) -``` - -You should have an element with an `id` of `title`. - -```js -const el = document.getElementById('title') -assert(!!el) -``` - -Your `#title` should not be empty. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) - -``` - -You should have a `figure` or `div` element with an `id` of `img-div`. - -```js -const el = document.getElementById('img-div') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) -``` - -You should have an `img` element with an `id` of `image`. - -```js -const el = document.getElementById('image') -assert(!!el && el.tagName === 'IMG') -``` - -Your `#image` should be a descendant of `#img-div`. - -```js -const el = document.querySelector('#img-div #image') -assert(!!el) -``` - -You should have a `figcaption` or `div` element with an `id` of `img-caption`. - -```js -const el = document.getElementById('img-caption') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) -``` - -Your `#img-caption` should be a descendant of `#img-div`. - -```js -const el = document.querySelector('#img-div #img-caption') -assert(!!el) -``` - -Your `#img-caption` should not be empty. - -```js -const el = document.getElementById('img-caption') -assert(!!el && el.innerText.length > 0) -``` - -You should have an element with an `id` of `tribute-info`. - -```js -const el = document.getElementById('tribute-info') -assert(!!el) -``` - -Your `#tribute-info` should not be empty. - -```js -const el = document.getElementById('tribute-info') -assert(!!el && el.innerText.length > 0) -``` - -You should have an `a` element with an `id` of `tribute-link`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.tagName === 'A') -``` - -Your `#tribute-link` should have an `href` attribute and value. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && !!el.href && el.href.length > 0) -``` - -Your `#tribute-link` should have a `target` attribute set to `_blank`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.target === '_blank') -``` - -Your `img` element should have a `display` of `block`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('display') -assert(style === 'block') -``` - -Your `#image` should have a `max-width` of `100%`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('max-width') -assert(style === '100%') -``` - -Your `#image` should have a `height` of `auto`. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const oldDisplayValue = imgStyle.getPropertyValue('display'); -const oldDisplayPriority = imgStyle.getPropertyPriority('display'); -img?.style.setProperty('display', 'none', 'important'); -const heightValue = imgStyle?.getPropertyValue('height') -img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); -assert(heightValue === 'auto') -``` - -Your `#image` should be centered within its parent. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'), - imgParent = img?.parentElement, - imgLeft = img?.getBoundingClientRect().left, - imgRight = img?.getBoundingClientRect().right, - parentLeft = imgParent?.getBoundingClientRect().left, - parentRight = imgParent?.getBoundingClientRect().right, - leftMargin = imgLeft - parentLeft, - rightMargin = parentRight - imgRight; -assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - - - Tribute Page - - -

Tribute Page

-

The below card was designed as a tribute page for freeCodeCamp.

-
-
- An image of Togepi -
Togepi, happy as always.
-
-

Togepi

-
-
-

- Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -

-

- Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -

-
-

Battle Information

-
    -
  • Type: Fairy
    • -
  • Evolutions: Togepi -> Togetic -> Togekiss
    • -
  • Moves: Growl, Pound, Sweet Kiss, Charm
    • -
  • Weaknesses: Poison, Steel
    • -
  • Resistances: Dragon
    • -
-

- Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -

-
-
- - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - background-color: #92869c; - font-family: Lobster; - max-width: 500px; - margin: 20px auto; - color: black; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); -} -h2 { - text-align: center; - font-size: 20pt; - font-family: Pacifico; -} -body { - text-align: center; - font-size: 12pt; -} -footer { - text-align: center; - font-size: 10pt; -} -.border { - border-color: black; - border-width: 5px; - border-style: solid; -} -#image { - height: auto; - display: block; - margin: auto; - max-width: 100%; - border-radius: 50%; -} -#img-caption { - font-size: 10pt; -} -a:not(#tribute-link) { - color: white; -} -hr { - border-color: black; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md deleted file mode 100644 index f4cc9650102c14..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 613297a923965e0703b64796 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -You may be familiar with the `meta` element already; it is used to specify information about the page, such as the title, description, keywords, and author. - -Give your page a `meta` element with an appropriate `charset` value. - -The `charset` attribute specifies the character encoding of the page, and, nowadays, `UTF-8` is the only encoding supported by most browsers. - -# --hints-- - -You should create a `meta` element within the `head` element. - -```js -assert.exists(document.querySelector('head > meta')); -``` - -You should give the `meta` tag a `charset` of `UTF-8`. - -```js -assert.equal(document.querySelector('head > meta')?.getAttribute('charset'), 'UTF-8'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - ---fcc-editable-region-- - - - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md deleted file mode 100644 index 07519ab2fc413a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 61329b210dac0b08047fd6ab -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Continuing with the `meta` elements, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimization). - -Add a `viewport` definition with a `content` attribute detailing the `width` and `initial-scale` of the page. - -# --hints-- - -You should create another `meta` element in the `head`. - -```js -assert.equal(document.querySelectorAll('head > meta')?.length, 2); -``` - -You should give the `meta` a `name` attribute of `viewport`. - -```js -assert.equal(document.querySelectorAll('head > meta[name="viewport"]')?.length, 1); -``` - -You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`. - -```js -assert.equal(document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1.0"]')?.length || document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1"]')?.length, 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - - ---fcc-editable-region-- - - - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md deleted file mode 100644 index 4daa0898cb0498..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 61329d52e5010e08d9b9d66b -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Another important `meta` element for accessibility and SEO is the `description` definition. The value of the `content` attribute is used by search engines to provide a description of your page. - -Add a `meta` element with the `name` attribute set to `description`, and give it a useful `content` attribute. - -# --hints-- - -You should add a new `meta` element to the `head`. - -```js -assert.equal(document.querySelectorAll('meta').length, 3); -``` - -You should give the `meta` a `name` attribute of `description`. - -```js -assert.exists(document.querySelector('meta[name="description"]')); -``` - -You should give the `meta` a `content` attribute. - -```js -assert.notEmpty(document.querySelector('meta[name="description"]')?.content); -``` - -The `content` attribute value should not be more than 165 characters. _This is Google's maximum description length._ - -```js -assert.isAtMost(document.querySelector('meta[name="description"]')?.content?.length, 165); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - - - ---fcc-editable-region-- - - - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md deleted file mode 100644 index eeff5f8dc54da7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 6133acc353338c0bba9cb553 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Lastly in the `head`, the `title` element is useful for screen readers to understand the content of a page. Furthermore, it is an important part of _SEO_. - -Give your page a `title` that is descriptive and concise. - -# --hints-- - -You should add a `title` element to the `head`. - -```js -assert.exists(document.querySelector('head > title')); -``` - -You should not make the `title` longer than 60 characters. - -```js -assert.isAtMost(document.querySelector('head > title')?.textContent?.length, 60); -``` - -Try being more descriptive with your `title` element. _Hint: At least 15 characters_ - -```js -assert.isAtLeast(document.querySelector('head > title')?.textContent?.length, 15); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - - - - ---fcc-editable-region-- - - - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md deleted file mode 100644 index 8a3e150218f14e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 6133d11ef548f51f876149e3 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Navigation is a core part of accessibility, and screen readers rely on you to provide the structure of your page. This is accomplished with semantic HTML elements. - -Add a `header` and a `main` element to your page. - -The `header` element will be used to introduce the page, as well as provide a navigation menu. - -The `main` element will contain the core content of your page. - -# --hints-- - -You should add a `header` element to the `body`. - -```js -assert.exists(document.querySelector('body > header')); -``` - -You should add a `main` element to the `body`. - -```js -assert.exists(document.querySelector('body > main')); -``` - -The `header` element should come before the `main` element. - -```js -assert.exists(document.querySelector('header + main')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - ---fcc-editable-region-- - - - ---fcc-editable-region-- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md deleted file mode 100644 index 3b746df024fb53..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 613e2546d0594208229ada50 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Within the `header`, provide context about the page by nesting one `img`, `h1`, and `nav` element. - -The `img` should point to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`, and have an `id` of `logo`. - -The `h1` should contain the text `HTML/CSS Quiz`. - -# --hints-- - -You should add an `img` element to the `header` element. - -```js -assert.exists(document.querySelector('header > img')); -``` - -You should add an `h1` element to the `header` element. - -```js -assert.exists(document.querySelector('header > h1')); -``` - -You should add a `nav` element to the `header` element. - -```js -assert.exists(document.querySelector('header > nav')); -``` - -You should place the `img`, `h1`, and `nav` elements in that order. - -```js -assert.exists(document.querySelector('img + h1 + nav')); -``` - -You should give the `img` element a `src` attribute of `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. - -```js -assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg'); -``` - -You should give the `img` element an `id` attribute of `logo`. - -```js -assert.equal(document.querySelector('img')?.id, 'logo'); -``` - -You should give the `h1` element the text `HTML/CSS Quiz`. - -```js -assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - ---fcc-editable-region-- -
- -
---fcc-editable-region-- -
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md deleted file mode 100644 index 8ed0221db82abf..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 613e275749ebd008e74bb62e -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -A useful property of an _SVG_ (scalable vector graphics) is that it contains a `path` attribute which allows the image to be scaled without affecting the resolution of the resultant image. - -Currently, the `img` is assuming it's default size, which is too large. Correctly, scale the image using it's `id` as a selector, and setting the `width` to `max(100px, 18vw)`. - -# --hints-- - -You should use the `#logo` selector to target the `img` element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); -``` - -You should give the `img` a `width` of `max(100px, 18vw)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md deleted file mode 100644 index e686ed21df1bd8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 6140827cff96e906bd38fc2b -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -As described in the [freeCodeCamp Style Guide](https://design-style-guide.freecodecamp.org/), the logo should retain an aspect ratio of `35:4`, and have padding around the text. - -First, change the `background-color` to `#0a0a23` so you can see the logo. Then, use the `aspect-ratio` property to set the desired aspect ratio. Finally, add a `padding` of `0.4rem` all around. - -# --hints-- - -You should give `#logo` a `background-color` of `#0a0a23`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)'); -``` - -You should use the `aspect-ratio` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio); -``` - -You should not use the `height` property. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height); -``` - -You should not change the `width` property. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); -``` - -You should give the `img` an `aspect-ratio` of `35 / 4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4'); -``` - -You should give the `img` a `padding` of `0.4rem`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - ---fcc-editable-region-- -#logo { - width: max(100px, 18vw); - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md deleted file mode 100644 index 20e02d934128fb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 6140883f74224508174794c0 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Make the `header` take up the full width of its parent container, set it's `height` to `50px`, and set the `background-color` to `#1b1b32`. Then, set the `display` to use _Flexbox_. - -# --hints-- - -You should use the `header` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('header')); -``` - -You should give the `header` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%'); -``` - -You should give the `header` a `height` of `50px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px'); -``` - -You should give the `header` a `background-color` of `#1b1b32`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)'); -``` - -You should give the `header` a `display` of `flex`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md deleted file mode 100644 index e86102a346de30..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: 61408e4ae3e35d08feb260eb -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Change the `h1` font color to `#f1be32`, and set the font size to `min(5vw, 1.2em)`. - -# --hints-- - -You should use the `h1` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('h1')); -``` - -You should give the `h1` a `color` of `#f1be32`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)'); -``` - -You should give the `h1` a `font-size` of `min(5vw, 1.2em)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md deleted file mode 100644 index bcb0886e660ebc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 61408f155e798909b6908712 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -To enable navigation on the page, add an unordered list with the following three list items: - -- `INFO` -- `HTML` -- `CSS` - -The list items text should be wrapped in anchor tags. - -# --hints-- - -You should nest one `ul` element inside the `nav`. - -```js -assert.equal(document.querySelectorAll('nav > ul')?.length, 1); -``` - -You should nest three `li` elements inside the `ul` element. - -```js -assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3); -``` - -You should nest one `a` element inside each `li` element. - -```js -assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3); -``` - -You should give the first `a` element the text `INFO`. - -```js -assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO'); -``` - -You should give the second `a` element the text `HTML`. - -```js -assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML'); -``` - -You should give the third `a` element the text `CSS`. - -```js -assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md deleted file mode 100644 index 6eea8da86db118..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 614090d5a22b6f0a5a6b464c -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - - - -# --description-- - -Target unordered list elements within `nav` elements, and use _Flexbox_ to evenly space the children. - -# --hints-- - -You should use the `nav > ul` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul')); -``` - -You should give the `nav > ul` elements a `display` of `flex`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex'); -``` - -You should give the `nav > ul` elements a `justify-content` of `space-evenly`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.justifyContent, 'space-evenly'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md deleted file mode 100644 index 826b553df92bae..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 6141fabd6f75610664e908fd -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -As this is a quiz, you will need a form for users to submit answers. You can semantically separate the content within the form using `section` elements. - -Within the `main` element, create a form with three nested `section` elements. Then, make the form submit to `https://freecodecamp.org/practice-project/accessibility-quiz`, using the correct method. - -# --hints-- - -You should nest a `form` element within your `main` element. - -```js -assert.exists(document.querySelector('main > form')); -``` - -You should nest three `section` elements within your `form` element. - -```js -assert.equal(document.querySelectorAll('main > form > section')?.length, 3); -``` - -You should give the `form` element an `action` attribute. - -```js -assert.notEmpty(document.querySelector('main > form')?.action); -``` - -You should give the `action` attribute a value of `https://freecodecamp.org/practice-project/accessibility-quiz`. - -```js -assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz'); -``` - -You should give the `form` element a `method` attribute. - -```js -assert.notEmpty(document.querySelector('main > form')?.method); -``` - -You should give the `form` element a `method` attribute with a value of `post`. - -```js -assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
---fcc-editable-region-- -
- -
---fcc-editable-region-- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md deleted file mode 100644 index 78a09ebf68a2f2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -id: 6141fed65b61320743da5894 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -To increase the page accessibility, the `role` attribute can be used to indicate the purpose behind an element on the page to assistive technologies. The `role` attribute is a part of the _Web Accessibility Initiative_ (WAI), and accepts preset values. - -Give each of the `section` elements the `region` role. - -# --hints-- - -You should give the first `section` element the `region` role. - -```js -assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region'); -``` - -You should give the second `section` element the `region` role. - -```js -assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region'); -``` - -You should give the third `section` element the `region` role. - -```js -assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
---fcc-editable-region-- -
-
-
-
-
---fcc-editable-region-- -
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md deleted file mode 100644 index 2987ac353a5ded..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -id: 614202874ca576084fca625f -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Every `region` role requires a visible label, which should be referenced by the `aria-labelledby` attribute. - -To the `section` elements, give the following `aria-labelledby` attributes: - -- `student-info` -- `html-questions` -- `css-questions` - -Then, within each `section` element, nest one `h2` element with an `id` matching the corresponding `aria-labelledby` attribute. Give each `h2` suitable text content. - -# --hints-- - -You should give the first `section` element an `aria-labelledby` attribute of `student-info`. - -```js -assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info'); -``` - -You should give the second `section` element an `aria-labelledby` attribute of `html-questions`. - -```js -assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions'); -``` - -You should give the third `section` element an `aria-labelledby` attribute of `css-questions`. - -```js -assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions'); -``` - -You should nest one `h2` element within the first `section` element. - -```js -assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1); -``` - -You should nest one `h2` element within the second `section` element. - -```js -assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1); -``` - -You should nest one `h2` element within the third `section` element. - -```js -assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1); -``` - -You should give the first `h2` element an `id` attribute of `student-info`. - -```js -assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info'); -``` - -You should give the second `h2` element an `id` attribute of `html-questions`. - -```js -assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions'); -``` - -You should give the third `h2` element an `id` attribute of `css-questions`. - -```js -assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions'); -``` - -You should give the first `h2` element suitable text content. _Hint: I would have chosen `Student Info`_ - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1); -``` - -You should give the second `h2` element suitable text content. _Hint: I would have chosen `HTML`_ - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1); -``` - -You should give the third `h2` element suitable text content. _Hint: I would have chosen `CSS`_ - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
---fcc-editable-region-- -
-
-
-
-
---fcc-editable-region-- -
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md deleted file mode 100644 index 7e05eb381033c8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 614206033d366c090ca7dd42 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Typeface plays an important role in the accessibility of a page. Some fonts are easier to read than others, and this is especially true on low-resolution screens. - -Change the font for both the `h1` and `h2` elements to `Verdana`, and use another web-safe font in the sans-serif family as a fallback. - -Also, add a `border-bottom` of `4px solid #dfdfe2` to `h2` elements to make the sections distinct. - -# --hints-- - -You should use a multiple element selector to target the `h1` and `h2` elements. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('h1, h2') || gs('h2, h1')); -``` - -You should set the first value of the `font-family` property to `Verdana`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const style = gs('h1, h2') || gs('h2, h1'); -assert.include(style?.fontFamily, 'Verdana'); -``` - -You should set the second value of the `font-family` property to another sans-serif, web safe font. _Hint: I would choose Tahoma_. - -```js -// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS. -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const style = gs('h1, h2') || gs('h2, h1'); -assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/); -``` - -You should use an `h2` element selector to target the `h2` elements. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('h2')); -``` - -You should give `h2` a `border-bottom` property of `4px solid #dfdfe2`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
-
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md deleted file mode 100644 index 64d85203b55806..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 61435e3c0679a306c20f1acc -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -To be able to navigate within the page, give each anchor element an `href` corresponding to the `id` of the `h2` elements. - -# --hints-- - -You should give the first `a` element an `href` of `#student-info`. - -```js -assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('href'), '#student-info'); -``` - -You should give the second `a` element an `href` of `#html-questions`. - -```js -assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('href'), '#html-questions'); -``` - -You should give the third `a` element an `href` of `#css-questions`. - -```js -assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('href'), '#css-questions'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
-
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md deleted file mode 100644 index f5b439aaeb63e6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 6143610161323a081b249c19 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Filling out the content of the quiz, below `#student-info`, add three `div` elements with a `class` of `info`. - -Then, within each `div` nest one `label` element, and one `input` element. - -# --hints-- - -You should nest three `div` elements below the `h2#student-info` element. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3); -``` - -You should give the first `div` a `class` of `info`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.className, 'info'); -``` - -You should give the second `div` a `class` of `info`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className, 'info'); -``` - -You should give the third `div` a `class` of `info`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info'); -``` - -You should nest one `label` element within the first `div`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1); -``` - -You should nest one `input` element within the first `div`, after the `label`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1); -assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input')); -``` - -You should nest one `label` element within the second `div`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1); -``` - -You should nest one `input` element within the second `div`, after the `label`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1); -assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input')); -``` - -You should nest one `label` element within the third `div`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1); -``` - -You should nest one `input` element within the third `div`, after the `label`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1); -assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelector('label + input')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
---fcc-editable-region-- -
-

Student Info

- -
---fcc-editable-region-- -
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md deleted file mode 100644 index 7f97400894af86..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 6143639d5eddc7094161648c -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -It is important to link each `input` to the corresponding `label` element. This provides assistive technology users with a visual reference to the input. - -This is done by giving the `label` a `for` attribute, which contains the `id` of the `input`. - -This section will take a student's name, email address, and date of birth. Give the `label` elements appropriate `for` attributes, as well as text content. Then, link the `input` elements to the corresponding `label` elements. - -# --hints-- - -You should give the first `label` element an appropriate `for` attribute. - -```js -assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1); -``` - -You should give the second `label` element an appropriate `for` attribute. - -```js -assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1); -``` - -You should give the third `label` element an appropriate `for` attribute. - -```js -assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1); -``` - -You should give the first `label` element an appropriate text content. - -```js -assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1); -``` - -You should give the second `label` element an appropriate text content. - -```js -assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1); -``` - -You should give the third `label` element an appropriate text content. - -```js -assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1); -``` - -You should give the first `input` element an `id` attribute matching the `for` attribute of the first `label`. - -```js -assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor); -``` - -You should give the second `input` element an `id` attribute matching the `for` attribute of the second `label`. - -```js -assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor); -``` - -You should give the third `input` element an `id` attribute matching the `for` attribute of the third `label`. - -```js -assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor); -``` - -You should not use the same `id` attribute for more than one `input` element. - -```js -const id = (n) => document.querySelectorAll('input')?.[n]?.id; -assert.notEqual(id(0), id(1)); -assert.notEqual(id(0), id(2)); -assert.notEqual(id(1), id(2)); -``` - -You should not use the same `for` attribute for more than one `label` element. - -```js -const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor; -assert.notEqual(htmlFor(0), htmlFor(1)); -assert.notEqual(htmlFor(0), htmlFor(2)); -assert.notEqual(htmlFor(1), htmlFor(2)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
---fcc-editable-region-- -
-

Student Info

-
- - -
-
- - -
-
- - -
-
---fcc-editable-region-- -
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md deleted file mode 100644 index d5fc4ab0520719..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 6143908b6aafb00a659ca189 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Keeping in mind best-practices for form inputs, give each `input` an appropriate `type` and `name` attribute. Then, give the first `input` a `placeholder` attribute. - -# --hints-- - -You should give the first `input` a `type` of `text`. - -```js -assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text'); -``` - -You should give the second `input` a `type` of `email`. - -```js -assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email'); -``` - -You should give the third `input` a `type` of `date`. - -```js -assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date'); -``` - -You should give the first `input` an appropriate `name` attribute. - -```js -assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1); -``` - -You should give the second `input` an appropriate `name` attribute. - -```js -assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1); -``` - -You should give the third `input` an appropriate `name` attribute. - -```js -assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1); -``` - -You should give the first `input` a `placeholder` attribute. - -```js -assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
---fcc-editable-region-- -
-

Student Info

-
- - -
-
- - -
-
- - -
-
---fcc-editable-region-- -
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md deleted file mode 100644 index 2058c74e267c38..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 6143920c8eafb00b735746ce -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Even though you added a `placeholder` to the first `input` element in the previous lesson, this is actually not a best-practice for accessibility; too often, users confuse the placeholder text with an actual input value - they think there is already a value in the input. - -Remove the placeholder text from the first `input` element, relying on the `label` being the best-practice. - -# --hints-- - -You should remove the `placeholder` attribute from the first `input` element. - -```js -assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

---fcc-editable-region-- -
- - -
---fcc-editable-region-- -
- - -
-
- - -
-
-
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md deleted file mode 100644 index fa6f9fb65d0ed1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 6143931a113bb80c45546287 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Arguably, `D.O.B.` is not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the label, is to add text only a screen reader can read. - -Append a `span` element with a class of `sr-only` to the current text content of the third `label` element. - -# --hints-- - -You should add a `span` element within the third `label` element. - -```js -assert.exists(document.querySelector('.info:nth-of-type(3) > label > span')); -``` - -You should give the `span` element a class of `sr-only`. - -```js -assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only'); -``` - -You should place the `span` after the text content `D.O.B.`. - -```js -assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\. - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
---fcc-editable-region-- -
- - -
---fcc-editable-region-- -
-
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md deleted file mode 100644 index fbfb1a53ab1e56..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 614394fb41985e0d2012a93e -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Within the `span` element, add the text `(Date of Birth)`. - -# --hints-- - -You should give the `span` element the text `(Date of Birth)`. - -```js -assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.textContent, '(Date of Birth)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
---fcc-editable-region-- -
- - -
---fcc-editable-region-- -
-
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md deleted file mode 100644 index 7afb8f8491afba..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 6143956ed76ed60e012faa51 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -The `.sr-only` text is still visible. There is a common pattern to visually hide text for only screen readers to read. - -This pattern is to set the following CSS properties: - -```css -position: absolute; -width: 1px; -height: 1px; -padding: 0; -margin: -1px; -overflow: hidden; -clip: rect(0, 0, 0, 0); -white-space: nowrap; -border: 0; -``` - -Use the above to define the `sr-only` class. - -# --hints-- - -You should use the `.sr-only` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only')); -``` - -You should give the `.sr-only` a `position` of `absolute`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute'); -``` - -You should give the `.sr-only` a `width` of `1px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px'); -``` - -You should give the `.sr-only` a `height` of `1px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px'); -``` - -You should give the `.sr-only` a `padding` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px'); -``` - -You should give the `.sr-only` a `margin` of `-1px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px'); -``` - -You should give the `.sr-only` an `overflow` of `hidden`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden'); -``` - -You should give the `.sr-only` a `clip` of `rect(0, 0, 0, 0)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)'); -``` - -You should give the `.sr-only` a `white-space` of `nowrap`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap'); -``` - -You should give the `.sr-only` a `border` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.borderWidth, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md deleted file mode 100644 index 39af52dfa782fd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -id: 614396f7ae83f20ea6f9f4b3 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Within the second `section` element, add two `div` elements with a class of `question-block`. - -Then, within each `div.question-block` element, add one `p` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`. - -# --hints-- - -You should nest two `div` elements within the second `section` element. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2); -``` - -You should give the first new `div` element a class of `question-block`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block'); -``` - -You should give the second new `div` element a class of `question-block`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block'); -``` - -You should nest one `p` element within each `div.question-block` element. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2); -``` - -You should give the first `p` element text of `1`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1'); -``` - -You should give the second `p` element text of `2`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2'); -``` - -You should nest one `fieldset` element within each `div.question-block` element. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2); -``` - -You should place the first `fieldset` element after the first `p` element. - -```js -assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset')); -``` - -You should place the second `fieldset` element after the second `p` element. - -```js -assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset')); -``` - -You should give the first `fieldset` element a class of `question`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question'); -``` - -You should give the second `fieldset` element a class of `question`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
---fcc-editable-region-- -
-

HTML

- -
---fcc-editable-region-- -
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md deleted file mode 100644 index 7fb76d94962e4d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 6143cb26f7edff2dc28f7da5 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Each `fieldset` will contain a true/false question. - -Within each `fieldset`, nest one `legend` element, and one `ul` element with two options. - -# --hints-- - -You should nest one `legend` element within the first `fieldset` element. - -```js -assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > legend')?.length, 1); -``` - -You should nest one `ul` element within the first `fieldset` element. - -```js -assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > ul')?.length, 1); -``` - -You should nest two `li` elements within the first `ul` element. - -```js -assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.querySelectorAll('li')?.length, 2); -``` - -You should nest one `legend` element within the second `fieldset` element. - -```js -assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > legend')?.length, 1); -``` - -You should nest one `ul` element within the second `fieldset` element. - -```js -assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > ul')?.length, 1); -``` - -You should nest two `li` elements within the second `ul` element. - -```js -assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('li')?.length, 2); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
---fcc-editable-region-- -
-

HTML

-
-

1

-
-
-
-

2

-
-
-
---fcc-editable-region-- -
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md deleted file mode 100644 index 5566a60c1e453e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 6144e818fd5ea704fe56081d -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Give each `fieldset` an adequate `name` attribute. Then, give both unordered lists a `class` of `answers-list`. - -Finally, use the `legend` to caption the content of the `fieldset` by placing a true/false question as the text content. - -# --hints-- - -You should give the first `fieldset` an adequate `name` attribute. _Hint: I would use `html-question-one`_ - -```js -assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name); -``` - -You should give the second `fieldset` an adequate `name` attribute. _Hint: I would use `html-question-two`_ - -```js -assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name); -``` - -You should give the first `ul` element a `class` of `answers-list`. - -```js -assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.className, 'answers-list'); -``` - -You should give the second `ul` element a `class` of `answers-list`. - -```js -assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answers-list'); -``` - -You should give the first `legend` element text content. - -```js -assert.notEmpty(document.querySelectorAll('legend')?.[0]?.textContent); -``` - -You should give the second `legend` element text content. - -```js -assert.notEmpty(document.querySelectorAll('legend')?.[1]?.textContent); -``` - -You should not use the same text content for both `legend` elements. - -```js -assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.querySelectorAll('legend')?.[1]?.textContent); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
---fcc-editable-region-- -
-

HTML

-
-

1

-
- -
    -
  • -
  • -
-
-
-
-

2

-
- -
    -
  • -
  • -
-
-
-
---fcc-editable-region-- -
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md deleted file mode 100644 index 7cd450063c4c55..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md +++ /dev/null @@ -1,231 +0,0 @@ ---- -id: 6144f8dc6849e405dd8bb829 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -To provide the functionality of the true/false questions, we need a set of inputs which do not allow both to be selected at the same time. - -Within each list element, nest one `label` element, and within each `label` element, nest one `input` element with the appropriate `type`. - -# --hints-- - -You should nest one `label` element within the first `li` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')); -``` - -You should nest one `label` element within the second `li` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')); -``` - -You should nest one `label` element within the third `li` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')); -``` - -You should nest one `label` element within the fourth `li` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')); -``` - -You should nest one `input` element within the first `label` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')?.querySelector('input')); -``` - -You should nest one `input` element within the second `label` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')?.querySelector('input')); -``` - -You should nest one `input` element within the third `label` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')?.querySelector('input')); -``` - -You should nest one `input` element within the fourth `label` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input')); -``` - -You should give the first `input` a `type` of `radio`. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio'); -``` - -You should give the second `input` a `type` of `radio`. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio'); -``` - -You should give the third `input` a `type` of `radio`. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio'); -``` - -You should give the fourth `input` a `type` of `radio`. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - ---fcc-editable-region-- -
    -
  • -
  • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • -
  • -
---fcc-editable-region-- -
-
-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md deleted file mode 100644 index 3fbdcb854e3943..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 6145e6eeaa66c605eb087fe9 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Although not required for `label` elements with a nested `input`, it is still best-practice to explicitly link a `label` with its corresponding `input` element. - -Link the `label` elements with their corresponding `input` elements. - -# --hints-- - -You should give the first `label` a `for` attribute matching the `id` of its `input` element. - -```js -const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor; -assert.notEmpty(htmlFor); -assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id); -``` - -You should give the second `label` a `for` attribute matching the `id` of its `input` element. - -```js -const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor; -assert.notEmpty(htmlFor); -assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id); -``` - -You should give the third `label` a `for` attribute matching the `id` of its `input` element. - -```js -const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor; -assert.notEmpty(htmlFor); -assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id); -``` - -You should give the fourth `label` a `for` attribute matching the `id` of its `input` element. - -```js -const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor; -assert.notEmpty(htmlFor); -assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - ---fcc-editable-region-- -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
---fcc-editable-region-- -
-
-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md deleted file mode 100644 index a5d554a893fba3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 6145e8b5080a5f06bb0223d0 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Give the `label` elements text such that the `input` comes before the text. Then, give the `input` elements a `value` matching the text. - -The text should either be `True` or `False`. - -# --hints-- - -You should give the first `label` element text content. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()); -``` - -You should give the second `label` element text content. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()); -``` - -You should give the third `label` element text content. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()); -``` - -You should give the fourth `label` element text content. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()); -``` - -You should place the first `label` text content after the `input` element. - -```js -assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/); -``` - -You should place the second `label` text content after the `input` element. - -```js -assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/); -``` - -You should place the third `label` text content after the `input` element. - -```js -assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/); -``` - -You should place the fourth `label` text content after the `input` element. - -```js -assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/); -``` - -You should give the first `label` the text `True` or `False`. - -```js -assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()); -``` - -You should give the second `label` the text `True`. - -```js -const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); -assert(l(0) === 'False' ? l(1) === 'True' : true); -``` - -You should give the second `label` the text `False`. - -```js -const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); -assert(l(0) === 'True' ? l(1) === 'False' : true); -``` - -You should give the third `label` the text `True` or `False`. - -```js -assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()); -``` - -You should give the fourth `label` the text `True`. - -```js -const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); -assert(l(2) === 'False' ? l(3) === 'True' : true); -``` - -You should give the fourth `label` the text `False`. - -```js -const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); -assert(l(2) === 'True' ? l(3) === 'False' : true); -``` - -You should give the first `input` a `value` matching the `label` text content. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase()); -``` - -You should give the second `input` a `value` matching the `label` text content. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.value?.toLowerCase()); -``` - -You should give the third `input` a `value` matching the `label` text content. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.value?.toLowerCase()); -``` - -You should give the fourth `input` a `value` matching the `label` text content. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.value?.toLowerCase()); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - ---fcc-editable-region-- -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
---fcc-editable-region-- -
-
-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md deleted file mode 100644 index 59c29e00db97f2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -id: 6145eb5f08a38a0786c7a80c -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -If you click on the radio inputs, you might notice both inputs within the same true/false fieldset can be selected at the same time. - -Group the relevant inputs together such that only one input from a pair can be selected at a time. - -# --hints-- - -You should give the first `input` a `name` attribute. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.name); -``` - -You should give the second `input` a `name` attribute. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.name); -``` - -You should give the third `input` a `name` attribute. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.name); -``` - -You should give the fourth `input` a `name` attribute. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.name); -``` - -You should give the second `input` a `name` attribute matching the `name` attribute of the first `input`. - -```js -const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; -assert.equal(i(1), i(0)); -``` - -You should give the fourth `input` a `name` attribute matching the `name` attribute of the third `input`. - -```js -const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; -assert.equal(i(3), i(2)); -``` - -You should give different `name` attributes to the first `input` and the third `input`. - -```js -const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; -assert.notEqual(i(0), i(2)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - ---fcc-editable-region-- -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
---fcc-editable-region-- -
-
-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md deleted file mode 100644 index 76a90a939ed16d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -id: 6145ed1f22caab087630aaad -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -To prevent unnecessary repetition, target the `before` pseudo-element of the `p` element, and give it a `content` property of `Question #`. - -# --hints-- - -You should use the `p::before` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('p::before')); -``` - -You should give the `p::before` pseudo-element a `content` property of `Question #`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, 'Question #'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md deleted file mode 100644 index f60d6fccdd4fb6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -id: 6145ee65e2e1530938cb594d -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -The final section of this quiz will contain a dropdown, and a text box. - -Begin by nesting a `div` with a `class` of `formrow`, and nest four `div` elements inside of it, alternating their `class` attributes with `question-block` and `answer`. - -# --hints-- - -You should add one `div` element within the final `section`. - -```js -assert.exists(document.querySelector('section:nth-of-type(3) > div')); -``` - -You should give the first `div` a `class` of `formrow`. - -```js -assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow'); -``` - -You should place `div.formrow` after the `h2` element. - -```js -assert.exists(document.querySelector('section:nth-of-type(3) > h2 + div.formrow')); -``` - -You should nest four `div` elements inside `div.formrow`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4); -``` - -You should give the first nested `div` a `class` of `question-block`. - -```js -assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(1)')?.className, 'question-block'); -``` - -You should give the second nested `div` a `class` of `answer`. - -```js -assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(2)')?.className, 'answer'); -``` - -You should give the third nested `div` a `class` of `question-block`. - -```js -assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(3)')?.className, 'question-block'); -``` - -You should give the fourth nested `div` a `class` of `answer`. - -```js -assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(4)')?.className, 'answer'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
---fcc-editable-region-- -
-

CSS

- -
---fcc-editable-region-- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md deleted file mode 100644 index fb91ee4674db61..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: 6145f02240ff8f09f7ec913c -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Within the `div.question-block` elements, nest one `label` element, and give the `label` elements text content - -# --hints-- - -You should nest one `label` element within the first `div.question-block` element. - -```js -assert.exists(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')); -``` - -You should nest one `label` element within the second `div.question-block` element. - -```js -assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')); -``` - -You should give the first `label` element text content. - -```js -assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1); -``` - -You should give the second `label` element text content. - -```js -assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.textContent?.length, 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
---fcc-editable-region-- -
-

CSS

-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md deleted file mode 100644 index 287ef625aad881..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 6145f14f019a4b0adb94b051 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Within the first `div.answer` element, nest one required `select` element with three `option` elements. - -Give the first `option` element a `value` of `""`, and the text `Select an option`. Give the second `option` element a `value` of `yes`, and the text `Yes`. Give the third `option` element a `value` of `no`, and the text `No`. - -# --hints-- - -You should nest one `select` element within the first `div.answer` element. - -```js -assert.exists(document.querySelector('div.answer > select')); -``` - -You should nest three `option` elements within the `select` element. - -```js -assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3); -``` - -You should give the first `option` element a `value` of `""`. - -```js -assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, ''); -``` - -You should give the first `option` element a text content of `Select an option`. - -```js -assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option'); -``` - -You should give the second `option` element a `value` of `yes`. - -```js -assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes'); -``` - -You should give the second `option` element a text content of `Yes`. - -```js -assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes'); -``` - -You should give the third `option` element a `value` of `no`. - -```js -assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no'); -``` - -You should give the third `option` element a text content of `No`. - -```js -assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No'); -``` - -You should give the `select` an attribute of `required`. - -```js -assert.isTrue(document.querySelector('div.answer > select')?.required); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
---fcc-editable-region-- -
- -
---fcc-editable-region-- -
- -
-
-
-
-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md deleted file mode 100644 index 032715a9ce7939..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 6145f3a5cd9be60b9459cdd6 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Link the first `label` element to the `select` element, and give the `select` element a `name` attribute. - -# --hints-- - -You should give the `label` element a `for` attribute. - -```js -assert.notEmpty(document.querySelector('.question-block > label')?.htmlFor); -``` - -You should give the `select` element an `id` attribute. - -```js -assert.notEmpty(document.querySelector('.answer > select')?.id); -``` - -You should give the `select` element an `id` matching the `for` attribute of the `label` element. - -```js -assert.equal(document.querySelector('.answer > select')?.id, document.querySelector('.question-block > label')?.htmlFor); -``` - -You should give the `select` element a `name` attribute. - -```js -assert.notEmpty(document.querySelector('.answer > select')?.name); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
---fcc-editable-region-- -
- -
-
- -
---fcc-editable-region-- -
- -
-
-
-
-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md deleted file mode 100644 index 7589d13e75b529..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 6145f47393fbe70c4d885f9c -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Nest one `textarea` element within the second `div.answer` element, and set the number of rows and columns it has. - -Then, give the `textarea` placeholder text describing an example answer. - -# --hints-- - -You should nest one `textarea` element within the second `div.answer` element. - -```js -assert.exists(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')); -``` - -You should give the `textarea` a `rows` attribute with a number. - -```js -const rows = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('rows'); -assert.notEmpty(rows); -assert.isNotNaN(Number(rows)); -``` - -You should give the `textarea` a `cols` attribute with a number. - -```js -const cols = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('cols'); -assert.notEmpty(cols); -assert.isNotNaN(Number(cols)); -``` - -You should give the `textarea` a `placeholder` attribute with text describing an example answer. - -```js -assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('placeholder')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
---fcc-editable-region-- -
- -
---fcc-editable-region-- -
-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md deleted file mode 100644 index e03dfc5613165f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 6145f59029474c0d3dc1c8b8 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -As with the other `input` and `label` elements, link the `textarea` to its corresponding `label` element, and give it a `name` attribute. - -# --hints-- - -You should give the `label` element a `for` attribute. - -```js -assert.notEmpty(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor); -``` - -You should give the `textarea` element an `id` attribute matching the `for` attribute of the `label` element. - -```js -assert.equal(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor, document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id); -``` - -You should give the `textarea` element a `name` attribute. - -```js -assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
---fcc-editable-region-- -
- -
-
- -
---fcc-editable-region-- -
-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md deleted file mode 100644 index 124e24f12d62ac..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 6145f685797bd30df9784e8c -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Do not forget to give your `form` a submit button. - -# --hints-- - -You should add either a `button` or `input` element. - -```js -assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input')); -``` - -You should place the submit within the `form` element. - -```js -assert.exists(document.querySelector('form > button') || document.querySelector('form > input')); -``` - -You should place the submit after the last `section` element. - -```js -assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input')); -``` - -You should give the submit a `type` of `submit`. - -```js -assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]')); -``` - -The submit should display the text `Submit`. - -```js -assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Submit'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
---fcc-editable-region-- -
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
---fcc-editable-region-- -
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md deleted file mode 100644 index c6826bb3163415..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: 6145f829ac6a920ebf5797d7 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Two final semantic HTML elements for this project are the `footer` and `address` elements. The `footer` element is a container for a collection of content that is related to the page, and the `address` element is a container for contact information for the author of the page. - -After the `main` element, add one `footer` element, and nest one `address` element within it. - -# --hints-- - -You should add one `footer` element after the `main` element. - -```js -assert.exists(document.querySelector('main + footer')); -``` - -You should nest one `address` element within the `footer` element. - -```js -assert.exists(document.querySelector('footer > address')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
---fcc-editable-region-- - ---fcc-editable-region-- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md deleted file mode 100644 index 93fb537df6321c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 6145f8f8bcd4370f6509078e -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Within the `address` element, add the following: - -```html -freeCodeCamp
-San Francisco
-California
-USA -``` - -You can visit, but you might not find anything... - -# --hints-- - -You should add the above text including the `
` tags to the `address` element. - -```js -assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
---fcc-editable-region-- -
-
- -
-
---fcc-editable-region-- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md deleted file mode 100644 index 27280d1bbc8876..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 6145fb5018cb5b100cb2a88c -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -The `address` element does not have to contain a physical geographical location. It can be used to provide a link to the subject. - -Wrap a link around the text `freeCodeCamp`, and set its location to `https://freecodecamp.org`. - -# --hints-- - -You should add an `a` element. - -```js -assert.exists(document.querySelector('address > a')); -``` - -You should give the `a` element a `href` attribute of `https://freecodecamp.org`. - -```js -assert.equal(document.querySelector('address > a')?.getAttribute('href'), 'https://freecodecamp.org'); -``` - -You should wrap the `a` element around the existing text `freeCodeCamp`. - -```js -assert.equal(document.querySelector('address > a')?.innerHTML, 'freeCodeCamp'); -assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g)?.length, 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
---fcc-editable-region-- -
-
- freeCodeCamp
- San Francisco
- California
- USA -
-
---fcc-editable-region-- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md deleted file mode 100644 index 5e2f843b679fb2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md +++ /dev/null @@ -1,256 +0,0 @@ ---- -id: 6145fc3707fc3310c277f5c8 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Back to styling the page. Select the list elements within the navigation bar, and give them the following styles: - -```css -color: #dfdfe2; -margin: 0 0.2rem; -padding: 0.2rem; -display: block; -``` - -# --hints-- - -You should use either the `nav li` or `nav > ul > li` selector. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('nav li') || gs('nav > ul > li')); -``` - -You should give the `li` elements a `color` of `#dfdfe2`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const color = gs('nav li')?.color ?? gs('nav > ul > li')?.color; -assert.equal(color, 'rgb(223, 223, 226)'); -``` - -You should give the `li` elements a `margin` of `0 0.2rem`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const margin = gs('nav li')?.margin ?? gs('nav > ul > li')?.margin; -assert.equal(margin, '0px 0.2rem'); -``` - -You should give the `li` elements a `padding` of `0.2rem`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const padding = gs('nav li')?.padding ?? gs('nav > ul > li')?.padding; -assert.equal(padding, '0.2rem'); -``` - -You should give the `li` elements a `display` of `block`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const display = gs('nav li')?.display ?? gs('nav > ul > li')?.display; -assert.equal(display, 'block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md deleted file mode 100644 index 3583c20af09507..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 614796cb8086be482d60e0ac -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -On the topic of visual accessibility, contrast between elements is a key factor. For example, the contrast between the text and the background of a heading should be at least 4.5:1. - -Change the font color of all the anchor elements within the list elements to something with a contrast ratio of at least 7:1. - -# --hints-- - -You should use the `li > a` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('li > a')); -``` - -You should give the `a` element a `color` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('li > a')?.color); -``` - -You should give the `color` property a contrast with the background of at least 7:1. _Hint: I would use `#dfdfe2`_ - -```js -function luminance(r, g, b) { - const a = [r, g, b].map((v) => { - v /= 255; - return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 ); - }); - return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; -} -function contrast(rgb1, rgb2) { - const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]); - const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]); - const brightest = Math.max(lum1, lum2); - const darkest = Math.min(lum1, lum2); - return (brightest + 0.05) - / (darkest + 0.05); -} -const backgroundColour = [27, 27, 50]; - -for (let elem of document.querySelectorAll('li > a')) { - const a = getComputedStyle(elem)?.color; - const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/); - const aColour = [rgbA[1], rgbA[2], rgbA[3]]; - assert.isAtLeast(contrast(backgroundColour, aColour), 7); -} -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md deleted file mode 100644 index 4c25e837123060..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 6147a14ef5668b5881ef2297 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -To make the navigation buttons look more like typical buttons, remove the underline from the anchor tags. - -Then, create a new selector targeting the navigation list elements so that when the cursor hovers over them, the background color and text color are switched, and the cursor becomes a pointer. - -# --hints-- - -You should use the existing `li > a` selector to set the `text-decoration` to `none`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('li > a')?.textDecoration, 'none'); -``` - -You should use either the `nav > ul > li:hover` or `nav li:hover` selector to style the elements on hover. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('nav > ul > li:hover') || gs('nav li:hover')); -``` - -You should give hovered `li` elements a `background-color` of `#dfdfe2`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const bgColor = gs('nav > ul > li:hover')?.backgroundColor ?? gs('nav li:hover')?.backgroundColor; -assert.equal(bgColor, 'rgb(223, 223, 226)'); -``` - -You should give hovered `li` elements a `color` of `#1b1b32`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const color = gs('nav > ul > li:hover')?.color ?? gs('nav li:hover')?.color; -assert.equal(color, 'rgb(27, 27, 50)'); -``` - -You should give hovered `li` elements a `cursor` of `pointer`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const cursor = gs('nav > ul > li:hover')?.cursor ?? gs('nav li:hover')?.cursor; -assert.equal(cursor, 'pointer'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - ---fcc-editable-region-- - - -li > a { - color: inherit; -} ---fcc-editable-region-- - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md deleted file mode 100644 index 9bae839af7cb18..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md +++ /dev/null @@ -1,253 +0,0 @@ ---- -id: 614878f7a412310647873015 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Tidy up the `header`, by using _Flexbox_ to put space between the children, and vertically center them. - -Then, fix the `header` to the top of the viewport. - -# --hints-- - -You should give the `header` a `justify-content` of `space-between`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between'); -``` - -You should give the `header` an `align-items` of `center`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center'); -``` - -You should give the `header` a `position` of `fixed`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed'); -``` - -You should give the `header` a `top` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - ---fcc-editable-region-- -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - -} ---fcc-editable-region-- - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md deleted file mode 100644 index 23ebeabcaec15e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md +++ /dev/null @@ -1,261 +0,0 @@ ---- -id: 61487b77d4a37707073a64e5 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -When the screen width is small, the `h1` does not wrap its text content how it should. Align the text for the `h1` element in the center. - -Then, give the `main` padding such that the `Student Info` section header can be fully seen. - -# --hints-- - -You should give the `h1` a `text-align` of `center`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign, 'center'); -``` - -You should add a `main` selector to target the `main` element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('main')); -``` - -You should give the `main` a `padding-top` of at least `25px`. - -```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('main')?.paddingTop?.replace(/\D+/, '')), 25); -``` - -You should only change the `padding-top` value. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingBottom); -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingLeft); -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - ---fcc-editable-region-- -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - -} - - ---fcc-editable-region-- - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md deleted file mode 100644 index e1455594b20a6b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -id: 61487da611a65307e78d2c20 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -On small screens, the unordered list in the navigation bar overflows the right side of the screen. - -Fix this by using _Flexbox_ to wrap the `ul` content. Then, set the following CSS properties to correctly align the text: - -```css -align-items: center; -padding-inline-start: 0; -margin-block: 0; -height: 100%; -``` - -# --hints-- - -You should give the `ul` a `flex-wrap` of `wrap`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.flexWrap, 'wrap'); -``` - -You should give the `ul` an `align-items` of `center`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.alignItems, 'center'); -``` - -You should give the `ul` a `padding-inline-start` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.paddingInlineStart, '0px'); -``` - -You should give the `ul` a `margin-block` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.marginBlock, '0px'); -``` - -You should give the `ul` a `height` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - ---fcc-editable-region-- -nav > ul { - display: flex; - justify-content: space-evenly; - -} ---fcc-editable-region-- - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md deleted file mode 100644 index 3146be5669acac..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 61487f703571b60899055cf9 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Set the width of the `section` elements to `80%` of their parent container. Then, use margins to center the `section` elements, adding `10px` to the bottom margin. - -Also, ensure the `section` elements cannot be larger than `600px` in width. - -# --hints-- - -You should use a `section` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('section')); -``` - -You should give the `section` a `width` of `80%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.width, '80%'); -``` - -You should give the `section` a `margin-top` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginTop, '0px'); -``` - -You should give the `section` a `margin-right` of `auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginRight, 'auto'); -``` - -You should give the `section` a `margin-bottom` of `10px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginBottom, '10px'); -``` - -You should give the `section` a `margin-left` of `auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginLeft, 'auto'); -``` - -You should give the `section` a `max-width` of `600px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - ---fcc-editable-region-- - - ---fcc-editable-region-- - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md deleted file mode 100644 index 77704b90c483b4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -id: 614880dc16070e093e29bc56 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Replace the top margin of the `h2` elements with `60px` of top padding. - -# --hints-- - -You should give the `h2` a `margin-top` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.marginTop, '0px'); -``` - -You should give the `h2` a `padding-top` of `60px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - ---fcc-editable-region-- -h2 { - border-bottom: 4px solid #dfdfe2; - -} ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md deleted file mode 100644 index 39f2636029035d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md +++ /dev/null @@ -1,280 +0,0 @@ ---- -id: 614883b6fa720e09fb167de9 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Add padding to the top and left of the `.info` elements, and set the other values to `0`. - -# --hints-- - -You should use the `.info` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.info')); -``` - -You should give `.info` a `padding-top` of at least `1px`. - -```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1); -``` - -You should give `.info` a `padding-right` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px'); -``` - -You should give `.info` a `padding-bottom` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px'); -``` - -You should give `.info` a `padding-left` of at least `1px`. - -```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingLeft?.replace(/\D+/, '')), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md deleted file mode 100644 index d0e5da638c1cc4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md +++ /dev/null @@ -1,364 +0,0 @@ ---- -id: 614884c1f5d6f30ab3d78cde -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Give the `.formrow` elements top margin, and left and right padding. The other padding values should be `0`. - -Then, increase the font size for all `input` elements. - -# --hints-- - -You should use a `.formrow` selector to target the `.formrow` elements. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.formrow')); -``` - -You should give the `.formrow` a `margin-top` of at least `1px`. - -```js -const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.marginTop; -let valInPx = 0; -if (/^\d+rem$/.test(val)) { - valInPx = remToPx(Number(val.replace('rem', ''))); -} else if (/^\d+em$/.test(val)) { - valInPx = emToPx(Number(val.replace('em', ''))); -} else { - valInPx = Number(val?.replace('px', '')); -} -function emToPx(em) { - return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); -} -function remToPx(rem) { - return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); -} -assert.isAtLeast(valInPx, 1); -``` - -You should give the `.formrow` a `padding-top` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingTop, '0px'); -``` - -You should give the `.formrow` a `padding-right` of at least `1px`. - -```js -const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingRight; -let valInPx = 0; -if (/^\d+rem$/.test(val)) { - valInPx = remToPx(Number(val.replace('rem', ''))); -} else if (/^\d+em$/.test(val)) { - valInPx = emToPx(Number(val.replace('em', ''))); -} else { - valInPx = Number(val?.replace('px', '')); -} -function emToPx(em) { - return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); -} -function remToPx(rem) { - return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); -} -assert.isAtLeast(valInPx, 1); -``` - -You should give the `.formrow` a `padding-bottom` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingBottom, '0px'); -``` - -You should give the `.formrow` a `padding-left` of at least `1px`. - -```js -const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingLeft; -let valInPx = 0; -if (/^\d+rem$/.test(val)) { - valInPx = remToPx(Number(val.replace('rem', ''))); -} else if (/^\d+em$/.test(val)) { - valInPx = emToPx(Number(val.replace('em', ''))); -} else { - valInPx = Number(val?.replace('px', '')); -} -function emToPx(em) { - return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); -} -function remToPx(rem) { - return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); -} -assert.isAtLeast(valInPx, 1); -``` - -You should use an `input` selector to target the `input` elements. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('input')); -``` - -You should give the `input` a `font-size` greater than `13px`. - -```js -const val = new __helpers.CSSHelp(document).getStyle('input')?.fontSize; -let valInPx = 0; -if (/^\d+rem$/.test(val)) { - valInPx = remToPx(Number(val.replace('rem', ''))); -} else if (/^\d+em$/.test(val)) { - valInPx = emToPx(Number(val.replace('em', ''))); -} else { - valInPx = Number(val?.replace('px', '')); -} -function emToPx(em) { - return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); -} -function remToPx(rem) { - return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); -} -assert.isAtLeast(valInPx, 13); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md deleted file mode 100644 index 16b14e0adec64b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 61488ecfd05e290b5712e6da -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -To make the first section look more inline, target only the `input` elements within `.info` elements, and set their `width` to `50%`, and left-align their text. - -# --hints-- - -You should use either the `.info input` or `.info > input` selector. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('.info input') || gs('.info > input')); -``` - -You should give the `input` elements a `width` of `50%`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width; -const width = gs('.info input') ?? gs('.info > input'); -assert.equal(width, '50%'); -``` - -You should give the `input` elements a `text-align` of `left`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign; -const textAlign = gs('.info input') ?? gs('.info > input'); -assert.equal(textAlign, 'left'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md deleted file mode 100644 index e199c8e7cd7647..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: 6148d99cdc7acd0c519862cb -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Target all `label` elements within `.info` elements, and set their `width` to `10%`, and make it so they do not take up less than `55px`. - -# --hints-- - -You should use either the `.info label` or `.info > label` selector. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('.info label') || gs('.info > label')); -``` - -You should give the `label` elements a `width` of `10%`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width; -const width = gs('.info label') || gs('.info > label'); -assert.equal(width, '10%'); -``` - -You should give the `label` elements a `min-width` of `55px`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.minWidth; -const minWidth = gs('.info label') || gs('.info > label'); -assert.equal(minWidth, '55px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - ---fcc-editable-region-- -.info input { - width: 50%; - text-align: left; -} - - ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md deleted file mode 100644 index e1587b3d5152c2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md +++ /dev/null @@ -1,306 +0,0 @@ ---- -id: 6148da157cc0bd0d06df5c0a -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -To align the `input` boxes with each other, set the `display` property to `inline-block` for all `input` and `label` elements within `.info` elements. - -Also, align the text to the right. - -# --hints-- - -You should use either a `.info > label, .info > input` or `.info label, .info input` selector. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('.info > label, .info > input') || gs('.info label, .info input') || gs('.info > input, .info > label') || gs('.info input, .info label')); -``` - -You should give the `input` and `label` elements a `display` of `inline-block`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.display; -const display = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label'); -assert.equal(display, 'inline-block'); -``` - -You should give the `input` and `label` elements a `text-align` of `right`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign; -const textAlign = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label'); -assert.equal(textAlign, 'right'); -``` - -You should set the `text-align: right` property before the `.info input` rule. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyleRule(s); -assert(gs('.info input').isDeclaredAfter('.info label, .info input') || gs('.info input').isDeclaredAfter('.info > label, .info > input') || gs('.info input').isDeclaredAfter('.info > input, .info > label') || gs('.info input').isDeclaredAfter('.info input, .info label')); - -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - ---fcc-editable-region-- - - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md deleted file mode 100644 index c5348085c09dc5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 6148dc095264000dce348bf5 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -To neaten the `.question-block` elements, set the following CSS properties: - -```css -text-align: left; -display: block; -width: 100%; -margin-top: 20px; -padding-top: 5px; -``` - -# --hints-- - -You should use the `.question-block` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.question-block')); -``` - -You should give the `.question-block` element a `display` of `block`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.display, 'block'); -``` - -You should give the `.question-block` element a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.width, '100%'); -``` - -You should give the `.question-block` element a `margin-top` of `20px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.marginTop, '20px'); -``` - -You should give the `.question-block` element a `padding-top` of `5px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.paddingTop, '5px'); -``` - -You should give the `.question-block` element a `text-align` of `left`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAlign, 'left'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md deleted file mode 100644 index 4cc4b60c2fbec4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 6148dcaaf2e8750e6cb4501a -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Make the paragraph elements appear as a higher priority, with the following CSS properties: - -```css -margin-top: 5px; -padding-left: 15px; -font-size: 20px; -``` - -# --hints-- - -You should use the `p` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('p')); -``` - -You should give the `p` element a `margin-top` of `5px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.marginTop, '5px'); -``` - -You should give the `p` element a `padding-left` of `15px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.paddingLeft, '15px'); -``` - -You should give the `p` element a `font-size` of `20px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md deleted file mode 100644 index 84d08d036d0d68..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 6148dd31d210990f0fb140f8 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -It is useful to see the default border around the `fieldset` elements, during development. However, it might not be the style you want. - -Remove the border and bottom padding on the `.question` elements. - -# --hints-- - -You should use the `.question` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.question')); -``` - -You should give the `.question` a `border` of `none`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.borderStyle, 'none'); -``` - -You should give the `.question` a `padding-bottom` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBottom, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md deleted file mode 100644 index 9d4d4958398e79..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 6148defa9c01520fb9d178a0 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Remove the default styling for the list items of `.answers-list`, and remove the unordered list padding. - -# --hints-- - -You should use the `.answers-list` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.answers-list')); -``` - -You should give `.answers-list` a `list-style` of `none`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.listStyle, 'none'); -``` - -You should give `.answers-list` a `padding` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md deleted file mode 100644 index 52246c8cf742dd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md +++ /dev/null @@ -1,360 +0,0 @@ ---- -id: 6148dfab9b54c110577de165 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Give the submit button a freeCodeCamp-style design, with the following CSS properties: - -```css -display: block; -margin: 40px auto; -width: 40%; -padding: 15px; -font-size: 23px; -background: #d0d0d5; -border: 3px solid #3b3b4f; -``` - -# --hints-- - -You should use the `button` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('button')); -``` - -You should give `button` a `display` of `block`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.display, 'block'); -``` - -You should give `button` a `margin` of `40px auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.margin, '40px auto'); -``` - -You should give `button` a `width` of `40%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.width, '40%'); -``` - -You should give `button` a `padding` of `15px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.padding, '15px'); -``` - -You should give `button` a `font-size` of `23px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.fontSize, '23px'); -``` - -You should give `button` a `background` of `#d0d0d5`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.backgroundColor, 'rgb(208, 208, 213)'); -``` - -You should give `button` a `border` of `3px solid #3b3b4f`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px solid rgb(59, 59, 79)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md deleted file mode 100644 index 5cccf1a4e927a4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 6148e0bcc13efd10f7d7a6a9 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Set the `footer` background color to `#2a2a40`, and use _Flexbox_ to horizontally center the text. - -# --hints-- - -You should use the `footer` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('footer')); -``` - -You should give `footer` a `background-color` of `#2a2a40`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.backgroundColor, 'rgb(42, 42, 64)'); -``` - -You should give `footer` a `display` of `flex`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.display, 'flex'); -``` - -You should give `footer` a `justify-content` of `center`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent, 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md deleted file mode 100644 index 82d36c40b2e809..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md +++ /dev/null @@ -1,356 +0,0 @@ ---- -id: 6148e161ecec9511941f8833 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Now, we cannot read the text. Target the `footer` and the anchor element within to set the font color to a color of adequate contrast ratio. - -# --hints-- - -You should use the `footer, footer a` selector. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('footer, footer a') || gs('footer a, footer')); -``` - -You should set the `color` to a value with a contrast ratio of at least `7:1`. _Hint: I suggest `#dfdfe2`_ - -```js -function luminance(r, g, b) { - const a = [r, g, b].map((v) => { - v /= 255; - return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 ); - }); - return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; -} -function contrast(rgb1, rgb2) { - const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]); - const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]); - const brightest = Math.max(lum1, lum2); - const darkest = Math.min(lum1, lum2); - return (brightest + 0.05) - / (darkest + 0.05); -} -const backgroundColour = [42, 42, 64]; - -const foot = getComputedStyle(document.querySelector('footer'))?.color; -const a = getComputedStyle(document.querySelector('footer a'))?.color; - -const rgbFoot = foot?.match(/(\d+),\s(\d+),\s(\d+)/); -const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/); -const footColour = [rgbFoot[1], rgbFoot[2], rgbFoot[3]]; -const aColour = [rgbA[1], rgbA[2], rgbA[3]]; -assert.isAtLeast(contrast(backgroundColour, footColour), 7); -assert.isAtLeast(contrast(backgroundColour, aColour), 7); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md deleted file mode 100644 index 8759db97cec2d2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 6148e28706b34912340fd042 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Horizontally center all the text within the `address` element, and add some padding. - -# --hints-- - -You should use the `address` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('address')); -``` - -You should give `address` a `text-align` of `center`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('address')?.textAlign, 'center'); -``` - -You should give `address` a `padding-top` of at least `1px`. - -```js -assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-top')?.replace(/\D\D+/, '')), 1); -``` - -You should give `address` a `padding-right` of at least `1px`. - -```js -assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-right')?.replace(/\D\D+/, '')), 1); -``` - -You should give `address` a `padding-bottom` of at least `1px`. - -```js -assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-bottom')?.replace(/\D\D+/, '')), 1); -``` - -You should give `address` a `padding-left` of at least `1px`. - -```js -assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-left')?.replace(/\D\D+/, '')), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - -footer, -footer a { - color: #dfdfe2; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md deleted file mode 100644 index 71114f25000a0e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 6148e335c1edd512d00e4691 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Clicking on the navigation links should jump the viewport to the relevant section. However, this jumping can be disorienting for some users. - -Select all elements, and set the `scroll-behavior` to `smooth`. - -# --hints-- - -You should use the `*` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); -``` - -You should give `*` a `scroll-behavior` of `smooth`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smooth'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- - -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - -footer, -footer a { - color: #dfdfe2; -} - -address { - text-align: center; - padding: 0.3em; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md deleted file mode 100644 index b879f3d90df53d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 6148e41c728f65138addf9cc -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Setting the `scroll-behavior` to `smooth` is preferred by most users. However, some users find this to be too slow, and prefer to have the scrolling happen instantaneously. - -There exists a media rule to set CSS based on the user's browser settings. This media rule is called `prefers-reduced-motion`, and expects one of the following values: - -- `reduce` -- `no-preference` - -Wrap the appropriate rule within a `prefers-reduced-motion` media rule such that a `scroll-behavior` of `smooth` is only set if the user's browser setting is `no-preference`. - -# --hints-- - -You should have a `@media (prefers-reduced-motion: no-preference)` rule. - -```js -assert.exists(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')); -``` - -You should wrap the existing `*` rule within the `@media` rule. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')?.find(x => x.selectorText === '*')?.style?.scrollBehavior, 'smooth'); -assert.notExists(new __helpers.CSSHelp(document).getStyle('*')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css ---fcc-editable-region-- -* { - scroll-behavior: smooth; -} ---fcc-editable-region-- - -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - -footer, -footer a { - color: #dfdfe2; -} - -address { - text-align: center; - padding: 0.3em; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md deleted file mode 100644 index 9ec5528931b30a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md +++ /dev/null @@ -1,685 +0,0 @@ ---- -id: 6148e5aeb102e3142de026a2 -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Finally, the navigation accessibility can be improved by providing keyboard shortcuts. - -The `accesskey` attribute accepts a space-separated list of access keys. For example: - -```html - -``` - -Give each of the navigation links a single-letter access key. - -_Note: It is not always advised to use access keys, but they can be useful_ - -Well done. You have completed the _Accessibility Quiz_ practice project. - -# --hints-- - -You should give the first `a` element a single-letter `accesskey`. - -```js -assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('accesskey')?.length, 1); -``` - -You should give the second `a` element a single-letter `accesskey`. - -```js -assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('accesskey')?.length, 1); -``` - -You should give the third `a` element a single-letter `accesskey`. - -```js -assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.length, 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -@media (prefers-reduced-motion: no-preference) { - * { - scroll-behavior: smooth; - } -} - -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - -footer, -footer a { - color: #dfdfe2; -} - -address { - text-align: center; - padding: 0.3em; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` - -## --solutions-- - -```html - - - - - - - - Accessibility Quiz - - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

- -
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -@media (prefers-reduced-motion: no-preference) { - * { - scroll-behavior: smooth; - } -} - -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - position: fixed; - background-color: #1b1b32; - top: 0; -} - -#logo { - width: max(100px, 18vw); - aspect-ratio: 35 / 4; - max-height: 100%; - background-color: #0a0a23; - padding: 0.4rem; -} - -h1 { - text-align: center; - font-size: min(5vw, 1.2em); - color: #f1be32; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - display: block; - margin: 0 0.2rem; - color: #dfdfe2; - padding: 0.2rem; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0px auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - - -.info { - margin: 0 auto; - padding: 10px 0 0 5px; -} -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, -.info input { - display: inline-block; - text-align: right; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.info input { - width: 50%; - text-align: left; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - -footer, -footer a { - color: #dfdfe2; -} - -address { - text-align: center; - padding: 0.3em; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md deleted file mode 100644 index 1e2c64c4084e96..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 614ccc21ea91ef1736b9b578 -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Welcome to the first part of the Accessibility Quiz. As you are becoming a seasoned HTML and CSS developer, we have started you off with the basic boilerplate. - -Start this accessibility journey by providing a `lang` attribute to your `html` element. This will assist screen readers in identifying the language of the page. - -# --hints-- - -You should give the `html` element a `lang` attribute. _Hint: You can use the value `en` for English._ - -```js -assert.match(code, //i); -// TODO: This should/could be fixed in the builder.js -// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang)); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - - - - - - - - ---fcc-editable-region-- - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md deleted file mode 100644 index 513e9a316772f1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5f331e55dfab7a896e53c3a1 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -The `title` is one of several elements that provide extra information not visible on the web page, but it is useful for search engines or how the page gets displayed. - -Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page. Note that `meta` elements are self-closing. - -# --hints-- - -You should have a `meta` tag. - -```js -assert(code.match(//is)); -``` - -Your `meta` tag should have a `charset` attribute. - -```js -assert(code.match(/ - ---fcc-editable-region-- - - Cafe Menu - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md deleted file mode 100644 index a948eaa99f1726..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5f3326b143638ee1a09ff1e3 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -To prepare to create some actual content, add a `body` element below the `head` element. - -# --hints-- - -You should have an opening `` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `` tag. - -```js -assert(code.match(/<\/body>/i)); -``` - -You should not change your `head` element. Make sure you did not delete your closing tag. - -```js -assert(code.match(//i)); -assert(code.match(/<\/head>/i)); -``` - -Your `body` element should come after your `head` element. - -```js -assert(code.match(/<\/head>[.\n\s]*/im)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - Cafe Menu - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md deleted file mode 100644 index b674d026c4c411..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5f33294a6af5e9188dbdb8f3 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -The name of the cafe is `CAMPER CAFE`. Add an `h1` element within your `body` element. Give it the name of the cafe in capitalized letters to make it stand out. - -# --hints-- - -You should have an opening `

` tag. - -```js -assert(code.match(/

/i)); -``` - -You should have a closing `

` tag. - -```js -assert(code.match(/<\/h1>/i)); -``` - -You should not change your existing `body` element. - -```js -assert($('body').length === 1); -``` - -Your `h1` element should be nested in your `body` element. - -```js -assert($('h1')[0].parentElement.tagName === "BODY"); -``` - -Your `h1` element should have the text `CAMPER CAFE`. - -```js -assert(code.match(/

CAMPER CAFE<\/h1>/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - ---fcc-editable-region-- - - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md deleted file mode 100644 index 4c0e60cd610c78..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5f332a88dc25a0fd25c7687a -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -To let visitors know the cafe was founded in 2020, add a `p` element below the `h1` element with the text `Est. 2020`. - -# --hints-- - -You should have an opening `

` tag. - -```js -assert(code.match(/

/i)); -``` - -You should have a closing `

` tag. - -```js -assert(code.match(/<\/p>/i)); -``` - -You should not change your existing `h1` element. Make sure you did not delete the closing tag. - -```js -assert($('h1').length === 1); -``` - -Your `p` element should be below your `h1` element. - -```js -assert($('p')[0].previousElementSibling.tagName === 'H1'); -``` - -Your `p` element should have the text `Est. 2020`. - -```js -assert(code.match(/

Est. 2020<\/p>/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - ---fcc-editable-region-- -

CAMPER CAFE

---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md deleted file mode 100644 index 3c8c226c1e7996..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5f332b23c2045fb843337579 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Since the `p` element added in the previous step provides supplemental information about the cafe, nest both the `h1` and `p` elements in a `header` element. - -# --hints-- - -You should have an opening `
` tag. - -```js -assert(code.match(/
/i)); -``` - -You should have a closing `
` tag. - -```js -assert(code.match(/<\/header>/i)); -``` - -Your `h1` element should be nested in your `header` element. - -```js -const header = document.querySelectorAll('header')[0]; -assert(header.children[0].tagName === 'H1'); -``` - -Your `p` element should be nested in your `header` element. - -```js -const header = document.querySelectorAll('header')[0]; -assert(header.children[1].tagName === "P"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - ---fcc-editable-region-- -

CAMPER CAFE

-

Est. 2020

---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md deleted file mode 100644 index 7e35bbf41699d6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5f33310c1851c6c4da013250 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -It's time to add some menu content. Add a `main` element below the existing `header` element. It will eventually contain pricing information about coffee and desserts offered by the cafe. - -# --hints-- - -Your code should have an opening `
` tag. - -```js -assert(code.match(/
/i)); -``` - -Your code should have a closing `
` tag. - -```js -assert(code.match(/<\/main>/i)); -``` - -You should not change your `header` element. Make sure you don't accidentally delete your closing tag. - -```js -assert($('header').length === 1); -``` - -Your `main` tag should come after your `header` tag. - -```js -const main = document.querySelectorAll('main')[0]; -assert(main.previousElementSibling.tagName === 'HEADER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - ---fcc-editable-region-- -
-

CAMPER CAFE

-

Est. 2020

-
---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md deleted file mode 100644 index 127042fa73f708..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5f344f9c805cd193c33d829c -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -You can add style to an element by specifying it in the `style` element and setting a property for it like this: - -```css -element { - property: value; -} -``` - -Center your `h1` element by setting its `text-align` property to the value `center`. - -# --hints-- - -You should have an `h1` selector in your `style` element. - -```js -const hasSelector = new __helpers.CSSHelp(document).getStyle('h1'); -assert(hasSelector); -``` - -Your `text-align` property should have a value of `center`. - -```js -const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'center'); -assert(hasTextAlign); -``` - -Your `h1` selector should set the `text-align` property to `center`. - -```js -const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align'); -assert(h1TextAlign === 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu ---fcc-editable-region-- - ---fcc-editable-region-- - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md deleted file mode 100644 index dbfd19f30d9e6a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: 5f344fad8bf01691e71a30eb -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Up until now, you have been limited regarding the presentation and appearance of the content you create. To start taking control, add a `style` element within the `head` element. - -# --hints-- - -Your code should have an opening `` tag. - -```js -assert(code.match(/<\/style\s*>/)); -``` - -Your `style` element should be nested in your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i)) -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - Cafe Menu - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md deleted file mode 100644 index c6e75ade616085..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 5f344fbc22624a2976425065 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Create an `h2` element in the `section` element and give it the text `Coffee`. - -# --hints-- - -You should have an opening `

` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `

` tag. - -```js -assert(code.match(/<\/h2\s*>/i)); -``` - -You should not change your existing `section` element. Make sure you did not delete the closing tag. - -```js -assert($('section').length === 1); -``` - -Your `h2` element should be within your `section` element. - -```js -const h2 = document.querySelector('h2'); -assert(h2.parentElement.tagName === 'SECTION'); -``` - -Your `h2` element should have the text `Coffee`. - -```js -const h2 = document.querySelector('h2'); -assert(h2.innerText === 'Coffee'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - -
-

CAMPER CAFE

-

Est. 2020

-
-
---fcc-editable-region-- -
-
---fcc-editable-region-- -
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md deleted file mode 100644 index d8e30eb293500e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5f344fc1520b6719f2e35605 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -There will be two sections on the menu, one for coffees and one for desserts. Add a `section` element within the `main` element so you have a place to put all the coffees available. - -# --hints-- - -You should have an opening `
` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `
` tag. - -```js -assert(code.match(/<\/section\s*>/i)); -``` - -You should not change your existing `main` element. Make sure you didn't delete the closing tag. - -```js -assert($('main').length === 1); -``` - -Your `section` element should be within your `main` element. - -```js -const main = document.querySelectorAll('main')?.[0]; -assert(main.children[0].tagName === 'SECTION'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - -
-

CAMPER CAFE

-

Est. 2020

-
---fcc-editable-region-- -
-
---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md deleted file mode 100644 index 86db9ec58001fa..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5f3477ae34c1239cafe128be -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -You now have three type selectors with the exact same styling. You can add the same group of styles to many elements by separating the selectors with commas like this: - -```css -selector1, selector2 { - property: value; -} -``` - -Use a single type selector to center the `h1`, `h2` and `p` elements at the same time. - -# --hints-- - -You should use a single type selector for all three elements, `h1, h2, p`. Be sure to use that order. - -```js -const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p'); -assert(hasSelector); -``` - -You should only have one selector in your `style` element. - -```js -const selectors = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.selectorText) -assert(selectors.length === 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu ---fcc-editable-region-- - ---fcc-editable-region-- - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md deleted file mode 100644 index eeb15e2e618e55..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: 5f3477ae8466a9a3d2cc953c -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Now that you have the CSS in the `styles.css` file, go ahead and remove the `style` element and all its content. Once it is removed, the text that was centered will shift back to the left. - -# --hints-- - -You should not have any `style` tags in your code. - -```js -assert(!code.match(/style/i)); -``` - -You should not have any CSS selectors in your HTML file. - -```js -(getUserInput) => { - const html = getUserInput('editableContents'); - assert(!html.includes('style')); - assert(!html.includes('text-align')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - Cafe Menu - - ---fcc-editable-region-- - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - -```css -h1, h2, p { - text-align: center; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md deleted file mode 100644 index d769760c199fae..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 5f3477ae9675db8bb7655b30 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -In the previous step, you used a type selector to style the `h1` element. Go ahead and center the `h2` and `p` elements with a new type selector for each one. - -# --hints-- - -You should not change the existing `h1` selector. - -```js -const hasH1 = new __helpers.CSSHelp(document).getStyle('h1'); -assert(hasH1); -``` - -You should add a new `h2` selector. - -```js -const hasH2 = new __helpers.CSSHelp(document).getStyle('h2'); -assert(hasH2); -``` - -You should add a new `p` selector. - -```js -const hasP = new __helpers.CSSHelp(document).getStyle('p'); -assert(hasP); -``` - -Your `h1` element should have a `text-align` of `center`. - -```js -const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align'); -assert(h1TextAlign === 'center'); -``` - -Your `h2` element should have a `text-align` of `center`. - -```js -const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align'); -assert(h2TextAlign === 'center'); -``` - -Your `p` element should have a `text-align` of `center`. - -```js -const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align'); -assert(pTextAlign === 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu ---fcc-editable-region-- - ---fcc-editable-region-- - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md deleted file mode 100644 index c91fab2553fb92..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 5f3477aefa51bfc29327200b -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -You have styled three elements by writing CSS inside the `style` tags. This works, but since there will be many more styles, it's best to put all the styles in a separate file and link to it. - -We have created a separate `styles.css` file for you and switched the editor view to that file. You can change between files with the tabs at the top of the editor. - -Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags. - -# --hints-- - -Your `styles.css` file should have the `h1, h2, p` type selector. - -```js -(getUserInput) => { - assert(getUserInput('editableContents').replace(/[\s\n]*/g, "").match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/)); -} -``` - -Your selector should set the `text-align` property to `center`. - -```js -(getUserInput) => { - assert(getUserInput('editableContents').match(/text-align:\s*center;?/)); -} -``` - -You should only have one selector. - -```js -(getUserInput) => { - assert(getUserInput('editableContents').match(/text-align:\s*center;?/)?.length === 1); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md deleted file mode 100644 index f2af63ca109be9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 5f3477cb2e27333b1ab2b955 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Now you need to link the `styles.css` file so the styles will be applied again. Nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. - -# --hints-- - -Your code should have a `link` element. - -```js -// link is removed -> if exists, replaced with style -const link = document.querySelector('head > style'); -assert(link); -``` - -You should not change your existing `head` element. Make sure you did not delete the closing tag. - -```js -assert($('head').length === 1); -``` - -Your `link` element should be a self-closing element. - -```js -assert(code.match(//i)); -``` - -Your `link` element should be within your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert(code.match(/rel=('|")stylesheet\1/i)); -``` - -Your `link` element should have a `type` attribute with the value `text/css`. - -```js -assert(code.match(/type=('|")text\/css\1/i)); -``` - -Your `link` element should have an `href` attribute with the value `styles.css`. - -```js -assert(code.match(/href=('|")styles.css\1/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - Cafe Menu - ---fcc-editable-region-- - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - -```css -h1, h2, p { - text-align: center; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md deleted file mode 100644 index d160b6a7ec8b86..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 5f3477cb303c5cb61b43aa9b -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -The text is centered again so the link to the CSS file is working. Add another style to the file that changes the `background-color` property to `brown` for the `body` element. - -# --hints-- - -You should use a `body` selector. - -```js -const hasBody = new __helpers.CSSHelp(document).getStyle('body'); -assert(hasBody); -``` - -You should set the `background-color` property to `brown`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown'); -assert(hasBackground); -``` - -Your `body` element should have a `brown` background. - -```js -const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color'); -assert(bodyBackground === 'brown'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - -```css ---fcc-editable-region-- -h1, h2, p { - text-align: center; -} ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md deleted file mode 100644 index fad3c0ca42c26f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: 5f3477cbcb6ba47918c1da92 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -For the styling of the page to look similar on mobile as it does on a desktop or laptop, you need to add a `meta` element with a special `content` attribute. - -Add the following within the `head` element: - -```html - -``` - -# --hints-- - -Your code should have two `meta` elements. - -```js -assert(code.match(//g).length === 2); -``` - -Your `meta` element should have a `name` attribute with a value of `viewport`. - -```js -const meta = $('meta'); -assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/)); -``` - -Your `meta` element should have a `content` attribute with a value of `width=device-width, initial-scale=1.0`. - -```js -const meta = $('meta'); -assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - Cafe Menu - - ---fcc-editable-region-- - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - -```css -h1, h2, p { - text-align: center; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md deleted file mode 100644 index 0f5b925b09eac0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 5f34a1fd611d003edeafd681 -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -That brown background makes it hard to read the text. Change the `body` element's background color to be `burlywood` so it has some color but you are still be able to read the text. - -# --hints-- - -You should set the `background-color` property to `burlywood`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood'); -assert(hasBackground); -``` - -Your `body` element should have a `burlywood` background. - -```js -const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color'); -assert(bodyBackground === 'burlywood'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - -```css ---fcc-editable-region-- -body { - background-color: brown; -} ---fcc-editable-region-- -h1, h2, p { - text-align: center; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md deleted file mode 100644 index 1856677d582df6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 5f356ed60785e1f3e9850b6e -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Now it's easy to see that the text is centered inside the `div` element. Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`). - -# --hints-- - -You should set the `width` property to `80%`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%'); -assert(hasWidth); -``` - -You should not have a `width` property of `300px`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px'); -assert(!hasWidth); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { - /* - background-color: burlywood; - */ -} - -h1, h2, p { - text-align: center; -} ---fcc-editable-region-- -div { - width: 300px; - background-color: burlywood; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md deleted file mode 100644 index 100245544daded..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 5f356ed60a5decd94ab66986 -title: Step 23 -challengeType: 0 -removeComments: false -dashedName: step-23 ---- - -# --description-- - -Comments in CSS look like this: - -```css -/* comment here */ -``` - -In your style sheet, comment out the the line containing the `background-color` property and value, so you can see the effect of only styling `div` element. This will make the background white again. - -# --hints-- - -You should comment out the `background-color: burlywood;` line in your CSS. - -```js -assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i)); -``` - - -Your `body` should have a white background. - -```js -const bodyCSS = $('body').css('background-color'); -assert(bodyCSS === "rgba(0, 0, 0, 0)") -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { ---fcc-editable-region-- - background-color: burlywood; ---fcc-editable-region-- -} - -h1, h2, p { - text-align: center; -} - -div { - width: 300px; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md deleted file mode 100644 index 3fd01dfbbbfa81..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 5f356ed6199b0cdef1d2be8f -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -So far you have been using type selectors to style elements. A class selector is defined by a name with a dot directly in front it, like this: - -```css -.class-name { - styles -} -``` - -Change the existing `div` selector into a class selector by replacing `div` with a class named `menu`. - -# --hints-- - -You should have a `.menu` class selector. - -```js -const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu'); -assert(hasMenu); -``` - -You should not have a `div` selector. - -```js -const hasDiv = new __helpers.CSSHelp(document).getStyle('div'); -assert(!hasDiv); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { - /* - background-color: burlywood; - */ -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -div { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md deleted file mode 100644 index 8a66f3a4416388..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: 5f356ed63c7807a4f1e6d054 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -The goal now is to make the `div` not take up the entire width of the page. The CSS `width` property is perfect for this. Create a new type selector in the style sheet that gives your `div` element a width of `300px`. - -# --hints-- - -You should have a `div` type selector. - -```js -const hasDiv = new __helpers.CSSHelp(document).getStyle('div'); -assert(hasDiv); -``` - -You should set the `width` property to `300px`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px'); -assert(hasWidth); -``` - -Your `div` should have a width of 300px. - -```js -const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width'); -assert(divWidth === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css ---fcc-editable-region-- -body { - background-color: burlywood; -} - -h1, h2, p { - text-align: center; -} ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md deleted file mode 100644 index a7a1d36b1ecb59..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 5f356ed63e0fa262326eef05 -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Now make the background color of the `div` element to be `burlywood`. - -# --hints-- - -You should set the `background-color` property to `burlywood`. - -```js -const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood'); -assert(hasBackgroundColor); -``` - -Your `div` should have a burlywood background. - -```js -const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color'); -assert(divBackground === 'burlywood'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { - /* - background-color: burlywood; - */ -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -div { - width: 300px; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md deleted file mode 100644 index d77a93570d057c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: 5f356ed656a336993abd9f7c -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Next, you want to center the `div` horizontally. You can do this by setting its `margin-left` and `margin-right` properties to `auto`. Think of the margin as invisible space around an element. Using these two margin properties, center the `div` element within the `body` element. - -# --hints-- - -You should set the `margin-left` property to `auto`. - -```js -const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-left'] === 'auto'); -assert(hasMargin); -``` - -You should set the `margin-right` property to `auto`. - -```js -const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-right'] === 'auto'); -assert(hasMargin); -``` - -You should set the `margin-left` and `margin-right` properties of your `div` to `auto`. - -```js -const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right'); -const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left'); -assert(divMarginRight === 'auto'); -assert(divMarginLeft === 'auto'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { - /* - background-color: burlywood; - */ -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -div { - width: 80%; - background-color: burlywood; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md deleted file mode 100644 index 609f19c13ff732..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 5f356ed69db0a491745e2bb6 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -To apply the class's styling to the `div` element, add a `class` attribute to the `div` element's opening tag and set its value to `menu`. - -# --hints-- - -Your `div` should still render. Make sure you haven't malformed the `
` tag. - -```js -assert($('div').length === 1); -``` - -Your `div` element should have the `menu` class. - -```js -assert($('div').attr('class').includes('menu')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - ---fcc-editable-region-- -
---fcc-editable-region-- -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { - /* - background-color: burlywood; - */ -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md deleted file mode 100644 index 9332a9aa232289..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 5f356ed6cf6eab5f15f5cfe6 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a `div` element inside the `body` element and then move all the other elements inside the new `div`. - -# --hints-- - -You should have an opening `
` tag. - -```js -assert(code.match(/
/i)); -``` - -You should have a closing `
` tag. - -```js -assert(code.match(/<\/div>/i)); -``` - -You should not change your existing `body` element. Make sure you did not delete the closing tag. - -```js -assert($('body').length === 1); -``` - -Your `div` tag should be nested in the `body`. - -```js -const div = $('div')[0]; -assert(div.parentElement.tagName === 'BODY'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - ---fcc-editable-region-- - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- ---fcc-editable-region-- - -``` - -```css -body { - background-color: burlywood; -} - -h1, h2, p { - text-align: center; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md deleted file mode 100644 index 17627541adfe49..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: 5f35e5c4321f818cdc4bed30 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -It’s looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffee` heading. It will contain a flavor and price of each coffee you currently offer. - -# --hints-- - -You should have an opening `
` tag. - -```js -assert(code.match(/
/i)); -``` - -You should have a closing `
` tag. - -```js -assert(code.match(/<\/article>/i)); -``` - -You should not change the existing `h2` element. - -```js -assert($('h2').length === 1); -``` - -Your `article` element should come after your `h2` element. - -```js -const article = $('article')[0]; -assert(article.previousElementSibling.tagName === 'H2'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
---fcc-editable-region-- -

Coffee

---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md deleted file mode 100644 index 18e62d8d138877..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5f35e5c44359872a137bd98f -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Since the cafe's main product for sale is coffee, you could use an image of coffee beans for the background of the page. - -Delete the comment and its contents inside the `body` type selector. Now add a `background-image` property and set its value to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`. - -# --hints-- - -You should remove the commented out `background-color` property. - -```js -assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i)) -``` - -Your `body` selector should not have any comments. - -```js -assert(!code.match(/body\s*{\s*\/\*/i)); -``` - -You should set the `background-image` property to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`) -assert(hasBackground) -``` - -Your `body` element should have the coffee beans background image. - -```js -const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image'); -console.log(bodyBackground); -assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { ---fcc-editable-region-- - /* - background-color: burlywood; - */ ---fcc-editable-region-- -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md deleted file mode 100644 index b67c34ea357a49..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 5f3c866d0fc037f7311b4ac8 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -That's closer, but the price didn't stay over on the right. This is because `inline-block` elements only take up the width of their content. To spread them out, add a `width` property to the `flavor` and `price` class selectors that have a value of `50%` each. - -# --hints-- - -You should set the `width` property to `50%` in your `.flavor` selector. - -```js -const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); -assert(flavorWidth === '50%'); -``` - -You should set the `width` property to `50%` in your `.price` selector. - -```js -const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); -assert(priceWidth === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

-

3.00

-
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - ---fcc-editable-region-- -.flavor { - text-align: left; -} - -.price { - text-align: right; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md deleted file mode 100644 index 21fb53f2de5504..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5f3c866d28d7ad0de6470505 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -The flavors and prices are currently stacked on top of each other and centered with their respective `p` elements. It would be nice if the flavor was on the left and the price was on the right. - -Add the class name `flavor` to the `French Vanilla` `p` element. - -# --hints-- - -You should add the `flavor` class to your `p` element. - -```js -assert(code.match(//i)); -``` - -You should only have one element with the `flavor` class. - -```js -assert($('.flavor').length === 1); -``` - -Your `flavor` class should be on the `p` element with the text `French Vanilla`. - -```js -assert($('.flavor')[0].innerText.match(/French Vanilla/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
---fcc-editable-region-- -

French Vanilla

-

3.00

---fcc-editable-region-- -
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md deleted file mode 100644 index e3d3a54656c273..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5f3c866d5414453fc2d7b480 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Starting below the existing coffee/price pair, add the following coffee and prices using `article` elements with two nested `p` elements inside each. As before, the first `p` element's text should contain the coffee flavor and the second `p` element's text should contain the price. - -```bash -Caramel Macchiato 3.75 -Pumpkin Spice 3.50 -Hazelnut 4.00 -Mocha 4.50 -``` - -# --hints-- - -You should have five `article` elements. - -```js -assert($('article').length === 5); -``` - -Each `article` element should have two `p` elements. - -```js -const articles = $('article'); -assert(articles[0].children.length === 2); -assert(articles[1].children.length === 2); -assert(articles[2].children.length === 2); -assert(articles[3].children.length === 2); -assert(articles[4].children.length === 2); -``` - -Your first `article` element should have `p` elements with the text `French Vanilla` and `3.00`. - -```js -const children = $('article')[0].children; -assert(children[0].innerText.match(/French Vanilla/i)); -assert(children[1].innerText.match(/3\.00/i)); -``` - -Your second `article` element should have `p` elements with the text `Caramel Macchiato` and `3.75`. - -```js -const children = $('article')[1].children; -assert(children[0].innerText.match(/Caramel Macchiato/i)); -assert(children[1].innerText.match(/3\.75/i)); -``` - -Your third `article` element should have `p` elements with the text `Pumpkin Spice` and `3.50`. - -```js -const children = $('article')[2].children; -assert(children[0].innerText.match(/Pumpkin Spice/i)); -assert(children[1].innerText.match(/3\.50/i)); -``` - -Your fourth `article` element should have `p` elements with the text `Hazelnut` and `4.00`. - -```js -const children = $('article')[3].children; -assert(children[0].innerText.match(/Hazelnut/i)); -assert(children[1].innerText.match(/4\.00/i)); -``` - -Your fifth `article` element should have `p` elements with the text `Mocha` and `4.50`. - -```js -const children = $('article')[4].children; -assert(children[0].innerText.match(/Mocha/i)); -assert(children[1].innerText.match(/4\.50/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

---fcc-editable-region-- -
-

French Vanilla

-

3.00

-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md deleted file mode 100644 index 0c996c720a714a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5f3c866daec9a49519871816 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -`article` elements commonly contain multiple elements that have related information. In this case, it will contain a coffee flavor and a price for that flavor. Nest two `p` elements inside your `article` element. The first one's text should be `French Vanilla`, and the second's text `3.00`. - -# --hints-- - -You should not change the existing `article` element. - -```js -assert($('article').length === 1); -``` - -Your `article` element should have two `p` elements. - -```js -assert($('article').children('p').length === 2); -``` - -Your first `p` element should have the text `French Vanilla`. - -```js -const firstP = $('article').children('p')[0]; -assert(firstP.innerText.match(/French Vanilla/i)); -``` - -Your second `p` element should have the text `3.00`. - -```js -const secondP = $('article').children('p')[1]; -assert(secondP.innerText.match(/3\.00/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

---fcc-editable-region-- -
-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md deleted file mode 100644 index 0f0667fcf82a29..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5f3c866dbf362f99b9a0c6d0 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -The `p` elements are nested in an `article` element with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this: - -```css -.item p { } -``` - -Using the above selector, add a `display` property with value `inline-block` so the `p` elements behave more like `inline` elements. - -# --hints-- - -You should use the `.item p` selector. - -```js -const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p'); -assert(hasItemP); -``` - -You should set the `display` property to `inline-block`. - -```js -const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block'); -assert(hasDisplay); -``` - -Your `.item p` selector should set the `display` property to `inline-block`. - -```js -const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display'); -assert(itemPDisplay === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

-

3.00

-
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.flavor { - text-align: left; -} - -.price { - text-align: right; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md deleted file mode 100644 index 7c60b65d7f728a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -id: 5f3c866dd0d0275f01d4d847 -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Well that did not work. Styling the `p` elements as `inline-block` and placing them on separate lines in the code creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p` element's width a little less than `50%`. - -Change the `width` value to `49%` for each class to see what happens. - -# --hints-- - -You should set the `width` property to `49%` in your `.flavor` selector. - -```js -const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); -assert(flavorWidth === '49%'); -``` - -You should set the `width` property to `49%` in your `.price` selector. - -```js -const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); -assert(priceWidth === '49%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

-

3.00

-
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - ---fcc-editable-region-- -.flavor { - text-align: left; - width: 50%; -} - -.price { - text-align: right; - width: 50%; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md deleted file mode 100644 index ba075075c17109..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -id: 5f3c866de7a5b784048f94b1 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -That is kind of what you want, but now it would be nice if the flavor and price were on the same line. `p` elements are block-level elements, so they take up the entire width of their parent element. - -To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Add a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading. - -# --hints-- - -You should apply the `item` class to your `article` element. - -```js -assert(code.match(//i)) -``` - -You should only have one `item` class element. - -```js -assert($('.item').length === 1); -``` - -Your first `article` element should have the `item` class. - -```js -assert($('article')[0].className === 'item'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
---fcc-editable-region-- -

Coffee

-
-

French Vanilla

-

3.00

-
---fcc-editable-region-- -
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.flavor { - text-align: left; -} - -.price { - text-align: right; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md deleted file mode 100644 index 64649e6bbefe2f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -id: 5f3cade94c6576e7f7b7953f -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Now go ahead and change both the `flavor` and `price` class' widths to be `50%` again. - -# --hints-- - -You should set the `width` property to `50%` in your `.flavor` selector. - -```js -const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); -assert(flavorWidth === '50%'); -``` - -You should set the `width` property to `50%` in your `.price` selector. - -```js -const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); -assert(priceWidth === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - ---fcc-editable-region-- -.flavor { - text-align: left; - width: 49%; -} - -.price { - text-align: right; - width: 49%; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md deleted file mode 100644 index 0b0c90b7d3fcbf..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5f3cade9993019e26313fa8e -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Now that you know it works, you can change the remaining `article` and `p` elements to match the first set. Start by adding the class `item` to the other `article` elements. - -# --hints-- - -You should only have five `article` elements. - -```js -assert($('article').length === 5); -``` - -You should only have five `.item` elements. - -```js -assert($('.item').length === 5); -``` - -Your `.item` elements should be your `article` elements. - - -```js -const articles = $('article'); -const items = $('.item'); -assert(articles[0] === items[0]); -assert(articles[1] === items[1]); -assert(articles[2] === items[2]); -assert(articles[3] === items[3]); -assert(articles[4] === items[4]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
---fcc-editable-region-- -
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 50%; -} - -.price { - text-align: right; - width: 50%; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md deleted file mode 100644 index eaebcbe1ca83e4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5f3cade99dda4e6071a85dfd -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -You will come back to styling the menu in a few steps, but for now, go ahead and add a second `section` element below the first for displaying the desserts offered by the cafe. - -# --hints-- - -You should have an opening `section` tag. - -```js -assert(code.match(/
/ig).length === 2); -``` - -You should have a closing `section` tag. - -```js -assert(code.match(/<\/section>/ig).length === 2); -``` - -You should not change the existing `main` element. - -```js -assert($('main').length === 1); -``` - -Your new `section` element should be nested in the `main` element. - -```js -assert($('main').children('section').length === 2); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
---fcc-editable-region-- -
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
---fcc-editable-region-- -
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md deleted file mode 100644 index 7e136fd4e661b4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5f3cade9fa77275d9f4efe62 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -That worked, but there is still a little space on the right of the price. - -You could keep trying various percentages for the widths. Instead, simply move the price `p` element to be on the same line and make sure there is no space between them. - -# --hints-- - -Your `p` elements should not have any space between them. - -```js -assert(code.match(/Vanilla<\/p>

- - - - - Cafe Menu - - - -

-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
---fcc-editable-region-- -

French Vanilla

-

3.00

---fcc-editable-region-- -
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 49%; -} - -.price { - text-align: right; - width: 49%; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md deleted file mode 100644 index dd2cdc2e911485..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5f3ef6e01f288a026d709587 -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -You can use an `hr` element to display a divider between sections of different content. - -First, add an `hr` element between the first `header` element and the `main` element. Note that `hr` elements are self closing. - -# --hints-- - -You should add an `hr` element. `hr` elements are self-closing. - -```js -assert(code.match(//i)); -assert(!code.match(/<\/hr>/i)); -``` - -You should not change your existing `header` element. - -```js -assert($('header').length === 1); -``` - -You should not change your existing `main` element. - -```js -assert($('main').length === 1); -``` - -Your `hr` element should be between your `header` element and your `main` element. - -```js -assert($('hr')[0].previousElementSibling.tagName === 'HEADER'); -assert($('hr')[0].nextElementSibling.tagName === 'MAIN'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
---fcc-editable-region-- -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
---fcc-editable-region-- - -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md deleted file mode 100644 index e392a64534507b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5f3ef6e03d719d5ac4738993 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -The current width of the menu will always take up 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices. - -Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide. - -# --hints-- - -You should set the `max-width` property to `500px`. - -```js -const hasMaxWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['max-width'] === '500px'); -assert(hasMaxWidth); -``` - -Your `.menu` element should have a `max-width` of `500px`. - -```js -const menuMaxWidth = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('max-width'); -assert(menuMaxWidth === '500px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; -} ---fcc-editable-region-- - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md deleted file mode 100644 index 53677de55b31d0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5f3ef6e04559b939080db057 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Since all 4 sides of the menu have the same internal spacing, go ahead and delete the four properties and use a single `padding` property with the value `20px`. - -# --hints-- - -You should remove the `padding-left` property. - -```js -assert(!code.match(/padding-left/i)); -``` - -You should remove the `padding-right` property. - -```js -assert(!code.match(/padding-right/i)); -``` - -You should remove the `padding-top` property. - -```js -assert(!code.match(/padding-top/i)); -``` - -You should remove the `padding-bottom` property. - -```js -assert(!code.match(/padding-bottom/i)); -``` - -You should set the `padding` property to `20px`. - -```js -const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding'] === '20px'); -assert(hasPadding); -``` - -Your `.menu` element should have a `padding` value of `20px`. - -```js -const menuPadding = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding'); -assert(menuPadding === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding-left: 20px; - padding-right: 20px; - padding-top: 20px; - padding-bottom: 20px; -} ---fcc-editable-region-- - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md deleted file mode 100644 index f4065ad6fbc3b3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 5f3ef6e050279c7a4a7101d3 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -That looks better. Now try to add the same `20px` padding to the top and bottom of the menu. - -# --hints-- - -You should not remove the `padding-left` or `padding-right` properties. - -```js -const paddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left'); -assert(paddingLeft === '20px'); -const paddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right'); -assert(paddingRight === '20px'); -``` - -You should set the `padding-top` property to `20px`. - -```js -const hasPaddingTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px'); -assert(hasPaddingTop); -``` - -You should set the `padding-bottom` property to `20px`. - -```js -const hasPaddingBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px'); -assert(hasPaddingBottom); -``` - -Your `.menu` element should have a `padding-top` of `20px`. - -```js -const menuPaddingTop = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-top'); -assert(menuPaddingTop === '20px'); -``` - -Your `.menu` element should have a `padding-bottom` of `20px`. - -```js -const menuPaddingBottom = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-bottom'); -assert(menuPaddingBottom === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding-left: 20px; - padding-right: 20px; -} ---fcc-editable-region-- - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md deleted file mode 100644 index 43f04fdee5620c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 5f3ef6e05473f91f948724ab -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -You can change the `font-family` of text, to make it look different from the default font of your browser. Each browser has some common fonts available to it. - -Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable. - -# --hints-- - -You should set the `font-family` property to `sans-serif`. - -```js -const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'sans-serif'); -``` - -Your `body` should have a `font-family` of `sans-serif`. - -```js -const bodyFontFamily = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family'); -assert(bodyFontFamily === 'sans-serif'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} ---fcc-editable-region-- - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md deleted file mode 100644 index 73e18cac5cb559..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5f3ef6e056bdde6ae6892ba2 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector. - -Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font. - -# --hints-- - -You should use an `h1, h2` selector. - -```js -const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2'); -assert(h1h2Selector); -``` - -You should set the `font-family` to `Impact`. - -```js -const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'Impact'); -assert(hasFontFamily); -``` - -Your `h1` element should have a `font-family` of `Impact`. - -```js -assert($('h1').css('font-family').match(/impact/i)); -``` - -Your `h2` element should have a `font-family` of `Impact`. - -```js -assert($('h2').css('font-family').match(/impact/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md deleted file mode 100644 index 3d1c00d719474b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 5f3ef6e06d34faac0447fc44 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`. - -# --hints-- - -You should have an `.established` selector. - -```js -const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established'); -assert(hasEstablished); -``` - -You should set the `font-style` property to `italic`. - -```js -const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic'); -assert(hasFontStyle); -``` - -Your `.established` selector should set the `font-style` property to `italic`. - -```js -const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style'); -assert(establishedFontStyle === 'italic'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md deleted file mode 100644 index 3ba035861e4a95..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 5f3ef6e07276f782bb46b93d -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Add a `footer` element below the `main` element, where you can add some additional information. - -# --hints-- - -You should have an opening `
` tag. - -```js -assert(code.match(/
/i)); -``` - -You should have a closing `
` tag. - -```js -assert(code.match(/<\/footer>/i)); -``` - -You should not modify the existing `main` element. - -```js -assert($('main').length === 1); -``` - -Your `footer` element should be below your `main` element. - -```js -const footer = $('footer')[0] -assert(footer.previousElementSibling.tagName === 'MAIN'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
---fcc-editable-region-- -
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
---fcc-editable-region-- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md deleted file mode 100644 index 9bb21537138d5e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -id: 5f3ef6e0819d4f23ca7285e6 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Add an empty `article` element under the `Desserts` heading. Give it a `class` attribute with the value `item`. - -# --hints-- - -You should not change your existing `h2` element. - -```js -assert($('h2').length === 2); -``` - -Your `article` element should be below your `h2` element. - -```js -assert($('section')[1].children[1].tagName === 'ARTICLE'); -``` - -Your new `article` element should have the `item` class. - -```js -assert($('section')[1].children[1].className === 'item'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
---fcc-editable-region-- -

Desserts

---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md deleted file mode 100644 index a2c17972072603..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 5f3ef6e087d56ed3ffdc36be -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Now apply the `established` class to the `Est. 2020` text. - -# --hints-- - -You should set the `class` of the `p` element to `established`. - -```js -assert(code.match(/

/i)); -``` - -Your `established` class should be on the element with the text `Est. 2020`. - -```js -const established = $('.established'); -assert(established[0].innerText.match(/Est\.\s2020/i)); -``` - -Your `established` class element should have italic text. - -```js -assert($('.established').css('font-style') === 'italic'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -

---fcc-editable-region-- -
-

CAMPER CAFE

-

Est. 2020

-
---fcc-editable-region-- -
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md deleted file mode 100644 index 2b714a387a11e1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5f3ef6e0a81099d9a697b550 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Inside the `footer`, add a `p` element. Then, nest an anchor (`a`) element in the `p` that links to `https://www.freecodecamp.org` and has the text `Visit our website`. - -# --hints-- - -You should not modify the existing `footer` element. - -```js -assert($('footer').length === 1); -``` - -Your new `p` element should be nested within your `footer` element. - -```js -assert($('footer').children('p').length === 1); -``` - -Your new `a` element should be nested within your new `p` element. - -```js -assert($('footer').children('p').children('a').length === 1); -``` - -Your new `a` element should have the text `Visit our website`. - -```js -assert($('footer').find('a')[0].innerText.match(/Visit our website/i)); -``` - -Your new `a` element should link to `https://www.freecodecamp.org`. Remember that `a` elements use the `href` attribute to create a link. - -```js -assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
---fcc-editable-region-- -
-
---fcc-editable-region-- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md deleted file mode 100644 index 5aee284b1c7476..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5f3ef6e0b431cc215bb16f55 -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Add a second `p` element below the one with the link and give it the text `123 Free Code Camp Drive`. - -# --hints-- - -You should add a second `p` element to your `footer`. - -```js -assert($('footer').children('p').length === 2); -``` - -Your new `p` element should have the text `123 Free Code Camp Drive`. Make sure your new element comes after your existing element. - -```js -assert($('footer').children('p').last().text().match(/123 Free Code Camp Drive/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md deleted file mode 100644 index 782a0a1a3fd855..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5f3ef6e0e0c3feaebcf647ad -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Add an `h2` element in the new section and give it the text `Desserts`. - -# --hints-- - -You should not change your existing `section` element. - -```js -assert($('section').length === 2); -``` - -You should add an `h2` element in your second `section` element. - -```js -assert($('section')[1].children[0].tagName === 'H2'); -``` - -Your new `h2` element should have the text `Desserts`. - -```js -assert($('h2')[1].innerText.match(/Desserts/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
---fcc-editable-region-- -
-
---fcc-editable-region-- -
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md deleted file mode 100644 index 2ec85cfc90c35f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 5f3ef6e0e9629bad967cd71e -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -You can add a fallback value for the font-family by adding another font name separated by a comma. Fallbacks are used in instances where the initial is not found/available. - -Add the fallback font `serif` after the `Impact` font. - -# --hints-- - -You should add `serif` as a fallback for the `Impact` font. - -```js -const fontFamily = new __helpers.CSSHelp(document).getStyle('h1, h2')?.getPropertyValue('font-family'); -assert(fontFamily === 'Impact, serif'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- -h1, h2 { - font-family: Impact; -} ---fcc-editable-region-- - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md deleted file mode 100644 index 2a748c7e1204cf..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 5f3ef6e0eaa7da26e3d34d78 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -You can give your menu some space between the content and the sides with various `padding` properties. - -Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`. - -# --hints-- - -You should set the `padding-left` property to `20px`. - -```js -const hasPaddingLeft = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-left'] === '20px'); -assert(hasPaddingLeft); -``` - -You should set the `padding-right` property to `20px`. - -```js -const hasPaddingRight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-right'] === '20px'); -assert(hasPaddingRight); -``` - -Your `.menu` element should have a `padding-left` of `20px`. - -```js -const menuPaddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left'); -assert(menuPaddingLeft === '20px'); -``` - -Your `.menu` element should have a `padding-right` of `20px`. - -```js -const menuPaddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right'); -assert(menuPaddingRight === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} ---fcc-editable-region-- - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md deleted file mode 100644 index f37ce306fa4b2f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5f3ef6e0f8c230bdd2349716 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -The typography of heading elements (e.g. `h1`, `h2`) is set by default values of users' browsers. - -Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`. - -# --hints-- - -You should use an `h1` selector. - -```js -const hasH1 = new __helpers.CSSHelp(document).getStyle('h1'); -assert(hasH1); -``` - -You should use an `h2` selector. - -```js -const hasH2 = new __helpers.CSSHelp(document).getStyle('h2'); -assert(hasH2); -``` - -Your `h1` element should have a `font-size` of `40px`. - -```js -const h1FontSize = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size'); -assert(h1FontSize === '40px'); -``` - -Your `h2` element should have a `font-size` of `30px`. - -```js -const h2FontSize = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size'); -assert(h2FontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md deleted file mode 100644 index e82569968fa301..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5f3f26fa39591db45e5cd7a0 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -The default properties of an `hr` element will make it appear as a thin light grey line. You can change the height of the line by specifying a value for the `height` property. - -Change the height the `hr` element to be `3px`. - -# --hints-- - -You should use the `hr` selector. - -```js -const hasHr = new __helpers.CSSHelp(document).getStyle('hr'); -assert(hasHr); -``` - -You should set the `height` property to `3px`. - -```js -const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '3px'); -assert(hasHeight); -``` - -Your `hr` element should have a height of `3px`. - -```js -const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height'); -assert(hrHeight === '3px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md deleted file mode 100644 index 8bc7f8618fa0ce..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -id: 5f459225127805351a6ad057 -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans. - -# --hints-- - -You should set the value of the `background-color` property to `brown`. - -```js -const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown'); -``` - -Your `hr` element should have a `background-color` of `brown`. - -```js -const hrBackgroundColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('background-color'); -assert(hrBackgroundColor === 'brown'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- -hr { - height: 3px; -} ---fcc-editable-region-- - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md deleted file mode 100644 index f8754d121efccb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -id: 5f459a7ceb8b5c446656d88b -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Notice the grey color along the edges of the line. Those edges are known as borders. Each side of an element can have a different color or they can all be the same. - -Make all the edges of the `hr` element the same color as the background of it using the `border-color` property. - -# --hints-- - -You should set the `border-color` property to `brown`. - -```js -const hasBorderColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-color'] === 'brown'); -assert(hasBorderColor); -``` - -Your `hr` element should have a `border-color` of `brown`. - -```js -const hrBorderColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('border-color'); -assert(hrBorderColor === 'brown'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- -hr { - height: 3px; - background-color: brown; -} ---fcc-editable-region-- - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md deleted file mode 100644 index 9318a3d96f0078..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5f459cf202c2a3472fae6a9f -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Notice how the thickness of the line looks bigger? The default value of a property named `border-width` is `1px` for all edges of `hr` elements. By changing the border to the same color as the background, the total height of the line is `5px` (`3px` plus the top and bottom border width of `1px`). - -Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`. - -# --hints-- - -You should set the `height` property to `2px`. - -```js -const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '2px'); -assert(hasHeight); -``` - -Your `hr` element should have a `height` of `2px`. - -```js -const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height'); -assert(hrHeight === '2px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- -hr { - height: 3px; - background-color: brown; - border-color: brown; -} ---fcc-editable-region-- - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md deleted file mode 100644 index 18e09c92f4ac75..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5f459fd48bdc98491ca6d1a3 -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Go ahead and add another `hr` element between the `main` element and the `footer` element. - -# --hints-- - -You should add a second `hr` element. - -```js -assert($('hr').length === 2); -``` - -Your new `hr` element should be between the `main` element and the `footer` element. - -```js -assert($('hr')[1].previousElementSibling.tagName === 'MAIN'); -assert($('hr')[1].nextElementSibling.tagName === 'FOOTER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
---fcc-editable-region-- -
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
- ---fcc-editable-region-- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md deleted file mode 100644 index e2ad96cc7fb5f4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5f45a05977e2fa49d9119437 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -To create a little more room around the menu, add `20px` of space on the inside of the `body` element by using the `padding` property. - -# --hints-- - -You should set the `padding` property to `20px`. - -```js -assert(code.match(/padding:\s*20px;?/i)); -``` - -Your `body` element should have a `padding` of `20px`. - -```js -const bodyPadding = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('padding'); -assert(bodyPadding === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css ---fcc-editable-region-- -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} ---fcc-editable-region-- - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md deleted file mode 100644 index 7f647a1fd2a263..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5f45a276c093334f0f6e9df4 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Focusing on the menu items and prices, there is a fairly large gap between each line. - -Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`. - -# --hints-- - -You should set the `margin-top` property to `5px`. - -```js -const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '5px'); -assert(hasMarginTop); -``` - -You should set the `margin-bottom` property to `5px`. - -```js -const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px'); -assert(hasMarginBottom); -``` - -You should use the existing `.item p` selector. - -```js -const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p'); -assert(hasOneSelector.length === 1); -``` - -Your `p` elements nested in your `.item` elements should have a `margin-top` of `5px`. - -```js -const itemPMarginTop = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-top'); -assert(itemPMarginTop === '5px'); -``` - -Your `p` elements nested in your `.item` elements should have a `margin-bottom` of `5px`. - -```js -const itemPMarginBottom = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-bottom'); -assert(itemPMarginBottom === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - ---fcc-editable-region-- -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md deleted file mode 100644 index 1d5f6c9f49522f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -id: 5f45a5a7c49a8251f0bdb527 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Using the same style selector in the previous step, make the font size of the items and prices larger by using a value of `18px`. - -# --hints-- - -You should set the `font-size` property to `18px`. - -```js -const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '18px'); -assert(hasFontSize); -``` - -You should use the existing `.item p` selector. - -```js -const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p'); -assert(hasOneSelector.length === 1); -``` - -Your `p` elements nested in your `.item` elements should have a `font-size` of `18px`. - -```js -const itemPFontSize = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('font-size'); -assert(itemPFontSize === '18px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -h1, h2 { - font-family: Impact, serif; -} - ---fcc-editable-region-- -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; -} ---fcc-editable-region-- - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md deleted file mode 100644 index cef50b53eae8cd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 5f45a66d4a2b0453301e5a26 -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -Moving down to the `footer` element, make all the text have a value of `14px` for the font size. - -# --hints-- - -You should have a `footer` selector. - -```js -const hasFooter = new __helpers.CSSHelp(document).getStyle('footer'); -assert(hasFooter); -``` - -Your `footer` selector should be below your comment. - -```js -assert(code.match(/\/\*\s*FOOTER\s*\*\/\s*footer/i)); -``` - -You should set the `font-size` property to `14px`. - - -```js -const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '14px'); -assert(hasFontSize); -``` - -Your `footer` element should have a `font-size` of `14px`. - -```js -const footerFontSize = new __helpers.CSSHelp(document).getStyle('footer')?.getPropertyValue('font-size'); -assert(footerFontSize === '14px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md deleted file mode 100644 index 9b9b094d3e626e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5f45b0731d39e15d54df4dfc -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -The default color of a link that has not yet been clicked on is typically blue. The default color of a link that has already been visited from a page is typically purple. - -To make the `footer` links the same color regardless if a link has been visited, use a type selector for the anchor element (`a`) and use the value `black` for the `color` property. - -# --hints-- - -You should use an `a` selector. - -```js -const hasASelector = new __helpers.CSSHelp(document).getStyle('a'); -assert(hasASelector); -``` - -You should set the `color` property to `black`. - -```js -const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'black'); -``` - -Your `a` element should have a `color` of `black`. - -```js -const aColor = new __helpers.CSSHelp(document).getStyle('a')?.getPropertyValue('color'); -assert(aColor === 'black'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md deleted file mode 100644 index 24ee06943d9bcf..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5f45b25e7ec2405f166b9de1 -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -You change properties of a link when the link has actually been visited by using a pseudo-selector that looks like `a:visited { propertyName: propertyValue; }`. - -Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link. - -# --hints-- - -You should use the `a:visited` pseudoselector. - -```js -const hasAVisited = new __helpers.CSSHelp(document).getStyle('a:visited'); -assert(hasAVisited); -``` - -You should set the `color` property to `grey`. - -```js -const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => (x.style.color === 'grey' || x.style.color === 'gray')); -assert(hasColor); -``` - -Your `a:visited` should have a `color` of `grey`. - -```js -const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color'); -assert(aVisitedColor === 'grey' || aVisitedColor === 'gray'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -a { - color: black; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md deleted file mode 100644 index 9d856f647d8a56..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5f45b3c93c027860d9298dbd -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -You change properties of a link when the mouse hovers over them by using a pseudo-selector that looks like `a:hover { propertyName: propertyValue; }`. - -Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it. - -# --hints-- - -You should use the `a:hover` pseudoselector. - -```js -const hasAHover = new __helpers.CSSHelp(document).getStyle('a:hover'); -assert(hasAHover); -``` - -You should set the `color` property to `brown`. - -```js -const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'brown'); -assert(hasColor); -``` - -Your `a:hover` should have a `color` of `brown`. - -```js -const aHoverColor = new __helpers.CSSHelp(document).getStyle('a:hover')?.getPropertyValue('color'); -assert(aHoverColor === 'brown'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -a { - color: black; -} - -a:visited { - color: grey; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md deleted file mode 100644 index 9b72102e0718cd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5f45b45d099f3e621fbbb256 -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -You change properties of a link when the link is actually being clicked by using a pseudo-selector that looks like `a:active { propertyName: propertyValue; }`. - -Change the color of the footer `Visit our website` link to be `white` when clicked on. - -# --hints-- - -You should use the `a:active` pseudo-selector. - -```js -const hasAActive = new __helpers.CSSHelp(document).getStyle('a:active'); -assert(hasAActive); -``` - -You should set the `color` property to `white`. - -```js -const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'white'); -assert(hasColor); -``` - -Your `a:active` should have a `color` of `white`. - -```js -const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color'); -assert(aActiveColor === 'white'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -a { - color: black; -} - -a:visited { - color: grey; -} - -a:hover { - color: brown; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md deleted file mode 100644 index ee1a02c0412bf1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5f45b4c81cea7763550e40df -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -To keep with the same color theme you have already been using (black and brown), change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked. - -# --hints-- - -You should set the `color` property to `black` when the link is `visited`. - -```js -const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color'); -assert(aVisitedColor === 'black'); -``` - -You should set the `color` property to `brown` when the link is `active`. - -```js -const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color'); -assert(aActiveColor === 'brown'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -a { - color: black; -} - ---fcc-editable-region-- -a:visited { - color: grey; -} - -a:hover { - color: brown; -} - -a:active { - color: white; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md deleted file mode 100644 index f4bc71f4705fa3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5f45b715301bbf667badc04a -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -The menu text `CAMPER CAFE` has a different space from the top than the address at the bottom of the menu. This is due to the browser having some default top margin for the `h1` element. - -Change the top margin of the `h1` element to `0` to remove all the top margin. - -# --hints-- - -You should set the `margin-top` property to `0`. - -```js -const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '0px'); -assert(hasMarginTop); -``` - -Your `h1` element should have a `margin-top` of `0`. - -```js -const h1MarginTop = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-top'); -assert(h1MarginTop === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - ---fcc-editable-region-- -h1 { - font-size: 40px; -} ---fcc-editable-region-- - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md deleted file mode 100644 index 1971629a1597ec..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5f46e270702a8456a664f0df -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -To remove some of the vertical space between the `h1` element and the text `Est. 2020`, change the bottom margin of the `h1` to `15px`. - -# --hints-- - -You should set the `margin-bottom` property to `15px`. - -```js -const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '15px'); -assert(hasMarginBottom); -``` - -Your `h1` element should have a `margin-bottom` of `15px`. - -```js -const h1MarginBottom = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-bottom'); -assert(h1MarginBottom === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - ---fcc-editable-region-- -h1 { - font-size: 40px; - margin-top: 0; -} ---fcc-editable-region-- - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md deleted file mode 100644 index c60533c0468bd2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5f46e36e745ead58487aabf2 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element. - -To decrease the default margin space below the address `p` element, create a class selector named `address` and use the value `5px` for the `margin-bottom` property. - -# --hints-- - -You should add an `.address` selector. - -```js -const hasAddress = new __helpers.CSSHelp(document).getStyle('.address'); -assert(hasAddress); -``` - -You should set the `margin-bottom` property to `5px`. - -```js -const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px'); -assert(hasMarginBottom); -``` - -Your `.address` selector should have the `margin-bottom` property set to `5px`. - -```js -const addressMarginBottom = new __helpers.CSSHelp(document).getStyle('.address')?.getPropertyValue('margin-bottom'); -assert(addressMarginBottom === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md deleted file mode 100644 index dc287b59ec788b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -id: 5f46e7a4750dd05b5a673920 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Now apply the `address` class to the `p` element containing the address. - -# --hints-- - -You should apply the `class="address"` attribute. - -```js -assert(code.match(/class=('|")address\1/i)); -``` - -Your `.address` element should be your `p` element. - -```js -assert($('.address')[0].tagName === 'P'); -``` - -Your `.address` element should have the text `123 freeCodeCamp Drive`. - -```js -assert($('.address')[0].innerText.match(/123 Free Code Camp Drive/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -.address { - margin-bottom: 5px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md deleted file mode 100644 index d007f8d1dc2c69..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md +++ /dev/null @@ -1,194 +0,0 @@ ---- -id: 5f46e8284aae155c83015dee -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -The menu looks good, but other than the coffee beans background image, it is mainly just text. - -Under the `Coffee` heading, add an image using the url `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`. Give the image an `alt` value of `coffee icon`. - -# --hints-- - -You should have an `` tag. Remember that `img` elements are self-closing. - -```js -assert($('img').length === 1); -``` - -Your `img` element should have a `src` attribute of `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`. - -```js -assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg'); -``` - -Your `img` element should have an `alt` attribute of `coffee icon`. - -```js -assert($('img').attr('alt').match(/coffee icon/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
---fcc-editable-region-- -

Coffee

---fcc-editable-region-- -
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -.address { - margin-bottom: 5px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md deleted file mode 100644 index 75448e38e9dd40..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5f46ede1ff8fec5ba656b44c -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -Next you are going to be styling the `footer` element. To keep the CSS organized, add a comment at the end of `styles.css` with the text `FOOTER`. - -# --hints-- - -You should have a CSS comment with the text `FOOTER`. - -```js -assert(code.match(/\/\*\s*FOOTER\s*\*\//i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
-

- Visit our website -

-

123 Free Code Camp Drive

-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md deleted file mode 100644 index 2e46c97c19c7d4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 5f46fc57528aa1c4b5ea7c2e -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Changing the `margin-bottom` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffee` heading. - -Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property. - -# --hints-- - -You should add a `.bottom-line` selector. - -```js -const hasBottomLine = new __helpers.CSSHelp(document).getStyle('.bottom-line'); -assert(hasBottomLine); -``` - -You should set the `margin-top` property to `25px`. - -```js -const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '25px'); -assert(hasMarginTop); -``` - -Your `.bottom-line` selector should have a `margin-top` of `25px`. - -```js -const bottomLineMargin = new __helpers.CSSHelp(document).getStyle('.bottom-line')?.getPropertyValue('margin-top'); -assert(bottomLineMargin === '25px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md deleted file mode 100644 index cb1d67976feb40..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5f4701b942c824109626c3d8 -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -Now add the `bottom-line` class to the second `hr` element so the styling is applied. - -# --hints-- - -You should apply the `class="bottom-line"` property. - -```js -assert(code.match(/class=('|")bottom-line\1/i)); -``` - -Your `bottom-line` class should be applied to your second `hr` element. - -```js -assert($('hr')[1].className === 'bottom-line'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- - -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md deleted file mode 100644 index 59baa48d2aec45..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -id: 5f475bb508746c16c9431d42 -title: Step 90 -challengeType: 0 -dashedName: step-90 ---- - -# --description-- - -The image you added is not centered horizontally like the `Coffee` heading above it. `img` elements are "like" inline elements. - -To make the image behave like heading elements (which are block-level), create an `img` type selector and use the value `block` for the `display` property and use the applicable `margin-left` and `margin-right` values to center it horizontally. - -# --hints-- - -You should use an `img` selector. - -```js -const hasImg = new __helpers.CSSHelp(document).getStyle('img'); -assert(hasImg); -``` - -You should set the `display` property to `block`. - -```js -const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'block'); -assert(hasDisplay); -``` - -You should set the `margin-left` property to `auto`. - -```js -const marginLeftFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-left'] === 'auto'); -assert(marginLeftFilter.length === 2); -``` - -You should set the `margin-right` property to `auto`. - -```js -const marginRightFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-right'] === 'auto'); -assert(marginRightFilter.length === 2); -``` - -Your `img` element should have a `display` of `block`. - -```js -const imgDisplay = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('display'); -assert(imgDisplay === 'block'); -``` - -Your `img` element should have a `margin-left` and `margin-right` of `auto`. - -```js -const imgMarginLeft = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-left'); -assert(imgMarginLeft === 'auto'); -const imgMarginRight = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-right'); -assert(imgMarginRight === 'auto'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

- coffee icon -
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -.address { - margin-bottom: 5px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md deleted file mode 100644 index 5709ef5c8fcd3c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5f475e1c7f71a61d913836c6 -title: Step 91 -challengeType: 0 -dashedName: step-91 ---- - -# --description-- - -Add one last image under the `Desserts` heading using the url `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`. Give the image an `alt` value of `pie icon`. - -# --hints-- - -You should add a second `img` element. - -```js -assert($('img').length === 2); -``` - -Your new `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`. - -```js -assert($('img').last().attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg'); -``` - -Your new `img` element should have an `alt` of `pie icon`. - -```js -assert($('img').last().attr('alt').match(/pie icon/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

- coffee icon -
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
---fcc-editable-region-- -

Desserts

---fcc-editable-region-- -
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -img { - display: block; - margin-left: auto; - margin-right: auto; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25%; -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -.address { - margin-bottom: 5px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md deleted file mode 100644 index 76aebf496934ad..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: 5f47633757ae3469f2d33d2e -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space. - -Since you know the prices on the right have significantly fewer characters, change the `flavor` class `width` value to be `75%` and the `price` class `width` value to be `25%`. - -# --hints-- - -You should set the `width` property to `75%` in your `.flavor` selector. - -```js -const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); -assert(flavorWidth === '75%'); -``` - -You should set the `width` property to `25%` in your `.price` selector. - -```js -const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); -assert(priceWidth === '25%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - ---fcc-editable-region-- -.flavor { - text-align: left; - width: 50%; -} - -.price { - text-align: right; - width: 50%; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md deleted file mode 100644 index 7b68e75ead5fe4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 5f47fe7e31980053a8d4403b -title: Step 92 -challengeType: 0 -dashedName: step-92 ---- - -# --description-- - -It would be nice if the vertical space between the `h2` elements and their associated icons was smaller. The `h2` elements have default top and bottom margin space, so you could change the bottom margin of the `h2` elements to say `0` or another number. - -There is an easier way, simply add a negative top margin to the `img` elements to pull them up from their current positions. Negative values are created using a `-` in front of the value. To complete this project, go ahead and use a negative top margin of `25px` in the `img` type selector. - -# --hints-- - -You should set the `margin-top` property to `-25px`. - -```js -const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '-25px'); -assert(hasMarginTop); -``` - -Your `img` elements should have a `margin-top` value of `-25px`. - -```js -const imgMarginTop = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-top'); -assert(imgMarginTop === '-25px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

- coffee icon -
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

- pie icon -
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- -img { - display: block; - margin-left: auto; - margin-right: auto; -} ---fcc-editable-region-- - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25%; -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -.address { - margin-bottom: 5px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - -# --solutions-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

- coffee icon -
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

- pie icon -
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinnamon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -img { - display: block; - margin-left: auto; - margin-right: auto; - margin-top: -25px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25%; -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -.address { - margin-bottom: 5px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md deleted file mode 100644 index 9eb535b31e8864..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5f716ad029ee4053c7027a7a -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Nest two `p` elements inside your `article` element. The first one's text should be `Donut`, and the second's text `1.50`. Put both of them on the same line making sure there is no space between them. - -# --hints-- - -You should not change your existing `article` element. - -```js -assert($('article').length === 6); -``` - -Your new `article` element should have two `p` elements. - -```js -assert($('article').last().children('p').length === 2); -``` - -Your first `p` element should have the text `Donut`. - -```js -assert($('article').last().children('p')[0].innerText.match(/Donut/i)); -``` - -Your second `p` element should have the text `1.50`. - -```js -assert($('article').last().children('p')[1].innerText.match(/1\.50/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

---fcc-editable-region-- -
-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md deleted file mode 100644 index 16855858d71152..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -id: 5f716bee5838c354c728a7c5 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Below the dessert you just added, add the rest of the desserts and prices using three more `article` elements, each with two nested `p` elements. Each element should have the correct dessert and price text, and all of them should have the correct classes. - -```bash -Cherry Pie 2.75 -Cheesecake 3.00 -Cinnamon Roll 2.50 -``` - -# --hints-- - -You should have four `.dessert` elements. - -```js -assert($('.dessert').length === 4); -``` - -You should have four new `.price` elements. - -```js -assert($('section').last().find('.price').length === 4); -``` - -Your `section` element should have eight `p` elements. - -```js -assert($('section').last().find('p').length === 8); -``` - -Your `.dessert` elements should have the text `Donut`, `Cherry Pie`, `Cheesecake`, and `Cinnamon Roll`. - -```js -const dessert = $('.dessert'); -assert(dessert[0].innerText.match(/donut/i)); -assert(dessert[1].innerText.match(/cherry pie/i)); -assert(dessert[2].innerText.match(/cheesecake/i)); -assert(dessert[3].innerText.match(/cinnamon roll/i)); -``` - -Your new `.price` elements should have the text `1.50`, `2.75`, `3.00`, and `2.50`. - -```js -const prices = $('section').last().find('.price'); -assert(prices[0].innerText.match(/1\.50/)); -assert(prices[1].innerText.match(/2\.75/)); -assert(prices[2].innerText.match(/3\.00/)); -assert(prices[3].innerText.match(/2\.50/)); -``` - -You should not have any spaces between your `p` elements. - -```js -assert(!code.match(/<\/p>\s+

- - - - - Cafe Menu - - - -

-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

---fcc-editable-region-- -
-

Donut

1.50

-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md deleted file mode 100644 index aed7ab9240d672..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5f7691dafd882520797cd2f0 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Next, position the other `p` elements to be on the same line with no space between them. - -# --hints-- - -You should not have any spaces between your `p` elements. - -```js -assert(!code.match(/<\/p>\s+

- - - - - Cafe Menu - - - -

-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
---fcc-editable-region-- -
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 50%; -} - -.price { - text-align: right; - width: 50%; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md deleted file mode 100644 index f70f580db64241..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 5f7692f7c5b3ce22a57788b6 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -To complete the styling, add the applicable class names `flavor` and `price` to all the remaining `p` elements. - -# --hints-- - -You should have five `.flavor` elements. - -```js -assert($('.flavor').length === 5); -``` - -You should have five `.price` elements. - -```js -assert($('.price').length === 5); -``` - -Your `.flavor` elements should be your `p` elements with the text `French Vanilla`, `Caramel Macchiato`, `Pumpkin Spice`, `Hazelnut`, and `Mocha`. - -```js -const p = $('p'); -const flavor = $('.flavor'); -assert(p[1] === flavor[0]); -assert(p[3] === flavor[1]); -assert(p[5] === flavor[2]); -assert(p[7] === flavor[3]); -assert(p[9] === flavor[4]); -``` - -Your `.price` elements should be your `p` elements with the text `3.00`, `3.75`, `3.50`, `4.00`, and `4.50`. - -```js -const p = $('p'); -const price = $('.price'); -assert(p[2] === price[0]); -assert(p[4] === price[1]); -assert(p[6] === price[2]); -assert(p[8] === price[3]); -assert(p[10] === price[4]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
---fcc-editable-region-- -
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 50%; -} - -.price { - text-align: right; - width: 50%; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md deleted file mode 100644 index 855f82c8a908d3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5f769541be494f25449b292f -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Using your new `flavor` class as a selector, set the `text-align` property's value to `left`. - -# --hints-- - -You should have a `flavor` class selector. - -```js -const hasFlavor = new __helpers.CSSHelp(document).getStyle('.flavor'); -assert(hasFlavor); -``` - -You should set the `text-align` property to `left`. - -```js -const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'left'); -assert(hasTextAlign); -``` - -Your `flavor` class selector should set the `text-align` property to `left`. - -```js -const flavorTextAlign = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('text-align'); -assert(flavorTextAlign === 'left'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

-

3.00

-
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md deleted file mode 100644 index 34cfa5ec1619f8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5f76967fad478126d6552b0d -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Next, you want to align the price to the right. Add a class named `price` to your `p` element that has `3.00` as its text. - -# --hints-- - -You should add the `price` class to your `p` element. - -```js -assert(code.match(//i)); -``` - -You should only have one element with the `price` class. - -```js -assert($('.price').length === 1); -``` - -Your `price` class should be on the `p` element with the text `3.00`. - -```js -assert($('.price')[0].innerText.match(/3\.00/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

---fcc-editable-region-- -

3.00

---fcc-editable-region-- -
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.flavor { - text-align: left; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md deleted file mode 100644 index 957e0cb414a557..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: 5f769702e6e33127d14aa120 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Now align the text to the `right` for the elements with the `price` class. - -# --hints-- - -You should have a `price` class selector. - -```js -assert(code.match(/\.price\s*{/i)); -``` - -Your `price` class selector should set the `text-align` property to `right`. - -```js -assert(code.match(/\.price\s*{\s*text-align:\s*right;?/i)); -``` - -Your `.price` element should be aligned to the right. - -```js -assert($('.price').css('text-align') === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

-

3.00

-
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.flavor { - text-align: left; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md deleted file mode 100644 index 26816b1d36b11d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5f7b87422a560036fd03ccff -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -For the two `p` elements you just added, add `dessert` as the value of the first `p` element's `class` attribute and the value `price` as the second `p` elements `class` attribute. - -# --hints-- - -You should have one `p` element with the `dessert` class. - -```js -assert($('.dessert').length === 1); -``` - -Your `p` element with the text `Donut` should have the `dessert` class. - -```js -assert($('.dessert')[0].innerText.match(/donut/i)); -``` - -Your `p` element with the text `1.50` should have the `price` class. - -```js -assert($('.price').last().text().match(/1\.50/)); -``` - -You should not have any spaces between your `p` elements. - -```js -assert(!code.match(/<\/p>\s+

- - - - - Cafe Menu - - - -

-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
---fcc-editable-region-- -

Donut

1.50

---fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md deleted file mode 100644 index 99d08142301870..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5f7b88d37b1f98386f04edc0 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Something does not look right. You added the correct `class` attribute value to the `p` element with `Donut` as its text, but you have not defined a selector for it. - -Since the `flavor` class selector already has the properties you want, just add the `dessert` class name to it. - -# --hints-- - -You should add the `.dessert` selector to your `.flavor` selector. - -```js -const selector = new __helpers.CSSHelp(document).getStyle('.flavor, .dessert') || new __helpers.CSSHelp(document).getStyle('.dessert, .flavor'); -assert(selector) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - ---fcc-editable-region-- -.flavor { - text-align: left; - width: 75%; -} ---fcc-editable-region-- - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md deleted file mode 100644 index 8489e252ab6f24..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 6140c7e645d8e905819f1dd4 -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Begin with the standard boilerplate. Add your `DOCTYPE` declaration, your `html` element, your `head` and `body` elements. - -Add your `meta` element for the correct `charset`, your `title` element, and a `link` element for the `./styles.css` file. - -Set the `title` to `Ferris Wheel`. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have an opening tag. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Your `DOCTYPE` declaration should be at the beginning of your HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -You should have an opening `head` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `head` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `body` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `body` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -The `head` and `body` elements should be siblings. - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -The `head` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -The `body` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -Your code should have a `meta` element. - -```js -const meta = document.querySelector('meta'); -assert.exists(meta); -``` - -Your `meta` element should have a `charset` attribute with the value `UTF-8`. - -```js -assert.match(code, //i)); -``` - -Your `link` element should be within your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert.match(code, / child?.localName === 'div'); -assert(divs?.length === 1); -``` - -Your `div` within your `body` element should have a `class` of `wheel`. - -```js -assert(document.querySelector('body div')?.classList?.contains('wheel')); -``` - -Your `.wheel` element should have six `span` elements within. - -```js -assert(document.querySelectorAll('.wheel span')?.length === 6); -``` - -Your six `span` elements within the `.wheel` element should have a `class` of `line`. - -```js -const spans = [...document.querySelectorAll('.wheel span')]; -assert(spans?.every(span => span?.classList?.contains('line'))); -assert(document.querySelectorAll('.line')?.length === 6); -``` - -Your `.wheel` element should have six `div` elements within. - -```js -assert(document.querySelectorAll('.wheel div')?.length === 6); -``` - -Your six `div` elements within the `.wheel` element should have a `class` of `cabin`. - -```js -const divs = [...document.querySelectorAll('.wheel div')]; -assert(divs?.every(div => div?.classList?.contains('cabin'))); -assert(document.querySelectorAll('.cabin')?.length === 6); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - ---fcc-editable-region-- - - - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md deleted file mode 100644 index 7594bdcbf0bfc5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 6140cbeec34e970dfe75e710 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Create a selector for your `.wheel` element. Start by setting the `border` to `2px solid black`, the `border-radius` to `50%`, and the `margin-left` to `50px`. - -# --hints-- - -You should have a `.wheel` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')); -``` - -Your `.wheel` selector should have a `border` property set to `2px solid black`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.border === '2px solid black'); -``` - -Your `.wheel` selector should have a `border-radius` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.borderRadius === '50%'); -``` - -Your `.wheel` selector should have a `margin-left` property set to `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.marginLeft === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md deleted file mode 100644 index b323863a2458b0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: 6140cd32d018ed0f600eefce -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Set the `position` property of the `.wheel` selector to `absolute`. Set the `height` and `width` both to `55vw`. - -# --hints-- - -Your `.wheel` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.position === 'absolute'); -``` - -Your `.wheel` selector should have a `height` property set to `55vw`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.height === '55vw'); -``` - -Your `.wheel` selector should have a `width` property set to `55vw`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.width === '55vw'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md deleted file mode 100644 index 2d6bb9b6c8f98e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 6140cdebd39d6a101e747529 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Create a selector for your `.line` elements. Start by setting the `background-color` to `black`, the `width` to `50%`, and the `height` to `2px`. - -# --hints-- - -You should have a `.line` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line')); -``` - -Your `.line` selector should have a `background-color` property set to `black`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line')?.backgroundColor === "black"); -``` - -Your `.line` selector should have a `width` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line')?.width === "50%"); -``` - -Your `.line` selector should have a `height` property set to `2px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line')?.height === "2px"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md deleted file mode 100644 index e9f7f54053bbf4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: 6140cfc08ca9c5128c3e6478 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Set the `.line` selector's `position` property to `absolute`, the `left` property to `50%`, and the `top` property to `50%`. - -# --hints-- - -Your `.line` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line')?.position === 'absolute'); -``` - -Your `.line` selector should have a `left` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line')?.left === '50%'); -``` - -Your `.line` selector should have a `top` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line')?.top === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - ---fcc-editable-region-- -.line { - background-color: black; - width: 50%; - height: 2px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md deleted file mode 100644 index adc4d901e5c225..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 6140d0069049f5139d78da40 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -The `transform-origin` property is used to set the point around which a CSS transformation is applied. For example, when performing a `rotate` (which you will do later in this project), the `transform-origin` determines around which point the element is rotated. - -Give the `.line` selector a `transform-origin` property of `0% 0%`. This will offset the origin point by `0%` from the left and `0%` from the top, setting it to the top left corner of the element. - -# --hints-- - -Your `.line` selector should have a `transform-origin` property set to `0% 0%`. - -```js -const transformOrigin = new __helpers.CSSHelp(document).getStyle('.line')?.transformOrigin; -assert(transformOrigin === '0% 0%' || transformOrigin === '0% 0% 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - ---fcc-editable-region-- -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md deleted file mode 100644 index bb48aef21858fa..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 6140d10d50636e14695013b2 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Create a selector to target your second `.line` element. Set the `transform` property to `rotate(60deg)`. - -Remember that the `transform` property allows you to manipulate the shape of an element. In this case, using the `rotate(60deg)` value will rotate the element around its `transform-origin` point by 60 degrees clockwise. - -# --hints-- - -You should create a `.line:nth-of-type(2)` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')); -``` - -Your `.line:nth-of-type(2)` selector should have a `transform` property set to `rotate(60deg)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform === 'rotate(60deg)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md deleted file mode 100644 index 0630732d3440f3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 6140d1a351e88f159ed54fca -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Using the same pattern, create a separate selector for the third `.line`, the fourth `.line`, the fifth `.line`, and the sixth `.line`. - -Set the `transform` property for the third `.line` to `rotate(120deg)`, the fourth to `rotate(180deg)`, the fifth to `rotate(240deg)`, and the sixth to `rotate(300deg)`. - -# --hints-- - -You should create a `.line:nth-of-type(3)` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')); -``` - -Your `.line:nth-of-type(3)` selector should have a `transform` property set to `rotate(120deg)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')?.transform === 'rotate(120deg)'); -``` - -You should create a `.line:nth-of-type(4)` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')); -``` - -Your `.line:nth-of-type(4)` selector should have a `transform` property set to `rotate(180deg)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')?.transform === 'rotate(180deg)'); -``` - -You should create a `.line:nth-of-type(5)` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')); -``` - -Your `.line:nth-of-type(5)` selector should have a `transform` property set to `rotate(240deg)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')?.transform === 'rotate(240deg)'); -``` - -You should create a `.line:nth-of-type(6)` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')); -``` - -Your `.line:nth-of-type(6)` selector should have a `transform` property set to `rotate(300deg)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')?.transform === 'rotate(300deg)'); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md deleted file mode 100644 index 3f71bf53cc0759..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -id: 6140d263016325162fd076fe -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Create a `.cabin` selector. Set the `background-color` to `red`, the `width` to `20%`, and the `height` to `20%`. - -# --hints-- - -You should have a `.cabin` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin')); -``` - -Your `.cabin` selector should have a `background-color` property set to `red`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.backgroundColor === 'red'); -``` - -Your `.cabin` selector should have a `width` property set to `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.width === '20%'); -``` - -Your `.cabin` selector should have a `height` property set to `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.height === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d2b687a2cd17bac5730c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d2b687a2cd17bac5730c.md deleted file mode 100644 index 2db916709a96bb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d2b687a2cd17bac5730c.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 6140d2b687a2cd17bac5730c -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Give the `.cabin` a `position` of `absolute`, and a `border` of `2px solid`. - -# --hints-- - -Your `.cabin` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.position === 'absolute'); -``` - -Your `.cabin` selector should have a `border` property set to `2px solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.border === '2px solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - ---fcc-editable-region-- -.cabin { - background-color: red; - width: 20%; - height: 20%; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md deleted file mode 100644 index 2fefadb892bcc4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 6140d36b8b747718b50d4b7a -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Set the `.cabin` to have a `transform-origin` property of `50% 0%`. This will set the origin point to be offset `50%` from the left and `0%` from the top, placing it in the middle of the top edge of the element. - -# --hints-- - -Your `.cabin` selector should have a `transform-origin` property set to `50% 0%`. - -```js -const transformOrigin = new __helpers.CSSHelp(document).getStyle('.cabin')?.transformOrigin; -assert(transformOrigin === '50% 0%' || transformOrigin === '50% 0% 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - ---fcc-editable-region-- -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d3dc359b371b1a21d783.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d3dc359b371b1a21d783.md deleted file mode 100644 index 64e9db2c49166f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d3dc359b371b1a21d783.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 6140d3dc359b371b1a21d783 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Time to position the cabins around the wheel. Select the first `.cabin` element. Set the `right` property to `-8.5%` and the `top` property to `50%`. - -# --hints-- - -You should have a `.cabin:nth-of-type(1)` selector. - -```js -const def = (s) => new __helpers.CSSHelp(document).getStyle(s) -assert.exists(def('.cabin:first-of-type') || def('.cabin:nth-of-type(1)')); -``` - -Your `.cabin:nth-of-type(1)` selector should have a `right` property set to `-8.5%`. - -```js -const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right -assert.equal(right('.cabin:nth-of-type(1)') || right('.cabin:first-of-type'), '-8.5%'); -``` - -Your `.cabin:nth-of-type(1)` selector should have a `top` property set to `50%`. - -```js -const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top -assert.equal(top('.cabin:nth-of-type(1)') || top('.cabin:first-of-type'),'50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d4bc9db3c81c51a09ab7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d4bc9db3c81c51a09ab7.md deleted file mode 100644 index 0dc354de2ff2ee..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d4bc9db3c81c51a09ab7.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 6140d4bc9db3c81c51a09ab7 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Continuing the pattern, select the following `.cabin` elements and apply the specific rules to them: - -- The second `.cabin` should have the `right` property set to `17%` and the `top` property set to `93.5%`. -- The third `.cabin` should have the `right` property set to `67%` and the `top` property set to `93.5%`. -- The fourth `.cabin` should have the `left` property set to `-8.5%` and the `top` property set to `50%`. -- The fifth `.cabin` should have the `left` property set to `17%` and the `top` property set to `7%`. -- The sixth `.cabin` should have the `right` property set to `17%` and the `top` property set to `7%`. - -# --hints-- - -You should have a `.cabin:nth-of-type(2)` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')); -``` - -Your `.cabin:nth-of-type(2)` selector should have a `right` property set to `17%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.right === '17%'); -``` - -Your `.cabin:nth-of-type(2)` selector should have a `top` property set to `93.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.top === '93.5%'); -``` - -You should have a `.cabin:nth-of-type(3)` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')); -``` - -Your `.cabin:nth-of-type(3)` selector should have a `right` property set to `67%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.right === '67%'); -``` - -Your `.cabin:nth-of-type(3)` selector should have a `top` property set to `93.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.top === '93.5%'); -``` - -You should have a `.cabin:nth-of-type(4)` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')); -``` - -Your `.cabin:nth-of-type(4)` selector should have a `left` property set to `-8.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.left === '-8.5%'); -``` - -Your `.cabin:nth-of-type(4)` selector should have a `top` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.top === '50%'); -``` - -You should have a `.cabin:nth-of-type(5)` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')); -``` - -Your `.cabin:nth-of-type(5)` selector should have a `left` property set to `17%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.left === '17%'); -``` - -Your `.cabin:nth-of-type(5)` selector should have a `top` property set to `7%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.top === '7%'); -``` - -You should have a `.cabin:nth-of-type(6)` selector. - -```js -const def = (s) => new __helpers.CSSHelp(document).getStyle(s) -assert(def('.cabin:nth-of-type(6)') || def('.cabin:last-of-type')); -``` - -Your `.cabin:nth-of-type(6)` selector should have a `right` property set to `17%`. - -```js -const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right -assert.equal(right('.cabin:nth-of-type(6)') || right('.cabin:last-of-type'),'17%'); -``` - -Your `.cabin:nth-of-type(6)` selector should have a `top` property set to `7%`. - -```js -const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top -assert.equal(top('.cabin:nth-of-type(6)') || top('.cabin:last-of-type'),'7%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md deleted file mode 100644 index afd0b465c1b558..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -id: 6140d94b5fab7f1d73c9bedb -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -The `@keyframes` at-rule is used to define the flow of a CSS animation. Within the `@keyframes` rule, you can create selectors for specific points in the animation sequence, such as `0%` or `25%`, or use `from` and `to` to define the start and end of the sequence. - -`@keyframes` rules require a name to be assigned to them, which you use in other rules to reference. For example, the `@keyframes freeCodeCamp { }` rule would be named `freeCodeCamp`. - -Time to start animating. Create a `@keyframes` rule named `wheel`. - -# --hints-- - -You should have a `@keyframes` rule. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 1); -``` - -Your new `@keyframes` rule should be named `wheel`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md deleted file mode 100644 index d2e823fe314b9e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 6140dc5e13d0c81e7496f182 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -You now need to define how your animation should start. To do this, create a `0%` rule within your `@keyframes wheel` rule. The properties you set in this nested selector will apply at the beginning of your animation. - -As an example, this would be a `12%` rule: - -```css -@keyframes freecodecamp { - 12% { - color: green; - } -} -``` - -# --hints-- - -Your `@keyframes wheel` rule should have a `0%` selector. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.keyText === '0%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - ---fcc-editable-region-- -@keyframes wheel { - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md deleted file mode 100644 index 9995f36296aa28..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 6140dd77e0bc5a1f70bd7466 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Give the `0%` rule a `transform` property set to `rotate(0deg)`. This will start the animation with no rotation. - -# --hints-- - -Your `0%` selector should have a `transform` property set to `rotate(0deg)`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - ---fcc-editable-region-- -@keyframes wheel { - 0% { - - } -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md deleted file mode 100644 index fa09153254fdd6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 6140de31b1f5b420410728ff -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Now give the `@keyframes wheel` rule a `100%` selector. Within that, set the `transform` to `rotate(360deg)`. By doing this, your animation will now complete a full rotation. - -# --hints-- - -Your `@keyframes wheel` rule should have a `100%` selector. - -```js -const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules -assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%'); -``` - -Your `100%` selector should come after your `0%` selector. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText === '100%') -``` - -Your `100%` selector should have a `transform` property set to `rotate(360deg)`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform === 'rotate(360deg)') -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - ---fcc-editable-region-- -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md deleted file mode 100644 index 8d46278544bcf5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 6140df547f09402144e40b92 -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -The `animation-name` property is used to link a `@keyframes` rule to a CSS selector. The value of this property should match the name of the `@keyframes` rule. Give your `.wheel` selector an `animation-name` property set to `wheel`. - -The `animation-duration` property is used to set how long the animation should sequence to complete. The time should be specified in either seconds (`s`) or milliseconds (`ms`). Set your `.wheel` selector to have an `animation-duration` property of `10s`. - -# --hints-- - -Your `.wheel` selector should have an `animation-name` property set to `wheel`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationName === 'wheel'); -``` - -Your `.wheel` selector should have an `animation-duration` property set to `10s`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationDuration === '10s'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; -} ---fcc-editable-region-- - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md deleted file mode 100644 index c52cfccd3f04b5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 6140e0d875ec16262f26432b -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -The `animation-iteration-count` property sets how many times your animation should repeat. This can be set to a number, or to `infinite` to indefinitely repeat the animation. Your Ferris wheel should never stop, so set the `.wheel` selector to have an `animation-iteration-count` of `infinite`. - -The `animation-timing-function` property sets how the animation should progress over time. There are a few different values for this property, but you want the Ferris wheel animation to run at the same rate from start to finish. Set the `animation-timing-function` to `linear` in your `.wheel` selector. - -# --hints-- - -Your `.wheel` selector should have an `animation-iteration-count` property set to `infinite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationIterationCount === 'infinite'); -``` - -Your `.wheel` selector should have an `animation-timing-function` property set to `linear`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationTimingFunction === 'linear'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; - animation-name: wheel; - animation-duration: 10s; -} ---fcc-editable-region-- - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md deleted file mode 100644 index c4620baae2f12b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -id: 6140f4b5c1555a2960de1e5f -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Create another `@keyframes` rule with the name `cabins`. Use the same properties as your `@keyframes wheel`, copying both the `0%` and `100%` rules, but set the `transform` property of the `100%` selector to `rotate(-360deg)`. - -# --hints-- - -You should have a `@keyframes` rule. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 2); -``` - -Your new `@keyframes` rule should be named `cabins`. - -```js -const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes'); -assert(rules?.[0]?.name === 'cabins' || rules?.[1]?.name === 'cabins'); -``` - -Your new `@keyframes` rule should come after your `@keyframes wheel` rule. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.name === 'cabins'); -``` - -You should not change the name of your `@keyframes wheel` rule. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel'); -``` - -Your `@keyframes cabins` rule should have a `0%` selector. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.keyText === '0%'); -``` - -Your `0%` selector should have a `transform` property set to `rotate(0deg)`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)'); -``` - -Your `@keyframes cabins` rule should have a `100%` selector. - -```js -const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules -assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%'); -``` - -Your `100%` selector should come after your `0%` selector. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '100%') -``` - -Your `100%` selector should have a `transform` property set to `rotate(-360deg)`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.transform === 'rotate(-360deg)') -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; - animation-name: wheel; - animation-duration: 10s; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md deleted file mode 100644 index b737efa3c64330..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 614100d7d335bb2a5ff74f1f -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -With your `.wheel` selector, you created four different properties to control the animation. For your `.cabin` selector, you can use the `animation` property to set these all at once. - -Set the `animation` property of the `.cabin` rule to `cabins 10s linear infinite`. This will set the `animation-name`, `animation-duration`, `animation-timing-function`, and `animation-iteration-count` properties in that order. - -# --hints-- - -Your `.cabin` selector should have an `animation` property set to `cabins 10s linear infinite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s linear 0s infinite normal none running cabins'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; - animation-name: wheel; - animation-duration: 10s; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - ---fcc-editable-region-- -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; -} ---fcc-editable-region-- - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -@keyframes cabins { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(-360deg); - } -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md deleted file mode 100644 index ba956856fa70f3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 61410126fa3a6d2b3cda502e -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -To make your cabin animation seem more like a natural swinging motion, you can use the `ease-in-out` timing function. This setting will tell the animation to start and end at a slower pace, but move more quickly in the middle of the cycle. - -Replace `linear` to `ease-in-out` in the `.cabin` selector. - -# --hints-- - -Your `.cabin` selector should have an `animation` property set to `cabins 10s ease-in-out infinite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins'); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; - animation-name: wheel; - animation-duration: 10s; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - ---fcc-editable-region-- -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; - animation: cabins 10s linear infinite; -} ---fcc-editable-region-- - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -@keyframes cabins { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(-360deg); - } -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md deleted file mode 100644 index fa8f53a0a0c4dc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -id: 6141019eadec6d2c6c6f007b -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -You can use `@keyframes` rules to control more than just the transformation of an element. In the `0%` selector of your `@keyframes cabins`, set the `background-color` to `yellow`. - -# --hints-- - -Your `0%` selector should have a `background-color` property set to `yellow`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor === 'yellow'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; - animation-name: wheel; - animation-duration: 10s; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; - animation: cabins 10s ease-in-out infinite; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - ---fcc-editable-region-- -@keyframes cabins { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(-360deg); - } -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md deleted file mode 100644 index 3e4365297b2f9b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: 6141026ec9882f2d39dcf2b8 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Between the `0%` and `100%` selectors, add a `50%` selector. This will apply in the middle of the animation cycle. Set the `background-color` to `purple`. - -# --hints-- - -You should create a new `50%` selector in your `@keyframes cabins` rule. - -```js -const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules; -assert(rules?.[0]?.keyText === '50%' || rules?.[1]?.keyText === '50%' || rules?.[2]?.keyText === '50%'); -``` - -Your `50%` selector should be between your `0%` and `100%` selectors. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '50%'); -``` - -Your `50%` selector should have a `background-color` property set to `purple`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'purple'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; - animation-name: wheel; - animation-duration: 10s; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; - animation: cabins 10s ease-in-out infinite; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - ---fcc-editable-region-- -@keyframes cabins { - 0% { - transform: rotate(0deg); - background-color: yellow; - } - 100% { - transform: rotate(-360deg); - } -} ---fcc-editable-region-- -``` - -## --solutions-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - animation-name: wheel; - animation-duration: 10s; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; - animation: cabins 10s ease-in-out infinite; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -@keyframes cabins { - 0% { - transform: rotate(0deg); - background-color: yellow; - } - 50% { - background-color: purple; - } - 100% { - transform: rotate(-360deg); - } -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md deleted file mode 100644 index 8bba5c8a713bf5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 6169ab1aaeb4cd1174def700 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Because the animation is on an infinite loop and the start and end colors are not the same, the transition appears jerky when it switches back to yellow from red. - -To start fixing this, remove the `background-color` from your `0%` selector. - -# --hints-- - -Your `0%` selector should not have a `background-color` property. - -```js -assert(!new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; - animation-name: wheel; - animation-duration: 10s; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; - animation: cabins 10s ease-in-out infinite; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - ---fcc-editable-region-- -@keyframes cabins { - 0% { - transform: rotate(0deg); - background-color: yellow; - } - 50% { - background-color: purple; - } - 100% { - transform: rotate(-360deg); - } -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md deleted file mode 100644 index 428dde46e7aaae..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 6169b1357fcb701bb5efc619 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Create a new `25%` selector between your `0%` and `50%` selectors. Give this new selector the `background-color` property set to `yellow`. - -# --hints-- - -You should create a new `25%` selector in your `@keyframes cabins` rule. - -```js -const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules; -assert(rules?.[0]?.keyText === '25%' || rules?.[1]?.keyText === '25%' || rules?.[2]?.keyText === '25%' || rules?.[3]?.keyText === '25%'); -``` - -Your `25%` selector should be between your `0%` and `50%` selectors. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '25%'); -``` - -Your `25%` selector should have a `background-color` property set to `yellow`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'yellow'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; - animation-name: wheel; - animation-duration: 10s; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; - animation: cabins 10s ease-in-out infinite; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - ---fcc-editable-region-- -@keyframes cabins { - 0% { - transform: rotate(0deg); - } - 50% { - background-color: purple; - } - 100% { - transform: rotate(-360deg); - } -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md deleted file mode 100644 index a92317cd12e898..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 6169b284950e171d8d0bb16a -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Finally, create a new `75%` selector between your `50%` and `100%` selectors. Give this new selector a `background-color` property set to `yellow.` - -With that, your animation is much smoother and your Ferris wheel is complete. - -# --hints-- - -You should create a new `75%` selector in your `@keyframes cabins` rule. - -```js -const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules; -assert(rules?.[0]?.keyText === '75%' || rules?.[1]?.keyText === '75%' || rules?.[2]?.keyText === '75%' || rules?.[3]?.keyText === '75%' || rules?.[4]?.keyText === '75%'); -``` - -Your `75%` selector should be between your `50%` and `100%` selectors. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.keyText === '75%'); -``` - -Your `75%` selector should have a `background-color` property set to `yellow`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.style?.backgroundColor === 'yellow'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; - animation-name: wheel; - animation-duration: 10s; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; - animation: cabins 10s ease-in-out infinite; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - ---fcc-editable-region-- -@keyframes cabins { - 0% { - transform: rotate(0deg); - } - 25% { - background-color: yellow; - } - 50% { - background-color: purple; - } - 100% { - transform: rotate(-360deg); - } -} ---fcc-editable-region-- -``` - -## --solutions-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; - max-width: 500px; - max-height: 500px; - animation-name: wheel; - animation-duration: 10s; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -.line { - background-color: black; - width: 50%; - height: 2px; - position: absolute; - top: 50%; - left: 50%; - transform-origin: 0% 0%; -} - -.line:nth-of-type(2) { - transform: rotate(60deg); -} -.line:nth-of-type(3) { - transform: rotate(120deg); -} -.line:nth-of-type(4) { - transform: rotate(180deg); -} -.line:nth-of-type(5) { - transform: rotate(240deg); -} -.line:nth-of-type(6) { - transform: rotate(300deg); -} - -.cabin { - background-color: red; - width: 20%; - height: 20%; - position: absolute; - border: 2px solid; - transform-origin: 50% 0%; - animation: cabins 10s ease-in-out infinite; -} - -.cabin:nth-of-type(1) { - right: -8.5%; - top: 50%; -} -.cabin:nth-of-type(2) { - right: 17%; - top: 93.5%; -} -.cabin:nth-of-type(3) { - right: 67%; - top: 93.5%; -} -.cabin:nth-of-type(4) { - left: -8.5%; - top: 50%; -} -.cabin:nth-of-type(5) { - left: 17%; - top: 7%; -} -.cabin:nth-of-type(6) { - right: 17%; - top: 7%; -} - -@keyframes wheel { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -@keyframes cabins { - 0% { - transform: rotate(0deg); - } - 25% { - background-color: yellow; - } - 50% { - background-color: purple; - } - 75% { - background-color: yellow; - } - 100% { - transform: rotate(-360deg); - } -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md deleted file mode 100644 index 5058aca6d76c22..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 617ace7d831f9c16a569b38a -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Give your `.wheel` selector a `max-height` and `max-width` property both set to `500px`. - -# --hints-- - -Your `.wheel` selector should have a `max-height` property set to `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxHeight === '500px'); -``` - -Your `.wheel` selector should have a `max-width` property set to `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxWidth === '500px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Ferris Wheel - - - -
- - - - - - - -
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -.wheel { - border: 2px solid black; - border-radius: 50%; - margin-left: 50px; - position: absolute; - height: 55vw; - width: 55vw; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md deleted file mode 100644 index f89df517d905df..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 61695197ac34f0407e339882 -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -As you've seen in the previous projects, webpages should start with a `DOCTYPE html` declaration, followed by an `html` element. - -Add a `DOCTYPE html` declaration at the top of the document, and an `html` element after that. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have an opening tag. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/gi)); -``` - -Your `DOCTYPE` declaration should be at the beginning of your HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md deleted file mode 100644 index 20f457eb26683b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: 61695ab9f6ffe951c16d03dd -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Nest a `head` element within the `html` element. Just after the `head` element, add a `body` element. - -# --hints-- - -You should have an opening `head` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `head` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `body` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `body` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -Your `head` and `body` elements should be siblings. - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -Your `head` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -Your `body` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md deleted file mode 100644 index 52510787c8075c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 61695c4aad56f95497c19583 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Remember that the `title` element gives search engines extra information about the page. It also tells browsers what text to display in the title bar when the page is open, and on the tab for the page. - -Within the `head` element, nest a `title` element with the text `Colored Markers`. - -# --hints-- - -You should have an opening `title` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `title` tag. - -```js -assert(code.match(/<\/title\s*>/i)); -``` - -Your project should have the title `Colored Markers`. - -```js -const title = document.querySelector('title'); -assert.equal(title?.text?.trim()?.toLowerCase(), 'colored markers') -``` - -Remember, casing and spelling matter for the title text. - -```js -const title = document.querySelector('title'); -assert.equal(title?.text?.trim(), 'Colored Markers'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - ---fcc-editable-region-- - - - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md deleted file mode 100644 index b379d09aefbb25..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 61695d1fbc003856628bf561 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -To tell browsers how to encode characters on your page, set the `charset` to `utf-8`. `utf-8` is a universal character set that includes almost every character from all human languages. - -Inside the `head` element, nest a `meta` element with the attribute `charset` set to `utf-8`. Remember that `meta` elements are self-closing, and do not need a closing tag. - -# --hints-- - -You should have one `meta` element. - -```js -const meta = document.querySelectorAll('meta'); -assert(meta?.length === 1); -``` - -Your `meta` element should be a self-closing element. - -```js -assert(code.match(/<\/meta>/i) === null); -``` - -Your `meta` element should have a `charset` attribute set to `utf-8`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -assert.exists(target); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - Colored Markers - ---fcc-editable-region-- - - - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md deleted file mode 100644 index dd53e198beebd5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 616965351e74d4689eb6de30 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Finally, use a `viewport` `` tag to make sure your page looks the same on all devices. - -Nest a self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0`. - -# --hints-- - -You should have two `meta` elements. - -```js -const meta = document.querySelectorAll('meta'); -assert(meta?.length === 2); -``` - -Your new `meta` element should be a self-closing element. - -```js -assert(code.match(/<\/meta>/i) === null); -``` - -Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0'); -assert.exists(target); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - Colored Markers - ---fcc-editable-region-- - - - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md deleted file mode 100644 index f63e30df5d33f8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: 616968c2c94c8071b349c146 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Now you're ready to start adding content to the page. - -Within the `body`, nest an `h1` element with the text `CSS Color Markers`. - -# --hints-- - -Your code should have an `h1` element. - -```js -const title = document.querySelector('h1'); -assert.exists(title); -``` - -You should have an opening `h1` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `h1` tag. - -```js -assert(code.match(/<\/h1\s*>/i)); -``` - -Your `h1` element should be within the `body` element. - -```js -assert(document.querySelector('h1')?.parentElement?.localName === 'body'); -``` - -Your `h1` element should have the text `CSS Color Markers`. - -```js -const h1 = document.querySelector('h1'); -assert.equal(h1?.textContent?.trim()?.toLowerCase(), 'css color markers') -``` - -Remember, the casing and spelling matter for the `h1` text. - -```js -const h1 = document.querySelector('h1'); -assert.equal(h1?.textContent?.trim(), 'CSS Color Markers'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - ---fcc-editable-region-- - - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md deleted file mode 100644 index d8724965b77226..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 61696ef7ac756c829f9e4048 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -In this project you'll work with an external CSS file to style the page. We've already created a `styles.css` file for you. But before you can use it, you'll need to link it to the page. - -Nest a `link` element within the `head`. Give it a `rel` attribute set to `stylesheet`, a `type` attribute set to `text/css`, and an `href` attribute set to `styles.css`. - -# --hints-- - -Your code should have one `link` element. - -```js -assert(code.match(//i) === null); -``` - -Your `link` element should be within your `head` element. - -```js -const head = code.match(/(.|\r|\n)*<\/head>/i)?.[0]; -assert(head.match(/ - - --fcc-editable-region-- - - - - Colored Markers - - --fcc-editable-region-- - -

CSS Color Markers

- - -``` - -```css -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md deleted file mode 100644 index 3f5889a4404cba..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 616971b3cd990186b66c99a1 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now that your external CSS file is set up, you can start styling the page. - -As a reminder, here's how to target a paragraph element and align it to the right: - -```css -p { - text-align: right; -} -``` - -Create a new CSS rule that targets the `h1` element, and set its `text-align` property to `center`. - -# --hints-- - -You should use an `h1` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')); -``` - -Your `h1` CSS rule should have a `text-align` property set to `center`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md deleted file mode 100644 index 3ba912b35ef092..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 616d3a67ccf800ad94ec89ae -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Now you'll add some elements that you'll eventually style into color markers. - -First, within the `body`, add a `div` element and set its `class` attribute to `container`. Make sure the `div` element is below the `h1` element. - -# --hints-- - -You should have an opening `div` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `div` tag. - -```js -assert(code.match(/<\/div\s*>/i)); -``` - -Your `div` element should be within your `body` element. - -```js -assert(document.querySelector('div')?.parentElement?.localName === 'body'); -``` - -Your `div` element should be after the `h1` element. - -```js -assert.exists(document.querySelector('h1 + div')); -``` - -Your `div` element should have a `class` attribute set to `container`. - -```js -assert(document.querySelector('div')?.classList?.contains('container')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - ---fcc-editable-region-- - -

CSS Color Markers

- ---fcc-editable-region-- - -``` - -```css -h1 { - text-align: center; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md deleted file mode 100644 index dac8c85d719a09..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 616d47bc9eedc4bc7f621bec -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Next, within the `div`, add another `div` element and give it a class of `marker`. - -# --hints-- - -Your new `div` element should have an opening tag. - -```js -assert([...code.matchAll(//gi)][1]); -``` - -Your new `div` element should have a closing tag. - -```js -assert([...code.matchAll(/<\/div\s*>/gi)][1]); -``` - -You should nest your new `div` element within the `div` with the class `container`. - -```js -assert(document.querySelector('.container')?.children[0]?.localName === 'div'); -``` - -You should give your new `div` element a class of `marker`. - -```js -const containerChildren = [...document.querySelector('.container')?.children]; -assert(containerChildren.every(child => child.classList?.contains('marker'))); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - ---fcc-editable-region-- - -

CSS Color Markers

-
-
- ---fcc-editable-region-- - -``` - -```css -h1 { - text-align: center; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md deleted file mode 100644 index acc265adee723a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 616d4a84b756d9c4b8255093 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -It's time to add some color to the page. Remember that one way to add color to an element is to use a color keyword like `black`, `cyan`, or `yellow`. - -As a reminder, here's how to target the class `freecodecamp`: - -```css -.freecodecamp { - -} -``` - -Create a new CSS rule that targets the class `marker`, and set its `background-color` property to `red`. - -# --hints-- - -You should create a class selector to target the `marker` class. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.marker')); -``` - -Your `.marker` CSS rule should have a `background-color` property set to `red`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor === 'red'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md deleted file mode 100644 index 253276485b8a8b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 616d50b93ba424d6282c99cf -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the marker `div` element is empty, it doesn't have any width or height by default. - -In your `.marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`. - -# --hints-- - -Your `.marker` CSS rule should have a `width` property set to `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.marker')?.width === '200px'); -``` - -Your `.marker` CSS rule should have a `height` property set to `25px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.marker')?.height === '25px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - ---fcc-editable-region-- -.marker { - background-color: red; -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md deleted file mode 100644 index 8ef151f86cb235..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 616d525007b8c5d8b3308b1c -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Your marker would look better if it was centered on the page. An easy way to do that is with the `margin` shorthand property. - -In the last project, you set the margin area of elements separately with properties like `margin-top` and `margin-left`. The `margin` shorthand property makes it easy to set multiple margin areas at the same time. - -To center your marker on the page, set its `margin` property to `auto`. This sets `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` all to `auto`. - -# --hints-- - -Your `.marker` CSS rule should have a `margin` property set to `auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === 'auto'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - ---fcc-editable-region-- -.marker { - width: 200px; - height: 25px; - background-color: red; -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md deleted file mode 100644 index 8d6ed3e35cfd1a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 616d55bd160a95e22453a081 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Now that you've got one marker centered with color, it's time to add the other markers. - -In the `container` `div`, add two more `div` elements and give them each a class of `marker`. - -# --hints-- - -Your first new `div` element should have an opening tag. - -```js -assert([...code.matchAll(//gi)][2]); -``` - -Your first new `div` element should have a closing tag. - -```js -assert([...code.matchAll(/<\/div\s*>/gi)][2]); -``` - -Your second new `div` element should have an opening tag. - -```js -assert([...code.matchAll(//gi)][3]); -``` - -Your second new `div` element should have a closing tag. - -```js -assert([...code.matchAll(/<\/div\s*>/gi)][3]); -``` - -Your new `div` elements should be within the `div` with the class `container`. - -```js -const containerChildren = [...document.querySelector('.container')?.children]; -assert(containerChildren.every(child => child?.localName === 'div') && containerChildren.length === 3); -``` - -Your new `div` elements should both have a class of `marker`. - -```js -const containerChildren = [...document.querySelector('.container')?.children]; -assert(containerChildren.every(child => child?.classList?.contains('marker'))); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

---fcc-editable-region-- -
-
-
-
---fcc-editable-region-- - - -``` - -```css -h1 { - text-align: center; -} - -.marker { - width: 200px; - height: 25px; - background-color: red; - margin: auto; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md deleted file mode 100644 index 4b95071fc6c6c6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 616d595270d902f0e7086e18 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -While you have three separate marker `div` elements, they look like one big rectangle. You should add some space between them to make it easier to see each element. - -When the shorthand `margin` property has two values, it sets `margin-top` and `margin-bottom` to the first value, and `margin-left` and `margin-right` to the second value. - -In your `.marker` CSS rule, set the `margin` property to `10px auto`. - -# --hints-- - -Your `.marker` CSS rule should have a `margin` property set to `10px auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === '10px auto'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - ---fcc-editable-region-- -.marker { - width: 200px; - height: 25px; - background-color: red; - margin: auto; -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md deleted file mode 100644 index 77d0dd6b15b1ee..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 61764c602bee6974e7790f35 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -In school, you might have learned that red, yellow, and blue are primary colors, and learned how to create new colors by mixing those. However, this is an outdated model. - -These days, there are two main color models: the additive RGB (red, green, blue) model used in electronic devices, and the subtractive CMYK (cyan, magenta, yellow, black) model used in print. In this project you'll work with the RGB model. - -First, add the `class` `one` to the first marker `div` element. - -# --hints-- - -You should add the class `one` to the first marker `div` element. - -```js -const containerFirstChild = [...document.querySelector('.container')?.children][0]; -assert(containerFirstChild?.classList?.contains('one')); -``` - -Your first marker `div` should have the classes `marker` and `one`. - -```js -const containerFirstChild = [...document.querySelector('.container')?.children][0]; -assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('one')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
---fcc-editable-region-- -
-
-
-
-
-
---fcc-editable-region-- -
- - -``` - -```css -h1 { - text-align: center; -} - -.marker { - width: 200px; - height: 25px; - background-color: red; - margin: 10px auto; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f23ea21477b76f3b80f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f23ea21477b76f3b80f.md deleted file mode 100644 index 3542ededcf9db5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f23ea21477b76f3b80f.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 61764f23ea21477b76f3b80f -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Next, remove the `background-color` property and its value from the `.marker` CSS rule. - -# --hints-- - -Your `.marker` CSS rule should not have a `background-color` property and value. - -```js -assert(!code.includes('background-color') && !new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - ---fcc-editable-region-- -.marker { - width: 200px; - height: 25px; - background-color: red; - margin: 10px auto; -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md deleted file mode 100644 index 8fb1f9ab1e0c1f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 61764f7e5240eb7ccc7f6a0a -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Then, create a new CSS rule that targets the class `one` and set its `background-color` property to `red`. - -# --hints-- - -You should use a class selector to target the class `one`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.one')); -``` - -Your `.one` CSS rule should have a `background-color` property set to `red`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'red'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764fdda535587e1fefb3aa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764fdda535587e1fefb3aa.md deleted file mode 100644 index 2a61c6dd37d78d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764fdda535587e1fefb3aa.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: 61764fdda535587e1fefb3aa -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Add the class `two` to the second marker `div`, and the class `three` to the third marker `div`. - -# --hints-- - -You should add the class `two` to the second marker `div` element in the `container` `div`. - -```js -const containerSecondChild = [...document.querySelector('.container')?.children][1]; -assert(containerSecondChild?.classList?.contains('two')); -``` - -Your second marker `div` should have the classes `marker` and `two`. - -```js -const containerSecondChild = [...document.querySelector('.container')?.children][1]; -assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild.classList?.contains('two')); -``` - -You should add the class `three` to the third marker `div` element in the `container` `div`. - -```js -const containerThirdChild = [...document.querySelector('.container')?.children][2]; -assert(containerThirdChild?.classList?.contains('three')); -``` - -Your third marker `div` should have the classes `marker` and `three`. - -```js -const containerThirdChild = [...document.querySelector('.container')?.children][2]; -assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('three')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
---fcc-editable-region-- -
-
-
-
-
-
---fcc-editable-region-- -
- - -``` - -```css -h1 { - text-align: center; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: red; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md deleted file mode 100644 index 3a574feeffa51e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: 6176519636a76b810ab1219a -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Create a CSS rule that targets the class `two` and set its `background-color` property to `green`. - -Also, create a separate CSS rule that targets the class `three` and set its `background-color` to `blue`. - -# --hints-- - -You should use a class selector to target the class `two`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')); -``` - -Your `.two` CSS rule should have a `background-color` property set to `green`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green'); -``` - -You should use a class selector to target the class `three`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.three')); -``` - -Your `.three` CSS rule should have a `background-color` property set to `blue`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'blue'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: red; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md deleted file mode 100644 index 2ee46d062d1e25..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 617b65579ce424bf5f02ca73 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Earlier you learned that the RGB color model is additive. This means that colors begin as black, and change as different levels of red, green, and blue are introduced. - -An easy way to see this is with the CSS `rgb` function. - -Create a new CSS rule that targets the class `container` and set its `background-color` to black with `rgb(0, 0, 0)`. - -# --hints-- - -You should use a class selector to target the class `container`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.container')); -``` - -Your `.container` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: red; -} - -.two { - background-color: green; -} - -.three { - background-color: blue; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md deleted file mode 100644 index a48b9691f61072..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 617b8b38f32bf2080a140675 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -A function is a piece of code that can take an input and perform a specific action. The CSS `rgb` function accepts values, or arguments, for red, green, and blue, and produces a color: - -```css -rgb(red, green, blue); -``` - -Each red, green, and blue value is a number from `0` to `255`. `0` means that there's 0% of that color, and is black. `255` means that there's 100% of that color. - -In the `.one` CSS rule, replace the color keyword `red` with the `rgb` function. For the `rgb` function, set the value for red to `255`, the value for green to `0`, and the value for blue to `0`. - -# --hints-- - -Your `.one` CSS rule should not use the `red` color keyword to set the `background-color` property. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor !== 'red'); -``` - -Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(0, 0, 0); -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.one { - background-color: red; -} ---fcc-editable-region-- - -.two { - background-color: green; -} - -.three { - background-color: blue; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md deleted file mode 100644 index 0f2209762e71ba..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 617b8e0d93a8d10d9a90e720 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Notice that the `background-color` for your marker is still red. This is because you set the red value of the `rgb` function to the max of `255`, or 100% red, and set both the green and blue values to `0`. - -Now use the `rgb` function to set the other colors. - -In the `.two` CSS rule, use the `rgb` function to set the `background-color` to the max value for green, and `0` for the other values. And in the `.three` CSS rule, use the `rgb` function to set the `background-color` to the max value for blue, and `0` for the other values. - -# --hints-- - -Your `.two` CSS rule should not use the `green` color keyword to set the `background-color` property. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor !== 'green'); -``` - -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)'); -``` - -Your `.three` CSS rule should not use the `blue` color keyword to set the `background-color` property. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor !== 'blue'); -``` - -Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 255)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(0, 0, 0); -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(255, 0, 0); -} - ---fcc-editable-region-- -.two { - background-color: green; -} - -.three { - background-color: blue; -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md deleted file mode 100644 index 186877a3bb6250..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 617b92b9de349513466f6156 -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -While the red and blue markers look the same, the green one is much lighter than it was before. This is because the `green` color keyword is actually a darker shade, and is about halfway between black and the maximum value for green. - -In the `two` CSS rule, set the green value in the `rgb` function to `127` to lower its intensity. - -# --hints-- - -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(0, 0, 0); -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(255, 0, 0); -} - ---fcc-editable-region-- -.two { - background-color: rgb(0, 255, 0); -} ---fcc-editable-region-- - -.three { - background-color: rgb(0, 0, 255); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md deleted file mode 100644 index 00eb70358c8cc9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 617b954d9f4f6217a749380e -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Now add a little more vertical space between your markers and the edge of the `container` element they're in. - -In the `.container` CSS rule, use the shorthand `padding` property to add `10px` of top and bottom padding, and set the left and right padding to `0`. This works similarly to the shorthand `margin` property you used earlier. - -# --hints-- - -You should not remove the `background-color` property and its value from the `.container` CSS rule. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)'); -``` - -Your `.container` CSS rule should have a `padding` property set to `10px 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.container')?.padding === '10px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - ---fcc-editable-region-- -.container { - background-color: rgb(0, 0, 0); -} ---fcc-editable-region-- - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(255, 0, 0); -} - -.two { - background-color: rgb(0, 127, 0); -} - -.three { - background-color: rgb(0, 0, 255); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md deleted file mode 100644 index aca3dbc2ee12b0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 617b97abd9f3f61d1590b815 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -In the additive RGB color model, primary colors are colors that, when combined, create pure white. But for this to happen, each color needs to be at its highest intensity. - -Before you combine colors, set your green marker back to pure green. For the `rgb` function in the `.two` CSS rule, set green back to the max value of `255`. - -# --hints-- - -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(0, 0, 0); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(255, 0, 0); -} - ---fcc-editable-region-- -.two { - background-color: rgb(0, 127, 0); -} ---fcc-editable-region-- - -.three { - background-color: rgb(0, 0, 255); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md deleted file mode 100644 index 49f5515ce1d872..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 617b9ad735109e217284e095 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Now that you have the primary RGB colors, it's time to combine them. - -For the `rgb` function in the `.container` rule, set the red, green, and blue values to the max of `255`. - -# --hints-- - -Your `.container` CSS rule should have a `background-color` property set to `rgb(255, 255, 255)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(255, 255, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - ---fcc-editable-region-- -.container { - background-color: rgb(0, 0, 0); - padding: 10px 0; -} ---fcc-editable-region-- - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(255, 0, 0); -} - -.two { - background-color: rgb(0, 255, 0); -} - -.three { - background-color: rgb(0, 0, 255); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md deleted file mode 100644 index d777f3c1b9ff5a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 617bb5624a75e86463b7e638 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Secondary colors are the colors you get when you combine primary colors. You might have noticed some secondary colors in the last step as you changed the red, green, and blue values. - -To create the first secondary color, yellow, update the `rgb` function in the `.one` CSS rule to combine pure red and pure green. - -# --hints-- - -Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 255, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 255, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.one { - background-color: rgb(255, 0, 0); -} ---fcc-editable-region-- - -.two { - background-color: rgb(0, 255, 0); -} - -.three { - background-color: rgb(0, 0, 255); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md deleted file mode 100644 index 937acb8a9fbb34..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 617bb77353188166af43f3ac -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -To create the next secondary color, cyan, update the `rgb` function in the `.two` CSS rule to combine pure green and pure blue. - -# --hints-- - -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(255, 255, 0); -} - ---fcc-editable-region-- -.two { - background-color: rgb(0, 255, 0); -} ---fcc-editable-region-- - -.three { - background-color: rgb(0, 0, 255); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md deleted file mode 100644 index f5658b7232c9a3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 617bb9fdef27bc6aa0470ac2 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -To create the final secondary color, magenta, update the `rgb` function in the `.three` CSS rule to combine pure blue and pure red. - -# --hints-- - -Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 255)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(255, 255, 0); -} - -.two { - background-color: rgb(0, 255, 255); -} - ---fcc-editable-region-- -.three { - background-color: rgb(0, 0, 255); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md deleted file mode 100644 index 0544007c86489a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 617bbb6b97a83f6d1f7d6e38 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Now that you're familiar with secondary colors, you'll learn how to create tertiary colors. Tertiary colors are created by combining a primary with a nearby secondary color. - -To create the tertiary color orange, update the `rgb` function in the `.one` CSS rule so that red is at the max value, and set green to `127`. - -# --hints-- - -Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 127, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 127, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.one { - background-color: rgb(255, 255, 0); -} ---fcc-editable-region-- - -.two { - background-color: rgb(0, 255, 255); -} - -.three { - background-color: rgb(255, 0, 255); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md deleted file mode 100644 index 744273afa6cb6c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 617bc3386dc7d07d6469bf20 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Notice that, to create orange, you had to increase the intensity of red and decrease the intensity of the green `rgb` values. This is because orange is the combination of red and yellow, and falls between the two colors on the color wheel. - -To create the tertiary color spring green, combine cyan with green. Update the `rgb` function in the `.two` CSS rule so that green is at the max value, and set blue to `127`. - -# --hints-- - -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 127)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 127)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(255, 127, 0); -} - ---fcc-editable-region-- -.two { - background-color: rgb(0, 255, 255); -} ---fcc-editable-region-- - -.three { - background-color: rgb(255, 0, 255); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md deleted file mode 100644 index f82f866598f697..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 617bc4824e233180553a8069 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -And to create the tertiary color violet, combine magenta with blue. Update the `rgb` function in the `.three` CSS rule so that blue is at the max value, and set red to `127`. - -# --hints-- - -Your `.three` CSS rule should have a `background-color` property set to `rgb(127, 0, 255)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(127, 0, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(255, 127, 0); -} - -.two { - background-color: rgb(0, 255, 127); -} - ---fcc-editable-region-- -.three { - background-color: rgb(255, 0, 255); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md deleted file mode 100644 index 5f6b3d4abe73d2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 617bd6ec666b1da2587e4e37 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -There are three more tertiary colors: chartreuse green (green + yellow), azure (blue + cyan), and rose (red + magenta). - -To create chartreuse green, update the `rgb` function in the `.one` rule so that red is at `127`, and set green to the max value. - -For azure, update the `rgb` function in the `.two` rule so that green is at `127` and blue is at the max value. - -And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` rule so that blue is at `127` and red is at the max value. - -# --hints-- - -Your `.one` CSS rule should have a `background-color` property set to `rgb(127, 255, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(127, 255, 0)'); -``` - -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 255)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 255)'); -``` - -Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 127)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 127)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.one { - background-color: rgb(255, 127, 0); -} - -.two { - background-color: rgb(0, 255, 127); -} - -.three { - background-color: rgb(127, 0, 255); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md deleted file mode 100644 index 4ec9cb4d658415..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 618a00ed1ca871a2b3aca0cb -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Now that you've gone through all the primary, secondary, and tertiary colors on a color wheel, it'll be easier to understand other color theory concepts and how they impact design. - -First, in the rules `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. Remember that the `rgb` function uses the additive color model, where colors start as black and change as the values of red, green, and blue increase. - -# --hints-- - -Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)'); -``` - -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)'); -``` - -Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.one { - background-color: rgb(127, 255, 0); -} - -.two { - background-color: rgb(0, 127, 255); -} - -.three { - background-color: rgb(255, 0, 127); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md deleted file mode 100644 index 39db2f41f7da24..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 618a0927005553b74bfa05ae -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -A color wheel is a circle where similar colors, or hues, are near each other, and different ones are further apart. For example, pure red is between the hues rose and orange. - -Two colors that are opposite from each other on the color wheel are called complementary colors. If two complementary colors are combined, they produce gray. But when they are placed side-by-side, these colors produce strong visual contrast and appear brighter. - -In the `rgb` function for the `.one` CSS rule, set the red value to the max of `255` to produce pure red. In the `rgb` function for `.two` CSS rule, set the values for green and blue to the max of `255` to produce cyan. - -# --hints-- - -Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)'); -``` - -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.one { - background-color: rgb(0, 0, 0); -} - -.two { - background-color: rgb(0, 0, 0); -} ---fcc-editable-region-- - -.three { - background-color: rgb(0, 0, 0); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md deleted file mode 100644 index fc602176d75500..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 618a0b2befb143baefab632b -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Notice that the red and cyan colors are very bright right next to each other. This contrast can be distracting if it's overused on a website, and can make text hard to read if it's placed on a complementary-colored background. - -It's better practice to choose one color as the dominant color, and use its complementary color as an accent to bring attention to certain content on the page. - -First, in the `h1` rule, use the `rgb` function to set its background color to cyan. - -# --hints-- - -You should not remove or modify the `text-align` property or its value. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); -``` - -Your `h1` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor === 'rgb(0, 255, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -h1 { - text-align: center; -} ---fcc-editable-region-- - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(255, 0, 0); -} - -.two { - background-color: rgb(0, 255, 255); -} - -.three { - background-color: rgb(0, 0, 0); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md deleted file mode 100644 index 8e1b9429a58b5c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 618a1275e873dcc803c2d1aa -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Next, in the `.one` rule, use the `rgb` function to set the `background-color` to black. And in the `.two` rule, use the `rgb` function to set the `background-color` to red. - -# --hints-- - -Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)'); -``` - -Your `.two` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(255, 0, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; - background-color: rgb(0, 255, 255); -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.one { - background-color: rgb(255, 0, 0); -} - -.two { - background-color: rgb(0, 255, 255); -} ---fcc-editable-region-- - -.three { - background-color: rgb(0, 0, 0); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md deleted file mode 100644 index cfe737240c0e63..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 618a132676346ac9f7fd59dd -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Notice how your eyes are naturally drawn to the red color in the center? When designing a site, you can use this effect to draw attention to important headings, buttons, or links. - -There are several other important color combinations outside of complementary colors, but you'll learn those a bit later. - -For now, use the `rgb` function in the `.two` rule to set the `background-color` to black. - -# --hints-- - -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; - background-color: rgb(0, 255, 255); -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(0, 0, 0); -} - ---fcc-editable-region-- -.two { - background-color: rgb(255, 0, 0); -} ---fcc-editable-region-- - -.three { - background-color: rgb(0, 0, 0); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md deleted file mode 100644 index 2cd6faab064ce3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 618a16873520a8d088ffdf44 -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -And in the `h1` rule, remove the `background-color` property and value to go back to the default white color. - -# --hints-- - -Your `h1` CSS rule should not have a `background-color` property or value. - -```js -const backgroundColorInstances = code.match(/background-color:.*;/gi); -assert(backgroundColorInstances.length === 4 && !new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -h1 { - text-align: center; - background-color: rgb(0, 255, 255); -} ---fcc-editable-region-- - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(0, 0, 0); -} - -.two { - background-color: rgb(0, 0, 0); -} - -.three { - background-color: rgb(0, 0, 0); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md deleted file mode 100644 index acad95102187cb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 618a16d21bd3dad1bb3aa8ef -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Now it's time to add other details to the markers, starting with the first one. - -In the first marker `div` element, change the class `one` to `red`. - -# --hints-- - -Your first marker `div` should not have the class `one`. - -```js -const containerFirstChild = [...document.querySelector('.container')?.children][0]; -assert(!containerFirstChild?.classList?.contains('one')); -``` - -Your first marker `div` should have the classes `marker` and `red`. - -```js -const containerFirstChild = [...document.querySelector('.container')?.children][0]; -assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('red')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
- --fcc-editable-region-- -
-
-
-
-
-
- --fcc-editable-region-- -
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.one { - background-color: rgb(0, 0, 0); -} - -.two { - background-color: rgb(0, 0, 0); -} - -.three { - background-color: rgb(0, 0, 0); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md deleted file mode 100644 index 9f18cab9cd0ece..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 619b72a0db211f1c29afb906 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Update the `.one` class selector to target the new `red` class. - -# --hints-- - -Your code should no longer have a `.one` class selector. - -```js -assert(!new __helpers.CSSHelp(document).getStyle('.one')); -``` - -You should use a class selector to target the class `red`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.red')); -``` - -Your `.red` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(0, 0, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.one { - background-color: rgb(0, 0, 0); -} - -.two { - background-color: rgb(0, 0, 0); -} - -.three { - background-color: rgb(0, 0, 0); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md deleted file mode 100644 index ad28baa6ee8fb3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 619b7396e57b771f903be90d -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -And update the `rgb` function in the `.red` rule so that the red value is at the max. - -# --hints-- - -Your `.red` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(255, 0, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background-color: rgb(0, 0, 0); -} - -.two { - background-color: rgb(0, 0, 0); -} - -.three { - background-color: rgb(0, 0, 0); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md deleted file mode 100644 index 35f8bac901d6d7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -id: 619b7424f43ec9215e538afe -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Next, change the class `two` to `green` in the second marker `div`, and the class `three` to `blue` in the third marker `div`. - -# --hints-- - -Your second marker `div` should not have the class `two`. - -```js -const containerSecondChild = [...document.querySelector('.container')?.children][1]; -assert(!containerSecondChild?.classList?.contains('two')); -``` - -Your second marker `div` should have the classes `marker` and `green`. - -```js -const containerSecondChild = [...document.querySelector('.container')?.children][1]; -assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green')); -``` - -Your third marker `div` should not have the class `three`. - -```js -const containerThirdChild = [...document.querySelector('.container')?.children][2]; -assert(!containerThirdChild?.classList?.contains('three')); -``` - -Your third marker `div` should have the classes `marker` and `blue`. - -```js -const containerThirdChild = [...document.querySelector('.container')?.children][2]; -assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('blue')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
- --fcc-editable-region-- -
-
-
-
-
-
- --fcc-editable-region-- -
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background-color: rgb(255, 0, 0); -} - -.two { - background-color: rgb(0, 0, 0); -} - -.three { - background-color: rgb(0, 0, 0); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md deleted file mode 100644 index 8c5e2685501d2a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 619b74fa777a2b2473c94f82 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Update the CSS class selector `.two` so it targets the new `green` class. And update the `.three` selector so it targets the new `blue` class. - -# --hints-- - -Your code should no longer have a `.two` class selector. - -```js -assert(!new __helpers.CSSHelp(document).getStyle('.two')); -``` - -You should use a class selector to target the class `green`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.green')); -``` - -Your `.green` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 0, 0)'); -``` - -Your code should no longer have a `.three` class selector. - -```js -assert(!new __helpers.CSSHelp(document).getStyle('.three')); -``` - -You should use a class selector to target the class `blue`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -Your `.blue` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background-color: rgb(255, 0, 0); -} - -.two { - background-color: rgb(0, 0, 0); -} - -.three { - background-color: rgb(0, 0, 0); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md deleted file mode 100644 index 76f5b6fd0c98f1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 619b761916dac02643940022 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -A very common way to apply color to an element with CSS is with hexadecimal or hex values. While hex values sound complicated, they're really just another form of RGB values. - -Hex color values start with a `#` character and take six characters from 0-9 and A-F. The first pair of characters represent red, the second pair represent green, and the third pair represent blue. For example, `#4B5320`. - -In the `.green` CSS rule, set the `background-color` property to a hex color code with the values `00` for red, `FF` for green, and `00` blue. - -# --hints-- - -Your `.green` CSS rule should have a `background-color` property set to `#00FF00`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 255, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background-color: rgb(255, 0, 0); -} - ---fcc-editable-region-- -.green { - background-color: rgb(0, 0, 0); -} ---fcc-editable-region-- - -.blue { - background-color: rgb(0, 0, 0); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md deleted file mode 100644 index 0abd3e727f67f8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 619b7c3c83de403126b69c1e -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -You may already be familiar with decimal, or base 10 values, which go from 0 - 9. Hexadecimal, or base 16 values, go from 0 - 9, then A - F: - -``` -0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F -``` - -With hex colors, `00` is 0% of that color, and `FF` is 100%. So `#00FF00` translates to 0% red, 100% green, and 0% blue, and is the same as `rgb(0, 255, 0)`. - -Lower the intensity of green by setting green value of the hex color to `7F`. - -# --hints-- - -Your `.green` CSS rule should have a `background-color` property set to `#007F00`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 127, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background-color: rgb(255, 0, 0); -} - ---fcc-editable-region-- -.green { - background-color: #00FF00; -} ---fcc-editable-region-- - -.blue { - background-color: rgb(0, 0, 0); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md deleted file mode 100644 index 6ee8443a6b2fb6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 619b7fd56aa2253778bcf5f7 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -The HSL color model, or hue, saturation, and lightness, is another way to represent colors. - -The CSS `hsl` function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness. - -If you imagine a color wheel, the hue red is at 0 degrees, green is at 120 degrees, and blue is at 240 degrees. - -Saturation is the intensity of a color from 0%, or gray, to 100% for pure color. - -Lightness is how bright a color appears, from 0%, or complete black, to 100%, complete white, with 50% being neutral. - -In the `.blue` CSS rule, use the `hsl` function to change the `background-color` property to pure blue. Set the hue to `240`, the saturation to `100%`, and the lightness to `50%`. - -# --hints-- - -Your `.blue` CSS rule should have a `background-color` property set to `hsl(240, 100%, 50%)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background-color: rgb(255, 0, 0); -} - -.green { - background-color: #007F00; -} - ---fcc-editable-region-- -.blue { - background-color: rgb(0, 0, 0); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md deleted file mode 100644 index e0d08c837b7791..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: 61a489b8579e87364b2d2cdb -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -You've learned a few ways to set flat colors in CSS, but you can also use a color transition, or gradient, on an element. - -A gradient is when one color transitions into another. The CSS `linear-gradient` function lets you control the direction of the transition along a line, and which colors are used. - -One thing to remember is that the `linear-gradient` function actually creates an `image` element, and is usually paired with the `background` property which can accept an image as a value. - -In the `.red` CSS rule, change the `background-color` property to `background`. - -# --hints-- - -Your `.red` CSS rule should have a `background` property with the value `rgb(255, 0, 0)`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.red').cssText, 'background: rgb(255, 0, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background-color: rgb(255, 0, 0); -} ---fcc-editable-region-- - -.green { - background-color: #007F00; -} - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md deleted file mode 100644 index 317eb2d0ecaae4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 61a493ead935c148d2b76312 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -The `linear-gradient` function is very flexible -- here is the basic syntax you'll use in this tutorial: - -```css -linear-gradient(gradientDirection, color1, color2, ...); -``` - -`gradientDirection` is the direction of the line used for the transition. `color1` and `color2` are color arguments, which are the colors that will be used in the transition itself. These can be any type of color, including color keywords, hex, `rgb`, or `hsl`. - -Now you'll apply a red-to-green gradient along a 90 degree line to the first marker. - -First, in the `.red` CSS rule, set the `background` property to `linear-gradient()`, and pass it the value `90deg` as the `gradientDirection`. - -# --hints-- - -Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg)`. - -```js -assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background: rgb(255, 0, 0); -} ---fcc-editable-region-- - -.green { - background-color: #007F00; -} - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md deleted file mode 100644 index 3b5ca08bde0c22..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 61a498399534644f59cff05e -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -As you can see, the `linear-gradient` function produced a smooth red-green gradient. While the `linear-gradient` function needs a minimum of two color arguments to work, it can accept many color arguments. - -Use the `rgb` function to add pure blue as the third color argument to the `linear-gradient` function. - -# --hints-- - -Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))`. - -```js -assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0)); -} ---fcc-editable-region-- - -.green { - background-color: #007F00; -} - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md deleted file mode 100644 index 071ed1df692b65..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 61a49d15bdbb5e57cc6fd280 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Color-stops allow you to fine-tune where colors are placed along the gradient line. They are a length unit like `px` or percentages that follow a color in the `linear-gradient` function. - -For example, in this red-black gradient, the transition from red to black takes place at the 90% point along the gradient line, so red takes up most of the available space: - -```css -linear-gradient(90deg, red 90%, black); -``` - -In the `linear-gradient` function, add a `75%` color stop after the first red color argument. Do not add color stops to the other colors arguments. - -# --hints-- - -Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`. - -```js -assert.include(['linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)); -} ---fcc-editable-region-- - -.green { - background-color: #007F00; -} - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md deleted file mode 100644 index 4f5d1112224b36..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 61a4a53c4459446dc134a1c6 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Now that you know the basics of how the `linear-gradient` function and color-stops work, you can use them to make the markers look more realistic. - -In the `linear-gradient` function, set `gradientDirection` to `180deg`. - -# --hints-- - -Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`. - -```js -assert.include(['linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255)); -} ---fcc-editable-region-- - -.green { - background-color: #007F00; -} - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md deleted file mode 100644 index 762f8303eaec9a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 61a4a6e908bc34725b4c25ac -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Next, set the color-stop for red to `0%`, the color-stop for green to `50%`, and the color-stop for blue to `100%`; - -# --hints-- - -Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`. - -```js -assert.include(['linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255)); -} ---fcc-editable-region-- - -.green { - background-color: #007F00; -} - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md deleted file mode 100644 index 8d4a79c76183fd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 61a4a7877da33a73a1c1723e -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Now that the color-stops are set, you'll apply different shades of red to each color argument in the `linear-gradient` function. The shades on the top and bottom edges of the marker will be darker, while the one in the middle will be lighter, as if there's a light above it. - -For the first color argument, which is currently pure red, update the `rgb` function so the value for red is `122`, the value for green is `74`, and the value for blue is `14`. - -# --hints-- - -Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`. - -```js -assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%); -} ---fcc-editable-region-- - -.green { - background-color: #007F00; -} - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md deleted file mode 100644 index dbf997b5363fa8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 61a4ac092eb21e7dbfe61c33 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Now modify the second color argument in the `linear-gradient` function, which is currently pure green. - -Update the `rgb` function so the value for red is `245`, the value of green is `62`, and the value of blue is `113`. - -# --hints-- - -Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%)`. - -```js -assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%); -} ---fcc-editable-region-- - -.green { - background-color: #007F00; -} - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md deleted file mode 100644 index b1b45450da6b25..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 61a4acbb5587197f68544d00 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Finally, modify the third color argument in the `linear-gradient` function, which is currently pure blue. - -Update the `rgb` function so the value for red is `162`, the value of green is `27`, and the value of blue is `27`. - -# --hints-- - -Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%)`. - -```js -assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%); -} ---fcc-editable-region-- - -.green { - background-color: #007F00; -} - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md deleted file mode 100644 index e76ee3a41f0977..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 61a4ada3aabeec822b2975d9 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -The red marker is looking much more realistic. Now you'll do the same for the green marker, using a combination of the `linear-gradient` function and hex colors. - -In the `.green` CSS rule, change the `background-color` property to `background`. - -# --hints-- - -Your `.green` CSS rule should have a `background` property with the value `#007F00`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.green').cssText, 'background: rgb(0, 127, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); -} - ---fcc-editable-region-- -.green { - background-color: #007F00; -} ---fcc-editable-region-- - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md deleted file mode 100644 index 0cd2dbfedf8fe1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 61a4ae5f29eb5584187201c3 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -For this marker, you'll use hex color codes for your gradient. - -Use the `linear-gradient` function and set `gradientDirection` to `180deg`. And for the first color argument, use a hex color code with the values `55` for red, `68` for green, and `0D` for blue. - -# --hints-- - -Your `.green` CSS rule should have a `background` property with the value `linear-gradient(180deg, #55680D)`. - -```js -assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:linear-gradient\(180deg,#55680D\)/i); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); -} - ---fcc-editable-region-- -.green { - background: #007F00; -} ---fcc-editable-region-- - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md deleted file mode 100644 index 7ddc5efcf8cc8c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 61a5be9833e7dc178de2af10 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -That's looking better, but the bottom edge of the green marker needs to be darker to add a little more dimension. - -In the same `linear-gradient` function, add a hex color code with the values `11` for red, `6C` for green, and `31` for blue as the third color argument. - -# --hints-- - -Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E, #116C31)`. - -```js -assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); -} - ---fcc-editable-region-- -.green { - background: linear-gradient(180deg, #55680D, #71F53E); -} ---fcc-editable-region-- - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md deleted file mode 100644 index 0c4984223d48c1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 61a5bfe091060f1d6a629dd0 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Even without the color-stops, you might have noticed that the colors for the green marker transition at the same points as the red marker. The first color is at the start (0%), the second is in the middle (50%), and the last is at the end (100%) of the gradient line. - -The `linear-gradient` function automatically calculates these values for you, and places colors evenly along the gradient line by default. - -In the `.red` CSS rule, remove the three color stops from the `linear-gradient` function to clean up your code a bit. - -# --hints-- - -Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. - -```js -assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); -} ---fcc-editable-region-- - -.green { - background: linear-gradient(180deg, #55680D, #71F53E, #116C31); -} - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md deleted file mode 100644 index f5eea79d8ab74d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 61a5c906ab73313316e342f0 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -If no `gradientDirection` argument is provided to the `linear-gradient` function, it arranges colors from top to bottom, or along a 180 degree line, by default. - -Clean up your code a little more by removing the `gradientDirection` argument from both `linear-gradient` functions. - -# --hints-- - -You should remove the `gradientDirection` arguments from the `linear-gradient` functions in your `.red` and `.green` CSS rules. - -```js -assert(!code.match(/linear-gradient\s*\(\s*180deg/gi)); -``` - -Your `.red` CSS rule should have a `background` property set to `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. - -```js -assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); -``` - -Your `.green` CSS rule should have a `background` property set to `linear-gradient(#55680D, #71F53E, #116C31)`. - -```js -assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(180deg, #55680D, #71F53E, #116C31); -} ---fcc-editable-region-- - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md deleted file mode 100644 index a734d04b0a5611..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 61a5ca57f50ded36d33eef96 -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Now you'll apply a gradient to the blue marker, this time using the `hsl` function as color arguments. - -In the `.blue` CSS rule, change the `background-color` property to `background`. - -# --hints-- - -Your `.blue` CSS rule should have a `background` property with the value `hsl(240, 100%, 50%)`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.blue').cssText, 'background: rgb(0, 0, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - ---fcc-editable-region-- -.blue { - background-color: hsl(240, 100%, 50%); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md deleted file mode 100644 index 058d6e81f78d4d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 61a5d594b887335228ee6533 -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Use the `linear-gradient` function, and pass in the `hsl` function with the values `186` for hue, `76%` for saturation, and `16%` for lightness as the first color argument. - -# --hints-- - -Your `.blue` CSS rule should have a `background` property with the value `linear-gradient(hsl(186, 76%, 16%))`. - -```js -assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:linear-gradient\(hsl\(186,76%,16%\)\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - ---fcc-editable-region-- -.blue { - background: hsl(240, 100%, 50%); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md deleted file mode 100644 index e82ad2175b7b41..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 61a5d6701ee08953ca375243 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -As the second color argument, pass in the `hsl` function with the values `223` for hue, `90%` for saturation, and `60%` for lightness. - -# --hints-- - -Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%))`. - -```js -assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - ---fcc-editable-region-- -.blue { - background: linear-gradient(hsl(186, 76%, 16%)); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md deleted file mode 100644 index c79ab37d381def..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 61a5d79c858bef560e26c685 -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -And as the third color argument, pass in the `hsl` function with the values `240` for hue, `56%` for saturation, and `42%` for lightness. - -# --hints-- - -Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))`. - -```js -assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - ---fcc-editable-region-- -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%)); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md deleted file mode 100644 index 768d6784853703..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 61a5d7ef1cfcf45764df07a2 -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker. - -Inside the red marker `div`, create a new `div` and give it a class of `sleeve`. - -# --hints-- - -Your new `div` element should be within the red marker's `div` element. - -```js -const redMarkerChildren = [...document.querySelector('.red')?.children]; -assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1); -``` - -Your new `div` element should have a class of `sleeve`. - -```js -const redMarkerChild = [...document.querySelector('.red')?.children][0]; -assert(redMarkerChild?.classList?.contains('sleeve')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
- --fcc-editable-region-- -
-
- --fcc-editable-region-- -
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md deleted file mode 100644 index 2f1dfabe801130..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 61adc60b69cd4b87739d2174 -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Create a new CSS rule that targets the class `sleeve`. Set the `width` property to `110px`, and the `height` property to `25px`. - -# --hints-- - -You should use a class selector to target class `sleeve`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sleeve')); -``` - -Your `.sleeve` CSS rule should have a `width` property set to `110px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.width === '110px'); -``` - -Your `.sleeve` CSS rule should have a `height` property set to `25px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.height === '25px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md deleted file mode 100644 index ad7567ddaa7fdb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 61adc91467b5d59328b9f781 -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -In the last project, you learned a little bit about borders and the `border-color` property. - -All HTML elements have borders, though they're usually set to `none` by default. With CSS, you can control all aspects of an element's border, and set the border on all sides, or just one side at a time. For a border to be visible, you need to set its width and style. - -In the `.sleeve` CSS rule, add the `border-left-width` property with the value `10px`. - -# --hints-- - -Your `.sleeve` CSS rule should have a `border-left-width` property and with the value `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftWidth === '10px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - ---fcc-editable-region-- -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); -} ---fcc-editable-region-- - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md deleted file mode 100644 index 041dd4629ae2f1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 61add79e739a5faee9d96080 -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Borders have several styles to choose from. You can make your border a solid line, but you can also use a dashed or dotted line if you prefer. Solid border lines are probably the most common. - -In the `.sleeve` CSS rule, add the `border-left-style` property with the value `solid`. - -# --hints-- - -Your `.sleeve` CSS rule should have a `border-left-style` property and with the value `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - ---fcc-editable-region-- -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left-width: 10px; -} ---fcc-editable-region-- - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md deleted file mode 100644 index c1b319d7535388..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 61add929e41980b1edbdba7e -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Your border should be visible now. If no color is set, black is used by default. - -But to make your code more readable, it's better to set the border color explicitly. - -In the `.sleeve` CSS rule, add the `border-left-color` property with the value `black`. - -# --hints-- - -Your `.sleeve` CSS rule should have a `border-left-color` property and with the value `black`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftColor === 'black'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - ---fcc-editable-region-- -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left-width: 10px; - border-left-style: solid; -} ---fcc-editable-region-- - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md deleted file mode 100644 index f01a67153e3ce4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 61addaf7e83988b59a7d18ff -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -The `border-left` shorthand property lets you to set the left border's width, style, and color at the same time. - -Here is the syntax: - -```css -border-left: width style color; -``` - -In the `.sleeve` CSS rule, replace the `border-left-width`, `border-left-style`, and `border-left-color` properties with the `border-left` shorthand property. The values for the width, style, and color of the left border should be the same. - -# --hints-- - -Your `.sleeve` CSS rule should not have a `border-left-width` property and value. - -```js -assert(!/border-left-width/g.test(code)); -``` - -Your `.sleeve` CSS rule should not have a `border-left-style` property and value. - -```js -assert(!/border-left-style/g.test(code)); -``` - -Your `.sleeve` CSS rule should not have a `border-left-color` property and value. - -```js -assert(!/border-left-color/g.test(code)); -``` - -Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px solid black`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft, '10px solid black'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - ---fcc-editable-region-- -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left-width: 10px; - border-left-style: solid; - border-left-color: black; -} ---fcc-editable-region-- - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md deleted file mode 100644 index 19048d7a175b35..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 61ade49b2dad60c076cbd32d -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -Your marker is looking good. But to make it look even more realistic, you can change the border style to double solid borders. - -For the `border-left` shorthand property, change the border style value from `solid` to `double`. - -# --hints-- - -Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double black`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double black'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - ---fcc-editable-region-- -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px solid black; -} ---fcc-editable-region-- - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md deleted file mode 100644 index 764ea946442f5b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 61b092eb9e7fc020b43b1bb2 -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -To make the marker look more realistic, give the sleeve a transparent white color. - -First, set the sleeve element's `background-color` to `white`. - -# --hints-- - -Your `.sleeve` CSS rule should have a `background-color` property set to `white`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'white'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.sleeve { - width: 110px; - height: 25px; -} ---fcc-editable-region-- - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md deleted file mode 100644 index 264f0f5531e70d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 61b093179e7fc020b43b1bb3 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -Opacity describes how opaque, or non-transparent, something is. For example, a solid wall is opaque, and no light can pass through. But a drinking glass is much more transparent, and you can see through the glass to the other side. - -With the CSS `opacity` property, you can control how opaque or transparent an element is. With the value `0`, or 0%, the element will be completely transparent, and at `1.0`, or 100%, the element will be completely opaque like it is by default. - -In the `.sleeve` CSS rule, set the `opacity` property to `0.5`. - -# --hints-- - -Your `.sleeve` CSS rule should have an `opacity` property set to `0.5`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity === '0.5'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.sleeve { - width: 110px; - height: 25px; - background-color: white; -} ---fcc-editable-region-- - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md deleted file mode 100644 index 93cdc0bfa9dabc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 61b093219e7fc020b43b1bb4 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Another way to set the opacity for an element is with the alpha channel. Similar to the `opacity` property, the alpha channel controls how transparent or opaque a color is. - -You've already set sleeve's opacity with a named color and the `opacity` property, but you can add an alpha channel to the other CSS color properties. - -Inside the `.sleeve` rule, remove the `opacity` property and value. - -# --hints-- - -Your `.sleeve` CSS rule should not have an `opacity` property and value. - -```js -assert(!new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.sleeve { - width: 110px; - height: 25px; - background-color: white; - opacity: 0.5; -} ---fcc-editable-region-- - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md deleted file mode 100644 index c45976bdcb72c2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 61b093329e7fc020b43b1bb5 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -You're already familiar with using the `rgb` function to set colors. To add an alpha channel to an `rgb` color, use the `rgba` function instead. - -The `rgba` function works just like the `rgb` function, but takes one more number from `0` to `1.0` for the alpha channel: - -```css -rgba(redValue, greenValue, blueValue, alphaValue); -``` - -In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity. - -# --hints-- - -Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.sleeve { - width: 110px; - height: 25px; - background-color: white; -} ---fcc-editable-region-- - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md deleted file mode 100644 index ec8be74a9254e6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 61b093429e7fc020b43b1bb6 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Your sleeve is looking good, but it would look even better if it was positioned more toward the right side of the marker. One way to do that is to add another element before the sleeve to push it to the right. - -Add a new `div` with the class `cap` before the sleeve `div` element. - -# --hints-- - -Your new `div` element should be within the red marker `div`. - -```js -const redMarkerChildren = [...document.querySelector('div.red')?.children]; -assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2); -``` - -Your new `div` element should have a class of `cap`. - -```js -const redMarkerChildren = [...document.querySelector('div.red')?.children]; -assert(redMarkerChildren.some(child => child?.classList?.contains('cap'))); -``` - -Your cap `div` should be before the sleeve `div`. - -```js -const redMarkerChildren = [...document.querySelector('div.red')?.children]; -const cap = document.querySelector('div.cap'); -const sleeve = document.querySelector('div.sleeve'); -assert(redMarkerChildren.indexOf(cap) < redMarkerChildren.indexOf(sleeve)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
- --fcc-editable-region-- -
-
-
- --fcc-editable-region-- -
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md deleted file mode 100644 index f9ee6e25855340..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -id: 61b0934c9e7fc020b43b1bb7 -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -Create a new CSS rule to target the class `cap`. In the new rule, set the `width` property to `60px`, and the `height` to `25px`. - -# --hints-- - -You should use a class selector to target the class `cap`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cap')); -``` - -Your `.cap` CSS rule should have a `width` property set to `60px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cap')?.width === '60px'); -``` - -Your `.cap` CSS rule should have a `height` property set to `25px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cap')?.height === '25px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md deleted file mode 100644 index efc078c2b6745c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 61b0936d9e7fc020b43b1bb8 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -It looks like your sleeve disappeared, but don't worry -- it's still there. What happened is that your new cap `div` is taking up the entire width of the marker, and is pushing the sleeve down to the next line. - -This is because the default `display` property for `div` elements is `block`. So when two `block` elements are next to each other, they stack like actual blocks. For example, your marker elements are all stacked on top of each other. - -To position two `div` elements on the same line, set their `display` properties to `inline-block`. - -Create a new rule to target both the `cap` and `sleeve` classes, and set `display` to `inline-block`. - -# --hints-- - -You should use a class selector to target both the `cap` and `sleeve` classes. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve') || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')); -``` - -Your CSS rule should have a `display` property set to `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve')?.display === 'inline-block' || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md deleted file mode 100644 index 86e62e58584822..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 61b095989e7fc020b43b1bb9 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -You'll use the `rgb` function for the colors of this gradient. - -In the `linear-gradient` function, use the `rgb` function to set the first color argument to pure red. - -# --hints-- - -Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg, rgb(255, 0, 0))`. - -```js -assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg,rgb\(255,0,0\)\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(90deg); -} ---fcc-editable-region-- - -.green { - background-color: #007F00; -} - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md deleted file mode 100644 index 2feee34f4becae..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 61b095a79e7fc020b43b1bba -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -You won't see gradient yet because the `linear-gradient` function needs at least two color arguments to work. - -In the same `linear-gradient` function, use the `rgb` function to set the second color argument to pure green. - -# --hints-- - -Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0))`. - -```js -assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(90deg, rgb(255, 0, 0)); -} ---fcc-editable-region-- - -.green { - background-color: #007F00; -} - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md deleted file mode 100644 index df827472464e42..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 61b095c79e7fc020b43b1bbb -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -For the second color argument, use a hex color code with the values `71` for red, `F5` for green, and `3E` for blue. - -# --hints-- - -Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E)`. - -```js -assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.red { - background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); -} - ---fcc-editable-region-- -.green { - background: linear-gradient(180deg, #55680D); -} ---fcc-editable-region-- - -.blue { - background-color: hsl(240, 100%, 50%); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md deleted file mode 100644 index 991db53fbf6adc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 61b09f739aa6572d2064f9b8 -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -The black color of your border looks pretty harsh against the more transparent sleeve. You can use an alpha channel to lower the opacity of the black border. - -For the `border-left` shorthand property, use the `rgba` function to set the color value to pure black with 75% opacity. - -# --hints-- - -Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double rgba(0, 0, 0, 0.75)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double rgba(0, 0, 0, 0.75)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - ---fcc-editable-region-- -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px double black; -} ---fcc-editable-region-- - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md deleted file mode 100644 index 8d04e6f5a58885..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 61b0a1b2af494934b7ec1a72 -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Awesome. Your red marker is looking good. Now all you need to do is add the caps and sleeves to your other markers. - -Add a cap and sleeve to both the green and blue markers. You can just copy the `div` elements from the red marker and paste them into the other two markers. - -# --hints-- - -Your green marker `div` should contain two `div` elements. - -```js -const greenMarkerChildren = [...document.querySelector('.green')?.children]; -assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2); -``` - -Your green marker's cap `div` element should be before the sleeve `div` element. - -```js -const greenMarkerChildren = [...document.querySelector('.green')?.children]; -const greenMarkerCap = document.querySelector('.green .cap'); -const greenMarkerSleeve = document.querySelector('.green .sleeve'); -assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve)); -``` - -Your blue marker `div` should contain two `div` elements. - -```js -const blueMarkerChildren = [...document.querySelector('.blue')?.children]; -assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2); -``` - -Your green marker's cap `div` element should be before the sleeve `div` element. - -```js -const blueMarkerChildren = [...document.querySelector('.blue')?.children]; -const blueMarkerCap = document.querySelector('.blue .cap'); -const blueMarkerSleeve = document.querySelector('.blue .sleeve'); -assert(blueMarkerChildren.indexOf(blueMarkerCap) < blueMarkerChildren.indexOf(blueMarkerSleeve)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
- --fcc-editable-region-- -
-
-
-
-
-
-
-
- --fcc-editable-region-- -
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px double rgba(0, 0, 0, 0.75); -} - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md deleted file mode 100644 index bdfaac6c189174..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -id: 61b0a44a6b865738ba49b9fb -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -The last thing you'll do is add a slight shadow to each marker to make them look even more realistic. - -The `box-shadow` property lets you apply one or more shadows around an element. Here is basic syntax: - -```css -box-shadow: offsetX offsetY color; -``` - -Start by adding a simple shadow to the red marker. - -In the `.red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`. - -# --hints-- - -Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px red`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px double rgba(0, 0, 0, 0.75); -} - -.cap, .sleeve { - display: inline-block; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); -} ---fcc-editable-region-- - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md deleted file mode 100644 index 5c65376f1273bc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 61b306305810f1c9040ce5a2 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -As you can see, you added a simple red shadow around your marker that's 5 pixels to the right, and 5 pixels down. - -But what if you wanted to position your shadow on the opposite side? You can do that by using negative values for `offsetX` and `offsetY`. - -Update the values for the `box-shadow` property, and set `offsetX` to `-5px`, and `offsetY` to `-5px`. - -# --hints-- - -Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `-5px -5px red`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red -5px -5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px double rgba(0, 0, 0, 0.75); -} - -.cap, .sleeve { - display: inline-block; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); - box-shadow: 5px 5px red; -} ---fcc-editable-region-- - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md deleted file mode 100644 index 493568d18aec54..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -id: 61b30995968123ceb6b76167 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Notice that the edges of the shadow are sharp. This is because there is an optional `blurRadius` value for the `box-shadow` property: - -```css -box-shadow: offsetX offsetY blurRadius color; -``` - -If a `blurRadius` value isn't included, it defaults to `0` and produces sharp edges. The higher the value of `blurRadius`, the greater the blurring effect is. - -In the `.green` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, `5px` for `blurRadius`, and `green` for `color`. - -# --hints-- - -Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px 5px green`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 5px 5px 5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px double rgba(0, 0, 0, 0.75); -} - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); - box-shadow: -5px -5px red; -} - ---fcc-editable-region-- -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); -} ---fcc-editable-region-- - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md deleted file mode 100644 index 00b6d4bb92a65d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -id: 61b30a286c228bd0c493c09a -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -But what if you wanted to expand the shadow out further? You can do that with the optional `spreadRadius` value: - -```css -box-shadow: offsetX offsetY blurRadius spreadRadius color; -``` - -Like `blurRadius`, `spreadRadius` defaults to `0` if it isn't included. - -Practice by adding a 5 pixel shadow directly around the blue marker. - -In the `.blue` CSS rule, add the `box-shadow` property with the values `0` for `offsetX`, `0` for `offsetY`, `0` for `blurRadius`, `5px` for `spreadRadius`, and `blue` for `color`. - -# --hints-- - -Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 0 5px blue`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 0px 5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px double rgba(0, 0, 0, 0.75); -} - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); - box-shadow: -5px -5px red; -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); - box-shadow: 5px 5px 5px green; -} - ---fcc-editable-region-- -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md deleted file mode 100644 index 0aa6701e7b1d61..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 61b31287fb580ae75a486047 -title: Step 90 -challengeType: 0 -dashedName: step-90 ---- - -# --description-- - -Now that you're familiar with the `box-shadow` property you can finalize the shadows, starting with the one for the red marker. - -In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, `spreadRadius` is `0`, and `color` is `red`. - -# --hints-- - -Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 red`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 0px 0px 20px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px double rgba(0, 0, 0, 0.75); -} - -.cap, .sleeve { - display: inline-block; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); - box-shadow: -5px -5px red; -} ---fcc-editable-region-- - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); - box-shadow: 5px 5px 5px green; -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); - box-shadow: 0 0 0 5px blue; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md deleted file mode 100644 index a1cfec051adfb8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 61b315e76a63b3ecbbb11b75 -title: Step 91 -challengeType: 0 -dashedName: step-91 ---- - -# --description-- - -Next, update the `color` value of the red marker's `box-shadow` property. - -Replace the named color with the `rgba` function. Use the values `83` for red, `14` for green, `14` for `blue` and `0.8` for the alpha channel. - -# --hints-- - -Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 rgba(83, 14, 14, 0.8)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'rgba(83, 14, 14, 0.8) 0px 0px 20px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px double rgba(0, 0, 0, 0.75); -} - -.cap, .sleeve { - display: inline-block; -} - ---fcc-editable-region-- -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); - box-shadow: 0 0 20px 0 red; -} ---fcc-editable-region-- - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); - box-shadow: 5px 5px 5px green; -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); - box-shadow: 0 0 0 5px blue; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md deleted file mode 100644 index 7889c2783a9c71..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 61b3183655ec10efd8c0bb07 -title: Step 92 -challengeType: 0 -dashedName: step-92 ---- - -# --description-- - -The shadows for your green and blue markers will have the same position, blur, and spread. The only difference will be the colors. - -In the `.green` and `.blue` CSS rules, update the values for the `box-shadow` properties so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. Leave the colors as `green` and `blue` for now. - -# --hints-- - -Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 green`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px'); -``` - -Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 blue`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px double rgba(0, 0, 0, 0.75); -} - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); - box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); -} - ---fcc-editable-region-- -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); - box-shadow: 5px 5px 5px green; -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); - box-shadow: 0 0 0 5px blue; -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md deleted file mode 100644 index 0101ed45263c19..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 61b31a451057fff645ec09be -title: Step 93 -challengeType: 0 -dashedName: step-93 ---- - -# --description-- - -For the green marker's `box-shadow` property, replace the named color with a hex color code. Use the values `3B` for red, `7E` for green, `20` for blue, and `CC` for the alpha channel. - -# --hints-- - -Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 #3B7E20CC`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'rgba(59, 126, 32, 0.8) 0px 0px 20px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px double rgba(0, 0, 0, 0.75); -} - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); - box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); -} - ---fcc-editable-region-- -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); - box-shadow: 0 0 20px 0 green; -} ---fcc-editable-region-- - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); - box-shadow: 0 0 20px 0 blue; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md deleted file mode 100644 index 167c34d9024cbc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 61b31cd7b0c76bfc076b4719 -title: Step 94 -challengeType: 0 -dashedName: step-94 ---- - -# --description-- - -Finally, for the blue marker's `box-shadow` property, replace the named color with the `hsla` function. Use the values `223` for hue, `59%` for saturation, `31%` for lightness, and `0.8` for the alpha channel. - -And with that, your set of colored markers is complete! Well done. - -# --hints-- - -Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 hsla(223, 59%, 31%, 0.8)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'rgba(32, 59, 126, 0.8) 0px 0px 20px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px double rgba(0, 0, 0, 0.75); -} - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); - box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); - box-shadow: 0 0 20px 0 #3B7E20CC; -} - ---fcc-editable-region-- -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); - box-shadow: 0 0 20px 0 blue; -} ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - - - Colored Markers - - - -

CSS Color Markers

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -h1 { - text-align: center; -} - -.container { - background-color: rgb(255, 255, 255); - padding: 10px 0; -} - -.marker { - width: 200px; - height: 25px; - margin: 10px auto; -} - -.cap { - width: 60px; - height: 25px; -} - -.sleeve { - width: 110px; - height: 25px; - background-color: rgba(255, 255, 255, 0.5); - border-left: 10px double rgba(0, 0, 0, 0.75); -} - -.cap, .sleeve { - display: inline-block; -} - -.red { - background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); - box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); -} - -.green { - background: linear-gradient(#55680D, #71F53E, #116C31); - box-shadow: 0 0 20px 0 #3B7E20CC; -} - -.blue { - background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); - box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md deleted file mode 100644 index 1536fe8e56de47..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 61537485c4f2a624f18d7794 -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Begin with your standard HTML boilerplate. Add a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have an opening tag. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Your `DOCTYPE` declaration should be at the beginning of your HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -You should have an opening `head` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `head` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `body` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `body` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -The `head` and `body` elements should be siblings. - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -The `head` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -The `body` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md deleted file mode 100644 index bf692c5d3629e7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: 61537a8054753e2f1f2a1574 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Within your `head` element, add a `meta` tag with the `name` set to `viewport` and the `content` set to `width=device-width, initial-scale=1`. - -Also add a `meta` tag with the `charset` set to `UTF-8`. - -# --hints-- - -You should have two `meta` elements. - -```js -const meta = document.querySelectorAll('meta'); -assert(meta?.length === 2); -``` - -One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content').match(/width=device-width,\s?initial-scale=1(.0)?/) && !m?.getAttribute('charset')); -assert.exists(target); -``` - -Your other `meta` element should have the `charset` attribute set to `UTF-8`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -assert.exists(target); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - - - - - - - - ---fcc-editable-region-- -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md deleted file mode 100644 index 70596f83160531..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 61537bb9b1a29430ac15ad38 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Within your `head` element, add a `title` element with the text set to `Photo Gallery`, and a `link` element to add your `styles.css` file to the page. - -# --hints-- - -Your `link` element should have an `href` attribute with the value `styles.css`. - -```js -assert.match(code, / - - - - - - - - - ---fcc-editable-region-- -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md deleted file mode 100644 index e213c5aed9798a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 61537c5f81f0cf325b4a854c -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Within the `body` element, create a `div` with the `class` set to `header`. - -Inside the `.header` element nest an `h1` element with the text `CSS FLEXBOX PHOTO GALLERY`. - -# --hints-- - -You should have a `div` element within your `body` element. - -```js -assert.exists(document.querySelector('body')?.querySelector('div')) -``` - -Your `div` element should have the `class` set to `header`. - -```js -assert(document?.querySelector('body')?.querySelector('div')?.classList?.contains('header')) -``` - -Your `.header` element should have an `h1` element. - -```js -assert.exists(document.querySelector('.header')?.querySelector('h1')); -``` - -Your `h1` should have the text `CSS FLEXBOX PHOTO GALLERY`. Remember that casing matters. - -```js -assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'CSS FLEXBOX PHOTO GALLERY') -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - - - - - - Photo Gallery - - - - - ---fcc-editable-region-- -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md deleted file mode 100644 index e1167f8ba62cee..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 61537c9eecea6a335db6da79 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Below your `.header` element, create a new `div` element with the `id` set to `gallery`. - -In that `#gallery` element, create ten `img` elements. - -# --hints-- - -You should create a second `div` element in your `body` element. - -```js -assert(document.querySelector('body')?.querySelectorAll('div')?.length === 2); -``` - -Your new `div` element should come after your `.header` element. - -```js -assert(document.querySelector('body')?.querySelectorAll('div')?.[0]?.classList?.contains('header')); -``` - -Your new `div` element should have an `id` set to `gallery`. - -```js -assert(document.querySelector('body')?.querySelectorAll('div')?.[1]?.id === 'gallery'); -``` - -Your `#gallery` element should have ten `img` elements. - -```js -assert(document.querySelector('#gallery')?.querySelectorAll('img')?.length === 10); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - ---fcc-editable-region-- -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md deleted file mode 100644 index 34949c840f8bcb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 61537d86bdc3dd343688fceb -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Now you need to give each `img` element a `src` attribute. You are going to use the format `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/#.jpg`, replacing `#` with the `img` element order. - -So your first `img` element would use `1.jpg`, your second would use `2.jpg`, and so on. - -# --hints-- - -All ten of your `img` elements should have a `src` attribute. - -```js -const images = [...document.querySelectorAll('img')]; -assert(images.every(image => image.getAttribute('src'))); -``` - -Your first `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. - -```js -assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg'); -``` - -Your second `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg`. - -```js -assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg'); -``` - -Your third `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg`. - -```js -assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg'); -``` - -Your fourth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg`. - -```js -assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg'); -``` - -Your fifth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg`. - -```js -assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg'); -``` - -Your sixth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg`. - -```js -assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg'); -``` - -Your seventh `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg`. - -```js -assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg'); -``` - -Your eighth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg`. - -```js -assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg'); -``` - -Your ninth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`. - -```js -assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg'); -``` - -Your tenth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg`. - -```js -assert(document.querySelectorAll('img')?.[9]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
---fcc-editable-region-- - ---fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md deleted file mode 100644 index 2121d83e2e2442..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 615380dff67172357fcf0425 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Normalize your box model by creating a `*` selector and setting the `box-sizing` property to `border-box`. - -# --hints-- - -You should have a `*` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); -``` - -Your `*` selector should have a `box-sizing` property set to `border-box`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md deleted file mode 100644 index a92194e651c8d8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 6153893900438b4643590367 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Remove the margin from your `body` element, set the font to `Arial`, and give it a background color of `#EBE7E7`. - -# --hints-- - -You should have a `body` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')) -``` - -Your `body` selector should have a `font-family` property set to `Arial`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'Arial'); -``` - -Your `body` selector should have a `background-color` property set to `#EBE7E7`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(235, 231, 231)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -#gallery img { - width: 25%; - height: 300px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md deleted file mode 100644 index 6fba2d7482b571..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 6153897c27f6334716ee5abe -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Align your `.header` text in the center, give it a padding of `32px` on all sides, and set the background to `#E0DDDD`. - -# --hints-- - -You should have a `.header` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); -``` - -Your `.header` selector should have a `text-align` property set to `center`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); -``` - -Your `.header` selector should have a `padding` property set to `32px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); -``` - -Your `.header` selector should have a `background-color` property set to `#E0DDDD`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(224, 221, 221)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -#gallery img { - width: 25%; - height: 300px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md deleted file mode 100644 index a29ef153ae05a4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: 615389bd81347947ea7ba896 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Flexbox is a one-dimensional CSS layout approach that focuses on the flow of content. It offers the ability to control the way items are spaced and aligned within a container. - -To set an element to use Flexbox, you give it a `display` property set to `flex`. Create a `#gallery` selector and give it that property. - -# --hints-- - -You should have a `#gallery` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery')); -``` - -Your `#gallery` selector should have a `display` property set to `flex`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - -.header { - text-align: center; - padding: 32px; - background: #E0DDDD; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -#gallery img { - width: 25%; - height: 300px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md deleted file mode 100644 index 884da24b220c65..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 6153908a366afb4d57185c8d -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Flexbox can be thought of as having two axes, the main axis and the cross axis. The main axis is determined by the `flex-direction` property. If `flex-direction` is set to `row` or `row-reverse`, the main axis is horizontal. If `flex-direction` is set to `column` or `column-reverse`, the main axis is vertical. - -Give your `#gallery` selector a `flex-direction` property set to `row`. - -# --hints-- - -Your `#gallery` selector should have a `flex-direction` property set to `row`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === 'row'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - -.header { - text-align: center; - padding: 32px; - background: #E0DDDD; -} - ---fcc-editable-region-- -#gallery { - display: flex; -} ---fcc-editable-region-- - -#gallery img { - width: 25%; - height: 300px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md deleted file mode 100644 index 17c497e33ac297..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 615392916d83fa4f02f7e2cf -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -You may have noticed that your images have all moved onto the same row. - -The `flex-wrap` property determines how your items should behave when the flex container is too small. Setting this property to `wrap` will allow your items to wrap to the next row/column (depending on your main axis), where `nowrap` will prevent your items from wrapping. When this is set to `nowrap`, items may either shrink to fit or overflow. - -Give the `#gallery` selector a `flex-wrap` property set to `wrap`. You should see your images take a four-column layout. This is because you set their `width` to `25%` in an earlier step. - -# --hints-- - -Your `#gallery` selector should have a `flex-wrap` property set to `wrap`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - -.header { - text-align: center; - padding: 32px; - background: #E0DDDD; -} - ---fcc-editable-region-- -#gallery { - display: flex; - flex-direction: row; -} ---fcc-editable-region-- - -#gallery img { - width: 25%; - height: 300px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md deleted file mode 100644 index a298de6a4aba64..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 6153938dce8b294ff8f5a4e9 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them. - -Give your `#gallery` selector a `justify-content` property set to `center`. - -# --hints-- - -Your `#gallery` selector should have a `justify-content` property set to `center`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent === 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - -.header { - text-align: center; - padding: 32px; - background: #E0DDDD; -} - ---fcc-editable-region-- -#gallery { - display: flex; - flex-direction: row; - flex-wrap: wrap; -} ---fcc-editable-region-- - -#gallery img { - width: 25%; - height: 300px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md deleted file mode 100644 index 46b176542fbe8c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 6153947986535e5117e60615 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -The `align-items` property positions the flex content along the cross axis. In this case, with your `flex-direction` set to `row`, your cross axis would be vertical. - -To vertically center your images, give your `#gallery` selector an `align-items` property set to `center`. - -# --hints-- - -Your `#gallery` selector should have an `align-items` property set to `center`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - -.header { - text-align: center; - padding: 32px; - background: #E0DDDD; -} - ---fcc-editable-region-- -#gallery { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; -} ---fcc-editable-region-- - -#gallery img { - width: 25%; - height: 300px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md deleted file mode 100644 index 358354332f3c7c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 61539e07e7430b528fbffe21 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Give your `#gallery` selector a `padding` property set to `0 4px`. - -# --hints-- - -Your `#gallery` selector should have a `padding` property set to `0 4px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingTop, '0px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingBottom, '0px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingLeft, '4px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight, '4px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - -.header { - text-align: center; - padding: 32px; - background: #E0DDDD; -} - ---fcc-editable-region-- -#gallery { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: center; -} ---fcc-editable-region-- - -#gallery img { - width: 25%; - height: 300px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md deleted file mode 100644 index fe7642b8f3feb8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 61539f32a206bd53ec116465 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Notice how some of your images have become distorted. This is because the images have different aspect ratios. Rather than setting each aspect ratio individually, you can use the `object-fit` property to determine how images should behave. - -Give your `#gallery img` selector the `object-fit` property and set it to `cover`. This will tell the image to fill the `img` container while maintaining aspect ratio, resulting in cropping to fit. - -# --hints-- - -Your `#gallery img` selector should have an `object-fit` property set to `cover`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === 'cover'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - -.header { - text-align: center; - padding: 32px; - background: #E0DDDD; -} - -#gallery { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: center; - padding: 0 4px; -} - ---fcc-editable-region-- -#gallery img { - width: 25%; - height: 300px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md deleted file mode 100644 index 0154ed9493f862..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 6153a04847abee57a3a406ac -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Your images need some space between them. - -Give your `#gallery img` selector a `margin-top` property of `8px` and a `padding` property of `0 4px`. - -# --hints-- - -Your `#gallery img` selector should have a `margin-top` property of `8px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.marginTop === '8px'); -``` - -Your `#gallery img` selector should have a `padding` property of `0 4px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0px 4px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - -.header { - text-align: center; - padding: 32px; - background: #E0DDDD; -} - -#gallery { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: center; - padding: 0 4px; -} - ---fcc-editable-region-- -#gallery img { - width: 25%; - height: 300px; - object-fit: cover; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md deleted file mode 100644 index 1fdd256a020a06..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 6153a3485f0b20591d26d2a1 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Smooth out your images a bit by giving the `#gallery img` selector a `border-radius` property of `10px`. - -# --hints-- - -Your `#gallery img` selector should have a `border-radius` property set to `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius === '10px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - -.header { - text-align: center; - padding: 32px; - background: #E0DDDD; -} - -#gallery { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: center; - padding: 0 4px; -} - ---fcc-editable-region-- -#gallery img { - width: 25%; - height: 300px; - object-fit: cover; - margin-top: 8px; - padding: 0 4px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md deleted file mode 100644 index a89369dd15933d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 6153a3952facd25a83fe8083 -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Create a media query for screens smaller than `800px` in width. In that media query, create a `#gallery img` rule and set the `width` property to `50%`. This will convert your gallery to a two-column layout. - -# --hints-- - -You should add a new `@media` query. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1); -``` - -Your new `@media` query should have a `max-width` of `800px`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)'); -``` - -Your `@media` query should have a `#gallery img` rule. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)'); -assert(rules?.find(rule => rule.selectorText === '#gallery img')); -``` - -Your `#gallery img` rule should have a `width` property set to `50%`. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)'); -const imgRule = rules?.find(rule => rule.selectorText === '#gallery img'); -assert(imgRule?.style.width === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - -.header { - text-align: center; - padding: 32px; - background: #E0DDDD; -} - -#gallery { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: center; - padding: 0 4px; -} - -#gallery img { - width: 25%; - height: 300px; - object-fit: cover; - margin-top: 8px; - padding: 0 4px; - border-radius: 10px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md deleted file mode 100644 index c9a77e0f85f32b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 6153a3ebb4f7f05b8401b716 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Resize the preview to see the layout change from your media query. - -Finally, create another media query for screens smaller than `600px` wide. In that media query, create a `#gallery img` rule and set the `width` property to `100%`. This will give your gallery a single-column layout. - -Your CSS Flexbox Photo Gallery is now complete. - -# --hints-- - -You should have a second `@media` query. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2); -``` - -Your new `@media` query should come after your existing one. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)'); -``` - -Your new `@media` query should have a `max-width` of `600px`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === '(max-width: 600px)'); -``` - -Your new `@media` query should have a `#gallery img` selector. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)'); -assert(rules?.find(rule => rule?.selectorText === '#gallery img')); -``` - -Your `#gallery img` rule should have a `width` property set to `100%`. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)'); -const imgRule = rules?.find(rule => rule?.selectorText === '#gallery img'); -assert(imgRule?.style?.width === '100%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - -.header { - text-align: center; - padding: 32px; - background: #E0DDDD; -} - -#gallery { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: center; - padding: 0 4px; -} - -#gallery img { - width: 25%; - height: 300px; - object-fit: cover; - margin-top: 8px; - padding: 0 4px; - border-radius: 10px; -} - -@media (max-width: 800px) { - #gallery img { - width: 50%; - } -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial; - background: #EBE7E7; -} - -.header { - text-align: center; - padding: 32px; - background: #E0DDDD; -} - -#gallery { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: center; - padding: 0; -} - -#gallery img { - width: 25%; - height: 300px; - object-fit: cover; - margin-top: 8px; - padding: 0 4px; - border-radius: 10px; -} - -@media (max-width: 800px) { - #gallery img { - width: 50%; - } -} - -@media (max-width: 600px) { - #gallery img { - width: 100%; - } -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md deleted file mode 100644 index 1c70338424ecc3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 615f171d05def3218035dc85 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Your images are currently too large, and you will not be able to see your CSS changes. - -Create a `#gallery img` selector to target your images. Give it a `width` property set to `25%`. - -Also set the `height` property to `300px` to keep your images a uniform size. - -# --hints-- - -You should have a `#gallery img` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('#gallery img')) -``` - -Your `#gallery img` selector should have a `width` property set to `25%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.width === '25%') -``` - -Your `#gallery img` selector should have a `height` property set to `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

CSS FLEXBOX PHOTO GALLERY

-
- - - -``` - -```css -* { - box-sizing: border-box; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md deleted file mode 100644 index 380660bfae5dfe..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 61437d575fb98f57fa8f7f36 -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Begin with your standard HTML boilerplate. Add a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element. - -Add a `` tag with the appropriate `charset` and a `` tag for mobile responsiveness within the `head` element. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have an opening tag. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Your `DOCTYPE` declaration should be at the beginning of your HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -You should have an opening `` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -The `head` and `body` elements should be siblings. - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -The `head` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -The `body` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -You should have two `meta` elements. - -```js -const meta = document.querySelectorAll('meta'); -assert(meta?.length === 2); -``` - -One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); -assert.exists(target); -``` - -The other `meta` element should have the `charset` attribute set to `UTF-8`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -assert.exists(target); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md deleted file mode 100644 index 4b5f29e0f4bea7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 614385513d91ae5c251c2052 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Add a `title` element with the text `Magazine`, a `link` element for the `https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&display=swap` font stylesheet, a `link` for the `https://use.fontawesome.com/releases/v5.8.2/css/all.css` FontAwesome stylesheet, and a `link` for your `./styles.css` stylesheet. - -Your font stylesheet will load three separate fonts: `Anton`, `Baskervville`, and `Raleway`. - -# --hints-- - -Your code should have three `link` elements. - -```js -assert(code.match(//i) === null); -``` - -Your `link` elements should be within your `head` element. - -```js -const head = code.match(/(.|\r|\n)*<\/head>/i)?.[0]; -assert(head.match(/ link.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&display=swap')); -``` - -One of your link elements should have the `href` set to `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -```js -const links = [...document.querySelectorAll('link')]; -assert(links.find(link => link.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css')); -``` - -One of your `link` elements should have an `href` attribute with the value `styles.css`. - -```js -assert.match(code, / - ---fcc-editable-region-- - - - - ---fcc-editable-region-- - - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md deleted file mode 100644 index 713416750cc186..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 6143862a5e54455d262c212e -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Within your `body`, create a `main` element. Then in that element, create a `section` with a `class` set to `heading`. - -# --hints-- - -You should have a `main` element. - -```js -assert.exists(document.querySelector('main')); -``` - -Your `main` element should be within your `body` element. - -```js -assert(document.querySelector('main')?.parentElement?.localName === 'body'); -``` - -You should have a `section` element. - -```js -assert.exists(document.querySelector('section')); -``` - -Your `section` element should be within your `main` element. - -```js -assert(document.querySelector('section')?.parentElement?.localName === 'main'); -``` - -Your `section` element should have the `class` set to `heading`. - -```js -assert(document.querySelector('section')?.classList?.contains('heading')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - ---fcc-editable-region-- - ---fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md deleted file mode 100644 index 3bf03b08cf209c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -id: 6143869bb45bd85e3b1926aa -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Within your `.heading` element, create a `header` element with the `class` set to `hero`. - -In that element, create an `img` element with the `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`, the `alt` set to `freecodecamp logo`, and the `class` set to `hero-img`. - -The `loading` attribute on an `img` element can be set to `lazy` to tell the browser not to fetch the image resource until it is needed (as in, when the user scrolls the image into view). As an additional benefit, lazy loaded elements will not load until the non-lazy elements are loaded - this means users with slow internet connections can view the content of your page without having to wait for the images to load. - -Give your new `img` element a `loading` attribute set to `lazy`. - -# --hints-- - -You should create a `header` element. - -```js -assert.exists(document.querySelector('header')); -``` - -Your `header` element should be within your `.heading` element. - -```js -assert(document.querySelector('header')?.parentElement?.className === 'heading'); -``` - -Your `header` element should have the `class` set to `hero`. - -```js -assert(document.querySelector('header')?.className === 'hero'); -``` - -You should create an `img` element. - -```js -assert.exists(document.querySelector('img')); -``` - -Your `img` element should be within your `header` element. - -```js -assert(document.querySelector('img')?.parentElement?.localName === 'header'); -``` - -Your `img` element should have the `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`. - -```js -assert(document.querySelector('img')?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png'); -``` - -Your `img` element should have the `alt` set to `freecodecamp logo`. - -```js -assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo'); -``` - -Your `img` element should have the `loading` attribute set to `lazy`. - -```js -assert(document.querySelector('img')?.getAttribute('loading') === 'lazy'); -``` - -Your `img` element should have the `class` set to `hero-img`. - -```js -assert(document.querySelector('img')?.className === 'hero-img'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - ---fcc-editable-region-- -
-
- -
-
---fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md deleted file mode 100644 index 0284a61c0b0c98..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -id: 614387cbefeeba5f3654a291 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -After your `header` element, create a `div` with the `class` set to `author`. - -Within that `div`, create a `p` element with the `class` set to `author-name` and give it the text `By freeCodeCamp`. Wrap the `freeCodeCamp` portion in an `a` element with the `href` set to `https://freecodecamp.org`, and the `target` set to `_blank`. - - -Below that, add a second `p` element with the class `publish-date` and the text `March 7, 2019`. - -# --hints-- - -You should create a new `div` element. - -```js -assert.exists(document.querySelector('div')); -``` - -Your `div` element should come after your `header` element. - -```js -assert(document.querySelector('div')?.previousElementSibling?.localName === 'header'); -``` - -Your `div` element should have the `class` set to `author`. - -```js -assert(document.querySelector('div')?.className === 'author'); -``` - -You should create two new `p` elements. - -```js -assert(document.querySelectorAll('p')?.length === 3); -``` - -Your two new `p` elements should be within your `div` element. - -```js -assert.exists(document.querySelector('div')?.querySelectorAll('p')?.length === 2); -``` - -Your first new `p` element should have a `class` set to `author-name`. - -```js -assert(document.querySelector('div')?.querySelector('p')?.className === 'author-name'); -``` - -Your first new `p` element should have the text `By freeCodeCamp`. - -```js -assert(document.querySelector('div')?.querySelector('p')?.innerText === 'By freeCodeCamp'); -``` - -Your second new `p` element should have a `class` set to `publish-date`. - -```js -assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.className === 'publish-date'); -``` - -Your second new `p` element should have the text `March 7, 2019`. - -```js -assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.innerText === 'March 7, 2019'); -``` - -You should create a new `a` element. - -```js -assert.exists(document.querySelector('a')); -``` - -Your `a` element should be within your first new `p` element. - -```js -assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.localName === 'a'); -``` - -Your `a` element should have the `href` set to `https://freecodecamp.org`. - -```js -assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('href') === 'https://freecodecamp.org'); -``` - -Your `a` element should have the `target` set to `_blank`. - -```js -assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('target') === '_blank'); -``` - -Your `a` element should surround the text `freeCodeCamp`. - -```js -assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.textContent === 'freeCodeCamp'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
---fcc-editable-region-- - -
-
---fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md deleted file mode 100644 index dd2fb1d3b02512..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 614389f601bb4f611db98563 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Below your `.author` element, create a new `div` element with the class `social-icons`. - -Add five `a` elements within that new `div`, and give them the following `href` attributes. - -- The first `a` element should have an `href` set to `https://www.facebook.com/freecodecamp`. -- The second `a` element should have an `href` set to `https://twitter.com/freecodecamp`. -- The third `a` element should have an `href` set to `https://instagram.com/freecodecamp`. -- The fourth `a` element should have an `href` set to `https://www.linkedin.com/school/free-code-camp`. -- The fifth `a` element should have an `href` set to `https://www.youtube.com/freecodecamp`. - -# --hints-- - -You should create a new `div` element. - -```js -assert(document.querySelectorAll('div')?.length === 2); -``` - -Your new `div` element should come after your `.author` element. - -```js -assert(document.querySelector('.author')?.nextElementSibling?.localName === 'div'); -``` - -Your new `div` element should have the class `social-icons`. - -```js -assert(document.querySelector('.author')?.nextElementSibling?.classList?.contains('social-icons')); -``` - -Your `.social-icons` element should have five `a` elements. - -```js -assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.length === 5); -``` - -Your first `a` element should have an `href` set to `https://www.facebook.com/freecodecamp`. - -```js -assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[0]?.getAttribute('href')?.includes('https://www.facebook.com/freecodecamp')); -``` - -Your second `a` element should have an `href` set to `https://twitter.com/freecodecamp`. - -```js -assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[1]?.getAttribute('href'), 'https://twitter.com/freecodecamp'); -``` - -Your third `a` element should have an `href` set to `https://instagram.com/freecodecamp`. - -```js -assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[2]?.getAttribute('href'), 'https://instagram.com/freecodecamp'); -``` - -Your fourth `a` element should have an `href` set to `https://www.linkedin.com/school/free-code-camp`. - -```js -assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[3]?.getAttribute('href'), 'https://www.linkedin.com/school/free-code-camp'); -``` - -Your fifth `a` element should have an `href` set to `https://www.youtube.com/freecodecamp`. - -```js -assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[4]?.getAttribute('href'), 'https://www.youtube.com/freecodecamp'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md deleted file mode 100644 index b5737eefde904c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 61438b5b66d76a6264430f2a -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Within each of your new `a` elements, add an `i` element and give them the following classes: - -- Your first `i` element should have the class `fab fa-facebook-f` -- Your second `i` element should have the class `fab fa-twitter` -- Your third `i` element should have the class `fab fa-instagram` -- Your fourth `i` element should have the class `fab fa-linkedin-in` -- Your fifth `i` element should have the class `fab fa-youtube` - -# --hints-- - -You should have five `i` elements. - -```js -assert(document.querySelectorAll('i')?.length === 5); -``` - -Each `a` element should only have one `i` element. - -```js -const aaaaa = [...document.querySelectorAll('.social-icons a')]; -assert(aaaaa?.every(a => a?.children?.length === 1 && a?.children?.[0]?.localName === 'i')); -``` - -Each `i` element should have a `class` attribute which includes `fab`. - -```js -const iiiii = [...document.querySelectorAll('i')]; -assert(iiiii?.every(i => i?.classList?.contains('fab'))); -``` - -The first `i` element should have a `class` attribute which includes `fa-facebook-f`. - -```js -assert(document.querySelectorAll('i')?.[0]?.classList?.contains('fa-facebook-f')); -``` - -The second `i` element should have a `class` attribute which includes `fa-twitter`. - -```js -assert(document.querySelectorAll('i')?.[1]?.classList?.contains('fa-twitter')); -``` - -The third `i` element should have a `class` attribute which includes `fa-instagram`. - -```js -assert(document.querySelectorAll('i')?.[2]?.classList?.contains('fa-instagram')); -``` - -The fourth `i` element should have a `class` attribute which includes `fa-linkedin-in`. - -```js -assert(document.querySelectorAll('i')?.[3]?.classList?.contains('fa-linkedin-in')); -``` - -The fifth `i` element should have a `class` attribute which includes `fa-youtube`. - -```js -assert(document.querySelectorAll('i')?.[4]?.classList?.contains('fa-youtube')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md deleted file mode 100644 index 37aebf80b3d557..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 61438ec09438696391076d6a -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Below your `.heading` element, create a new `section` element with the `class` set to `text`. Within that, create a `p` element with the `class` set to `first-paragraph` and the following text: - -```markup -Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -``` - -# --hints-- - -You should create a new `section` element. - -```js -assert(document.querySelectorAll('section')?.length === 2); -``` - -Your new `section` element should come after your `.heading` element. - -```js -assert(document.querySelectorAll('section')?.[1]?.previousElementSibling?.className === 'heading'); -``` - -Your new `section` element should have the `class` set to `text`. - -```js -assert(document.querySelectorAll('section')?.[1]?.className === 'text'); -``` - -You should create a new `p` element within your `.text` element. - -```js -assert(document.querySelector('.text')?.querySelectorAll('p')?.length === 1); -``` - -Your new `p` element should have the `class` set to `first-paragraph`. - -```js -assert(document.querySelector('.text p')?.className === 'first-paragraph'); -``` - -Your new `p` element should have the provided text. - -```js -assert(document.querySelector('.first-paragraph')?.innerText === 'Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you\'ll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md deleted file mode 100644 index 84ab07157343ab..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -id: 61439dc084fa5f659cf75d7c -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Create another `p` element below your `.first-paragraph` element, and give it the following text: - -```markup -After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -``` - -# --hints-- - -You should create a second `p` element within your `.text` element. - -```js -assert(document.querySelectorAll('.text p')?.length === 2) -``` - -Your second `p` element should have the provided text. - -```js -assert(document.querySelectorAll('.text p')?.[1]?.innerText === 'After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
---fcc-editable-region-- -
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-
---fcc-editable-region-- -
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md deleted file mode 100644 index e1a5ed66e45061..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 61439dfc811e12666b04be6f -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Add a third `p` element at the end of your `.text` element, and give it the following text: - -```markup -It wasn't as dramatic as Doc's revelation in Back to the Future. It just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -``` - -# --hints-- - -You should create a third `p` element in your `.text` element. - -```js -assert(document.querySelectorAll('.text p')?.length === 3); -``` - -Your third `p` element should have the provided text. - -```js -assert(document.querySelectorAll('.text p')?.[2]?.innerText === "It wasn't as dramatic as Doc's revelation in Back to the Future. It just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md deleted file mode 100644 index 410007a122d2be..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -id: 61439e33e4fb7967609e0c83 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -After the three `p` elements within your `.text` element, create a `blockquote` element. Within that, add an `hr` element, a `p` element with the `class` set to `quote`, and a second `hr` element. - -Give the `.quote` element the text `The entire curriculum should be a series of projects`. - -# --hints-- - -You should create a new `blockquote` element within your `.text` element. - -```js -assert.exists(document.querySelector('.text blockquote')); -``` - -Your `blockquote` element should come after your three `p` elements. - -```js -assert(document.querySelector('.text')?.children?.[3]?.localName === 'blockquote'); -``` - -Your `blockquote` element should have two `hr` elements. - -```js -assert(document.querySelectorAll('.text blockquote hr')?.length === 2); -``` - -Your `blockquote` element should have a `p` element. - -```js -assert.exists(document.querySelector('.text blockquote p')); -``` - -Your `blockquote` children should be in the correct order. - -```js -const children = document.querySelector('.text blockquote')?.children; -assert(children?.[0]?.localName === 'hr'); -assert(children?.[1]?.localName === 'p'); -assert(children?.[2]?.localName === 'hr'); -``` - -Your new `p` element should have the `class` set to `quote`. - -```js -assert(document.querySelector('.text blockquote p')?.className === 'quote'); -``` - -Your new `p` element should have the text `The entire curriculum should be a series of projects`. - -```js -assert(document.querySelector('.text blockquote p')?.innerText === 'The entire curriculum should be a series of projects'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md deleted file mode 100644 index c41d001e6a3c0a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -id: 6143a1a228f7d068ab16a130 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Below your `blockquote` element, add another `p` element with the following text: - -```markup -No more walls of explanatory text. No more walls of tests. Just one test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -``` - -# --hints-- - -You should add a fourth `p` element to your `.text` element. - -```js -assert(document.querySelectorAll('.text p')?.length === 5); -``` - -Your new `p` element should come after your `blockquote` element. - -```js -assert(document.querySelectorAll('.text p')?.[4]?.previousElementSibling?.localName === 'blockquote'); -``` - -Your new `p` element should have the provided text. - -```js -assert(document.querySelectorAll('.text p')?.[4]?.innerText === 'No more walls of explanatory text. No more walls of tests. Just one test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there\'s plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md deleted file mode 100644 index 572fcd58996138..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 6143a73279ce6369de4b9bcc -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Create a fifth `p` element at the end of your `.text` element, and give it the following text: - -```markup -The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -``` - -# --hints-- - -You should add a fifth `p` element. - -```js -assert(document.querySelectorAll('.text p')?.length === 6); -``` - -Your new `p` element should have the provided text. - -```js -assert(document.querySelectorAll('.text p')?.[5]?.innerText === 'The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md deleted file mode 100644 index 4516f295b47779..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 6143a778bffc206ac6b1dbe3 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Create one final `p` element at the end of your `.text` element and give it the following text: - -```markup -Instead of a series of coding challenges, people will be in their code -editor passing one test after another, quickly building up a project. -People will get into a real flow state, similar to what they -experience when they build the required projects at the end of each -certification. They'll get that sense of forward progress right from -the beginning. And freeCodeCamp will be a much smoother experience. -``` - -# --hints-- - -You should add a sixth `p` element to the `.text` element. - -```js -assert(document.querySelectorAll('.text p')?.length === 7) -``` - -Your sixth `p` element should have the provided text. - -```js -assert(document.querySelectorAll('.text p')?.[6]?.innerText === 'Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They\'ll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
---fcc-editable-region-- -
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-
---fcc-editable-region-- -
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md deleted file mode 100644 index 79117e58831227..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -id: 6143a83fcc32c26bcfae3efa -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Below your `.text` element, create a new `section` element and give it a `class` of `text text-with-images`. Within that, create an `article` element with a `class` set to `brief-history`, and an `aside` element with the `class` set to `image-wrapper`. - -# --hints-- - -You should create a new `section` element. - -```js -assert(document.querySelectorAll('section')?.length === 3) -``` - -Your new `section` element should come after your `.text` element. - -```js -assert(document.querySelectorAll('section')?.[2]?.previousElementSibling?.className === 'text') -``` - -Your new `section` element should have the `class` set to `text text-with-images`. - -```js -assert(document.querySelectorAll('section')?.[2]?.className === 'text text-with-images') -``` - -Your new `section` element should have an `article` element. - -```js -assert.exists(document.querySelector('.text-with-images article')); -``` - -Your new `section` element should have an `aside` element. - -```js -assert.exists(document.querySelector('.text-with-images aside')); -``` - -The `article` element should come before the `aside` element. - -```js -assert(document.querySelector('.text-with-images article')?.nextElementSibling?.localName === 'aside'); -``` - -Your `article` element should have the `class` set to `brief-history`. - -```js -assert(document.querySelector('.text-with-images article')?.className === 'brief-history'); -``` - -Your `aside` element should have the `class` set to `image-wrapper`. - -```js -assert(document.querySelector('.text-with-images aside')?.className === 'image-wrapper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md deleted file mode 100644 index 2e0bebef4268c6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: 6143b97c06c3306d23d5da47 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Within your `article` element, create an `h3` element with the `class` set to `list-title` and the text of `A Brief History`. Below that, create a `p` element with the text `Of the Curriculum`. Then create a `ul` element with the class `lists`. - -# --hints-- - -You should create an `h3` element within your `article` element. - -```js -assert.exists(document.querySelector('article h3')); -``` - -You should create a `p` element within your `article` element. - -```js -assert.exists(document.querySelector('article p')); -``` - -You should create a `ul` element within your `article` element. - -```js -assert.exists(document.querySelector('article ul')); -``` - -Your elements within the `article` element should be in the correct order. - -```js -const children = document.querySelector('article')?.children; -assert(children?.[0]?.localName === 'h3'); -assert(children?.[1]?.localName === 'p'); -assert(children?.[2]?.localName === 'ul'); -``` - -Your new `h3` element should have the `class` set to `list-title`. - -```js -assert(document.querySelector('article h3')?.className === 'list-title'); -``` - -Your new `h3` element should have the text of `A Brief History`. - -```js -assert(document.querySelector('article h3')?.innerText === 'A Brief History'); -``` - -Your new `p` element should have the text of `Of the Curriculum`. - -```js -assert(document.querySelector('article p')?.innerText === 'Of the Curriculum'); -``` - -Your new `ul` element should have the `class` set to `lists`. - -```js -assert(document.querySelector('article ul')?.className === 'lists'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
---fcc-editable-region-- -
- -
---fcc-editable-region-- - -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md deleted file mode 100644 index ed17f21eaf5fce..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 6143b9e1f5035c6e5f2a8231 -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Within your `ul` element, create six `li` elements. Add an `h4` element with a `class` set to `list-subtitle` and a `p` element to each of your `li` elements. - -Then give the `h4` and `p` elements the following text content, in order, with each `h4` using what's on the left side of the colon, and each `p` using what's on the right: - -- `V1 - 2014`: `We launched freeCodeCamp with a simple list of 15 resources, including Harvard's CS50 and Stanford's Database Class.` -- `V2 - 2015`: `We added interactive algorithm challenges.` -- `V3 - 2015`: `We added our own HTML+CSS challenges (before we'd been relying on General Assembly's Dash course for these).` -- `V4 - 2016`: `We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School.` -- `V5 - 2017`: `We added the back end and data visualization challenges.` -- `V6 - 2018`: `We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.` - -# --hints-- - -Your `ul` element should have six `li` elements. - -```js -assert(document.querySelectorAll('.lists li')?.length === 6); -``` - -Each of your new `li` elements should have an `h4` and `p` element. - -```js -const lis = [...document.querySelectorAll('.lists li')]; -assert(lis?.every(li => li?.children?.[0]?.localName === 'h4' && li?.children?.[1]?.localName === 'p')); -``` - -Your first `h4` should have the text `V1 - 2014`. - -```js -assert(document.querySelectorAll('.lists li h4')?.[0]?.innerText === 'V1 - 2014'); -``` - -Your first `p` should have the text `We launched freeCodeCamp with a simple list of 15 resources, including Harvard's CS50 and Stanford's Database Class.` - -```js -assert(document.querySelectorAll('.lists li p')?.[0]?.innerText === 'We launched freeCodeCamp with a simple list of 15 resources, including Harvard\'s CS50 and Stanford\'s Database Class.'); -``` - -Your second `h4` should have the text `V2 - 2015`. - -```js -assert(document.querySelectorAll('.lists li h4')?.[1]?.innerText === 'V2 - 2015'); -``` - -Your second `p` should have the text `We added interactive algorithm challenges.` - -```js -assert(document.querySelectorAll('.lists li p')?.[1]?.innerText === 'We added interactive algorithm challenges.'); -``` - -Your third `h4` should have the text `V3 - 2015`. - -```js -assert(document.querySelectorAll('.lists li h4')?.[2]?.innerText === 'V3 - 2015'); -``` - -Your third `p` should have the text `We added our own HTML+CSS challenges (before we'd been relying on General Assembly's Dash course for these).` - -```js -assert(document.querySelectorAll('.lists li p')?.[2]?.innerText === 'We added our own HTML+CSS challenges (before we\'d been relying on General Assembly\'s Dash course for these).'); -``` - -Your fourth `h4` should have the text `V4 - 2016`. - -```js -assert(document.querySelectorAll('.lists li h4')?.[3]?.innerText === 'V4 - 2016'); -``` - -Your fourth `p` should have the text `We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School`. - -```js -assert(document.querySelectorAll('.lists li p')?.[3]?.innerText === 'We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School.'); -``` - -Your fifth `h4` should have the text `V5 - 2017`. - -```js -assert(document.querySelectorAll('.lists li h4')?.[4]?.innerText === 'V5 - 2017'); -``` - -Your fifth `p` should have the text `We added the back end and data visualization challenges.` - -```js -assert(document.querySelectorAll('.lists li p')?.[4]?.innerText === 'We added the back end and data visualization challenges.'); -``` - -Your sixth `h4` should have the text `V6 - 2018`. - -```js -assert(document.querySelectorAll('.lists li h4')?.[5]?.innerText === 'V6 - 2018'); -``` - -Your sixth `p` should have the text `We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.` - -```js -assert(document.querySelectorAll('.lists li p')?.[5]?.innerText === 'We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.'); -``` - -Your six `h4` elements should each have the class `list-subtitle`. - -```js -const h4s = [...document.querySelectorAll('.lists li h4')]; -assert(h4s?.every(h4 => h4?.classList?.contains('list-subtitle'))); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
---fcc-editable-region-- -
-

A Brief History

-

Of the Curriculum

-
    - -
-
---fcc-editable-region-- - -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md deleted file mode 100644 index 3ee5aa3aaa459a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 6143bb50e8e48c6f5ef9d8d5 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Within your `aside` element, create two `img` elements, a `blockquote` element, and a third `img` element. Give the `blockquote` element a `class` set to `image-quote`. - -# --hints-- - -You should create three `img` elements within your `aside` element. - -```js -assert(document.querySelectorAll('aside img')?.length === 3); -``` - -You should create a `blockquote` element within your `aside` element. - -```js -assert.exists(document.querySelector('aside blockquote')); -``` - -Your `blockquote` element should have a `class` set to `image-quote`. - -```js -assert(document.querySelector('aside blockquote')?.classList?.contains('image-quote')); -``` - -Your new elements should be in the correct order. - -```js -const children = document.querySelector('aside')?.children; -assert(children?.[0]?.localName === 'img'); -assert(children?.[1]?.localName === 'img'); -assert(children?.[2]?.localName === 'blockquote'); -assert(children?.[3]?.localName === 'img'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md deleted file mode 100644 index 9a8fc621dbf2dc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 6143c2a363865c715f1a3f72 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Within the `.image-wrapper` element, give your first `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`, an `alt` of `image of the quote machine project`, a `class` of `image-1`, a `loading` attribute set to `lazy`, a `width` attribute of `600`, and a `height` attribute of `400`. - -# --hints-- - -Your first `img` element should have a `src` attribute set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png'); -``` - -Your first `img` element should have an `alt` attribute set to `image of the quote machine project`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('alt') === 'image of the quote machine project'); -``` - -Your first `img` element should have a `class` attribute set to `image-1`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[0]?.classList?.contains('image-1')); -``` - -Your first `img` element should have a `loading` attribute set to `lazy`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('loading') === 'lazy'); -``` - -Your first `img` element should have a `width` attribute set to `600`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('width') === '600'); -``` - -Your first `img` element should have a `height` attribute set to `400`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('height') === '400'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md deleted file mode 100644 index 456bf6fdad9581..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md +++ /dev/null @@ -1,213 +0,0 @@ ---- -id: 6143cd08fe927072ca3a371d -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Within your `.image-wrapper` element, give the second `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, an `alt` of `image of a calculator project`, a `loading` attribute set to `lazy`, a `class` set to `image-2`, a `width` attribute set to `400`, and a `height` attribute set to `400`. - -# --hints-- - -Your second `img` element should have a `src` set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png'); -``` - -Your second `img` element should have an `alt` set to `image of a calculator project`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('alt') === 'image of a calculator project'); -``` - -Your second `img` element should have a `loading` attribute set to `lazy`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('loading') === 'lazy'); -``` - -Your second `img` element should have a `class` set to `image-2`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[1]?.classList?.contains('image-2')); -``` - -Your second `img` element should have a `width` set to `400`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('width') === '400'); -``` - -Your second `img` element should have a `height` set to `400`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('height') === '400'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md deleted file mode 100644 index b4e3707727a06e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 6143cdf48b634a747de42104 -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Within your `.image-wrapper` element, give your third `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`, an `alt` of `four people working on code`, a `loading` attribute of `lazy`, a `class` set to `image-3`, a `width` attribute set to `600`, and a `height` attribute set to `400`. - -# --hints-- - -Your third `img` element should have a `src` set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg'); -``` - -Your third `img` element should have an `alt` set to `four people working on code`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('alt') === 'four people working on code'); -``` - -Your third `img` element should have a `loading` attribute set to `lazy`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('loading') === 'lazy'); -``` - -Your third `img` element should have a `class` set to `image-3`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[2]?.classList?.contains('image-3')); -``` - -Your third `img` element should have a `width` attribute set to `600`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('width') === '600'); -``` - -Your third `img` element should have a `height` attribute set to `400`. - -```js -assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('height') === '400'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md deleted file mode 100644 index 7599f61f627072..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 6143d003ad9e9d76766293ec -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Within your `.image-quote` element, nest an `hr` element, a `p` element and a second `hr` element. Give the `p` element a `class` set to `quote` and the text `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`. - -# --hints-- - -You should add two `hr` elements to your `.image-quote` element. - -```js -assert(document.querySelectorAll('.image-quote hr')?.length === 2); -``` - -You should add a `p` element to your `.image-quote` element. - -```js -assert(document.querySelectorAll('.image-quote p')?.length === 1); -``` - -Your `.image-quote` children should be in the correct order. - -```js -const children = document.querySelector('.image-quote')?.children; -assert(children?.[0]?.localName === 'hr'); -assert(children?.[1]?.localName === 'p'); -assert(children?.[2]?.localName === 'hr'); -``` - -Your new `p` element should have a `class` set to `quote`. - -```js -assert(document.querySelector('.image-quote p')?.classList.contains('quote')); -``` - -Your new `p` element should have the text `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`. - -```js -assert(document.querySelector('.image-quote p')?.innerText === 'The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md deleted file mode 100644 index bbb64429cf3daa..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 6143d2842b497779bad947de -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -To start your CSS, normalize the CSS rules by targeting all elements with `*`, including the `::before` and `::after` pseudo-selectors. Set the `padding` property and `margin` property both to `0`. - -# --hints-- - -You should have a `*, ::before, ::after` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')); -``` - -Your `*, ::before, ::after` selector should have a `padding` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.padding === '0px'); -``` - -Your `*, ::before, ::after` selector should have a `margin` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.margin === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md deleted file mode 100644 index e3f21ca5f036ce..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 6144d66a5358db0c80628757 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Create an `html` selector and give it a `font-size` property set to `62.5%`. This will set the default font size for your web page to 10px (the browser default is 16px). - -This will make it easier for you to work with `rem` units later, as `2rem` would be 20px. - -Also, set the `box-sizing` property to `border-box`. - -# --hints-- - -You should create an `html` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('html')); -``` - -Your `html` selector should have a `font-size` property set to `62.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '62.5%'); -``` - -Your `html` selector should have a `box-sizing` property set to `border-box`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, ::before, ::after { - padding: 0; - margin: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md deleted file mode 100644 index b39d0b503cfa77..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md +++ /dev/null @@ -1,234 +0,0 @@ ---- -id: 6144d7dbdd3e580da730ff45 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Create a `body` selector. Set the `font-family` property to `Baskervville`, with a fallback of `serif`. Set the `color` property to `linen` and the `background-color` property to `rgb(20, 30, 40)`. - -# --hints-- - -You should have a `body` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -Your `body` selector should have a `font-family` property set to `Baskervville`, with a fallback of `serif`. - -```js -const fontFamily = new __helpers.CSSHelp(document).getStyle('body')?.fontFamily; -assert(fontFamily === 'Baskervville, serif' || fontFamily === `"Baskervville", serif`); -``` - -Your `body` selector should have a `color` property set to `linen`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'linen'); -``` - -Your `body` selector should have a `background-color` property set to `rgb(20, 30, 40)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(20, 30, 40)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, ::before, ::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md deleted file mode 100644 index 03fef6e32d147d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 6144de308591ec10e27d5383 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Create an `h1` selector, and set the `font-family` property to `Anton` with the fallback of `sans-serif`. - -# --hints-- - -You should have an `h1` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')); -``` - -Your `h1` selector should have a `font-family` property set to `Anton` with the fallback of `sans-serif`. - -```js -const fontFamily = new __helpers.CSSHelp(document).getStyle('h1')?.fontFamily; -assert(fontFamily === 'Anton, sans-serif' || fontFamily === `"Anton", sans-serif`); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, ::before, ::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md deleted file mode 100644 index 6ac73369c9559b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -id: 6144e1ba93e435127a7f516d -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Create an `h2, h3, h4, h5, h6` selector. Give it a `font-family` property set to `Raleway` with a fallback of `sans-serif`. - -# --hints-- - -You should have an `h2, h3, h4, h5, h6` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6')); -``` - -Your `h2, h3, h4, h5, h6` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. - -```js -const fontFamily = new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6')?.fontFamily; -assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, ::before, ::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md deleted file mode 100644 index 65402717cdb998..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md +++ /dev/null @@ -1,241 +0,0 @@ ---- -id: 6144ee46a9d6e614c598cc05 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Create an `a` selector, and give it a `text-decoration` property set to `none` and a `color` property set to `linen`. - -# --hints-- - -You should have an `a` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('a')); -``` - -Your `a` selector should have a `text-decoration` property set to `none`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('a')?.textDecoration === 'none'); -``` - -Your `a` selector should have a `color` property set to `linen`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('a')?.color === 'linen'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, ::before, ::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md deleted file mode 100644 index cd0e14f70c46f8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md +++ /dev/null @@ -1,242 +0,0 @@ ---- -id: 6144ee790af79815ad15a832 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Now you are ready to start putting together the grid layout. CSS Grid offers a two-dimensional grid-based layout, allowing you to center items horizontally and vertically while still retaining control to do things like overlap elements. - -Begin by creating a `main` selector and giving it a `display` property set to `grid`. - -# --hints-- - -You should have a `main` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('main')); -``` - -Your `main` selector should have a `display` property set to `grid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('main')?.display === 'grid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, ::before, ::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md deleted file mode 100644 index d3aa2f20d38ed4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 6144f1410990ea17187a722b -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Now you can style the layout of your grid. CSS Grid is similar to Flexbox in that it has a special property for both the parent and child elements. - -In this case, your parent element is the `main` element. Set the content to have a three-column layout by adding a `grid-template-columns` property with a value of `1fr 94rem 1fr`. This will create three columns where the middle column is `94rem` wide, and the first and last columns are both 1 fraction of the remaining space in the grid container. - -# --hints-- - -Your `main` section should have a `grid-template-columns` property set to `1fr 94rem 1fr`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === '1fr 94rem 1fr'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, ::before, ::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - ---fcc-editable-region-- -main { - display: grid; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md deleted file mode 100644 index de3ca483f6cbc5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 6144f3818bfbc51844152e36 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Use the `minmax` function to make your columns responsive on any device. The `minmax` function takes two arguments, the first being the minimum value and the second being the maximum. These values could be a length, percentage, `fr`, or even a keyword like `max-content`. - -Wrap each of your already defined values of the `grid-template-columns` property in a `minmax` function, using each value as the second argument. The first argument should be `2rem`, `min-content`, and `2rem` respectively. - -# --hints-- - -Your `main` selector should have a `grid-template-columns` property set to `minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === 'minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, ::before, ::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - ---fcc-editable-region-- -main { - display: grid; - grid-template-columns: 1fr 94rem 1fr; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md deleted file mode 100644 index 3504f51cc85d43..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 6144f42204c8c8195f1f3345 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -To add space between rows in the grid layout, you can use the `row-gap` property. Give the `main` selector a `row-gap` property of `3rem`. - -# --hints-- - -Your `main` selector should have a `row-gap` property of `3rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('main')?.rowGap === '3rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, ::before, ::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - ---fcc-editable-region-- -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md deleted file mode 100644 index d4da3e505b1dac..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 6144f47b7c631e1a6f304dd5 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Your magazine will have three primary sections. You already set the overall layout in the `main` rule, but you can adjust the placement in the child rules. - -One option is the `grid-column` property, which is shorthand for `grid-column-start` and `grid-column-end`. The `grid-column` property tells the grid item which grid line to start and end at. - -Create a `.heading` rule and set the `grid-column` property to `2 / 3`. This will tell the `.heading` element to start at grid line 2 and end at grid line 3. - -# --hints-- - -You should have a `.heading` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.heading')); -``` - -Your `.heading` selector should have a `grid-column` property set to `2 / 3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridColumn === '2 / 3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, ::before, ::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md deleted file mode 100644 index dceea75f81b6d9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 6148b07081759c2c691166a9 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Create a `.text` selector and give it a `grid-column` property set to `2 / 3`. - -# --hints-- - -You should have a `.text` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.text')); -``` - -Your `.text` selector should have a `grid-column` property set to `2 / 3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.text')?.gridColumn === '2 / 3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, ::before, ::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -.heading { - grid-column: 2 / 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md deleted file mode 100644 index 09ee85437d1355..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: 6148b0d764e4192e5712ed92 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -For additional control over the layout of your content, you can have a CSS Grid within a CSS Grid. - -Set the `display` property of your `.heading` selector to `grid`. - -# --hints-- - -Your `.heading` selector should have a `display` property set to `grid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.heading')?.display === 'grid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying - on General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This - was the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, ::before, ::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - ---fcc-editable-region-- -.heading { - grid-column: 2 / 3; -} ---fcc-editable-region-- - -.text { - grid-column: 2 / 3; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md deleted file mode 100644 index 83db19da46d4cf..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md +++ /dev/null @@ -1,253 +0,0 @@ ---- -id: 6148b185ef37522f688316b0 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now you can style the content of the `.heading` element with CSS Grid. - -The CSS `repeat()` function is used to repeat a value, rather than writing it out manually, and is helpful for grid layouts. For example, setting the `grid-template-columns` property to `repeat(20, 200px)` would create 20 columns each `200px` wide. - -Give your `.heading` element a `grid-template-columns` property set to `repeat(2, 1fr)` to create two columns of equal width. - -# --hints-- - -Your `.heading` selector should have a `grid-template-columns` property set to `repeat(2, 1fr)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridTemplateColumns === 'repeat(2, 1fr)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - ---fcc-editable-region-- -.heading { - grid-column: 2 / 3; - display: grid; -} ---fcc-editable-region-- - -.text { - grid-column: 2 / 3; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md deleted file mode 100644 index c27bf327ac5e80..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 6148b30464daf630848c21d4 -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Give your `.heading` selector a `row-gap` property set to `1.5rem`. - -# --hints-- - -Your `.heading` selector should have a `row-gap` property set to `1.5rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.heading')?.rowGap === '1.5rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - ---fcc-editable-region-- -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); -} ---fcc-editable-region-- - -.text { - grid-column: 2 / 3; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md deleted file mode 100644 index c3bd091a36bbed..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md +++ /dev/null @@ -1,261 +0,0 @@ ---- -id: 6148b4b150434734143db6f2 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Remember that the `grid-column` property determines which columns an element starts and ends at. There may be times where you are unsure of how many columns your grid will have, but you want an element to stop at the last column. To do this, you can use `-1` for the end column. - -Create a `.hero` selector and give it a `grid-column` property set to `1 / -1`. This will tell the element to span the full width of the grid. - -# --hints-- - -You should have a `.hero` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.hero')); -``` - -Your `.hero` selector should have a `grid-column` property set to `1 / -1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.hero')?.gridColumn === '1 / -1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md deleted file mode 100644 index ff3f902a861688..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md +++ /dev/null @@ -1,255 +0,0 @@ ---- -id: 6148b5623efa8f369f2c3643 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Give the `.hero` selector a `position` property set to `relative`. - -# --hints-- - -Your `.hero` selector should have a `position` property set to `relative`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.hero')?.position === 'relative'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - ---fcc-editable-region-- -.hero { - grid-column: 1 / -1; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md deleted file mode 100644 index 5f0ee63b2c614d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 6148b59ef318e03875f35c4a -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Create an `img` selector and give it a `width` property set to `100%`, and an `object-fit` property set to `cover`. - -The `object-fit` property tells the browser how to position the element within its container. In this case, `cover` will set the image to fill the container, cropping as needed to avoid changing the aspect ratio. - -# --hints-- - -You should have an `img` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('img')); -``` - -Your `img` selector should have a `width` property set to `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('img')?.width === '100%'); -``` - -Your `img` selector should have an `object-fit` property set to `cover`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('img')?.objectFit === 'cover'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md deleted file mode 100644 index 7896296cfa247b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md +++ /dev/null @@ -1,280 +0,0 @@ ---- -id: 6148bd62bbb8c83a5f1fc1b3 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Create a `.hero-title` selector and give it a `text-align` property set to `center`, a `color` property set to `orangered` and a `font-size` property set to `8rem`. - -# --hints-- - -You should have a `.hero-title` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.hero-title')); -``` - -Your `.hero-title` selector should have a `text-align` property set to `center`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.textAlign === 'center'); -``` - -Your `.hero-title` selector should have a `color` property set to `orangered`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.color === 'orangered'); -``` - -Your `.hero-title` selector should have a `font-size` property set to `8rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.fontSize === '8rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md deleted file mode 100644 index bbe53bc825bedc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 6148be3d605d6b3ca9425d11 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -The subtitle also needs to be styled. Create a `.hero-subtitle` selector and give it a `font-size` property set to `2.4rem`, a `color` property set to `orangered`, and a `text-align` property set to `center`. - -# --hints-- - -You should have a `.hero-subtitle` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')); -``` - -Your `.hero-subtitle` selector should have a `font-size` property set to `2.4rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.fontSize === '2.4rem'); -``` - -Your `.hero-subtitle` selector should have a `color` property set to `orangered`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.color === 'orangered'); -``` - -Your `.hero-subtitle` selector should have a `text-align` property set to `center`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.textAlign === 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md deleted file mode 100644 index cff011bb025cdd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 6148be82ca63c63daa8cca49 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Create an `.author` selector and give it a `font-size` property set to `2rem` and a `font-family` property set to `Raleway` with a fallback of `sans-serif`. - -# --hints-- - -You should have an `.author` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.author')); -``` - -Your `.author` selector should have a `font-size` property set to `2rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.author')?.fontSize === '2rem'); -``` - -Your `.author` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. - -```js -const fontFamily = new __helpers.CSSHelp(document).getStyle('.author')?.fontFamily; -assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md deleted file mode 100644 index fa6cf78cd2ff9a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 6148bf49fcc7913f05dbf9b7 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Create a `.author-name a:hover` selector and give it a `background-color` property set to `#306203`. - -This will create a hover effect only for the `a` element within the `.author-name`, showing the original freeCodeCamp green in the background. - -# --hints-- - -You should have an `.author-name a:hover` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover')); -``` - -Your `.author-name a:hover` selector should have a `background-color` property set to `#306203`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover')?.backgroundColor === 'rgb(48, 98, 3)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md deleted file mode 100644 index 9ce17f2be72622..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md +++ /dev/null @@ -1,289 +0,0 @@ ---- -id: 6148bfc43df3bc40fe0e6405 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Create a `.publish-date` selector and give it a `color` property of `rgba(255, 255, 255, 0.5)`. - -# --hints-- - -You should have a `.publish-date` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.publish-date')); -``` - -Your `.publish-date` selector should have a `color` property set to `rgba(255, 255, 255, 0.5)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.publish-date')?.color === 'rgba(255, 255, 255, 0.5)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md deleted file mode 100644 index 5d84a91838e611..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md +++ /dev/null @@ -1,299 +0,0 @@ ---- -id: 6148c004ffc8434252940dc3 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Create a `.social-icons` selector. Give it a `display` property set to `grid`, and a `font-size` property set to `3rem.` - -# --hints-- - -You should have a `.social-icons` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.social-icons')); -``` - -Your `.social-icons` selector should have a `display` property set to `grid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.display === 'grid'); -``` - -Your `.social-icons` selector should have a `font-size` property set to `3rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.fontSize === '3rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md deleted file mode 100644 index 717d1fde196d0a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md +++ /dev/null @@ -1,290 +0,0 @@ ---- -id: 6148c224ecb157439bc5247c -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -The default settings for CSS Grid will create additional rows as needed, unlike Flexbox. Give the `.social-icons` selector a `grid-template-columns` property set to `repeat(5, 1fr)` to arrange the icons in a single row. - -# --hints-- - -Your `.social-icons` selector should have a `grid-template-columns` property set to `repeat(5, 1fr)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridTemplateColumns === 'repeat(5, 1fr)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - ---fcc-editable-region-- -.social-icons { - display: grid; - font-size: 3rem; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md deleted file mode 100644 index 64b84dce9ca1ca..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 6148c434bd731d45617a76c6 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -If you wanted to add more social icons, but keep them on the same row, you would need to update `grid-template-columns` to create additional columns. As an alternative, you can use the `grid-auto-flow` property. - -This property takes either `row` or `column` as the first value, with an optional second value of `dense`. `grid-auto-flow` uses an auto-placement algorithm to adjust the grid layout. Setting it to `column` will tell the algorithm to create new columns for content as needed. The `dense` value allows the algorithm to backtrack and fill holes in the grid with smaller items, which can result in items appearing out of order. - -For your `.social-icons` selector, set the `grid-auto-flow` property to `column`. - -# --hints-- - -Your `.social-icons` selector should have a `grid-auto-flow` property set to `column`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoFlow === 'column'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - ---fcc-editable-region-- -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md deleted file mode 100644 index 47a881d12fb41b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md +++ /dev/null @@ -1,294 +0,0 @@ ---- -id: 6148c5036ddad94692a66230 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Now the auto-placement algorithm will kick in when you add a new icon element. However, the algorithm defaults the new column width to be `auto`, which will not match your current columns. - -You can override this with the `grid-auto-columns` property. Give the `.social-icons` selector a `grid-auto-columns` property set to `1fr`. - -# --hints-- - -Your `.social-icons` selector should have a `grid-auto-columns` property set to `1fr`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoColumns === '1fr'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - ---fcc-editable-region-- -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md deleted file mode 100644 index 6f45c5b9685a5a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 6148c58bace368497fb11bcf -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Much like Flexbox, with CSS Grid you can align the content of grid items with `align-items` and `justify-items`. `align-items` will align child elements along the column axis, and `justify-items` will align child elements along the row axis. - -Give the `.social-icons` selector an `align-items` property set to `center`. - -# --hints-- - -Your `.social-icons` selector should have an `align-items` property set to `center`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.alignItems === 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - ---fcc-editable-region-- -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md deleted file mode 100644 index ab0275cfbd26b7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 6148c6aa9981d74af202125e -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Give the `.text` selector a `font-size` property set to `1.8rem` and a `letter-spacing` property set to `0.6px`. - -# --hints-- - -Your `.text` selector should have a `font-size` property set to `1.8rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.text')?.fontSize === '1.8rem'); -``` - -Your `.text` selector should have a `letter-spacing` property set to `0.6px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.text')?.letterSpacing === '0.6px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - ---fcc-editable-region-- -.text { - grid-column: 2 / 3; -} ---fcc-editable-region-- - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md deleted file mode 100644 index d2ebeebc787a52..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 6148c721e74ecd4c619ae51c -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Your `.text` element is not a CSS Grid, but you can create columns within an element without using Grid by using the `column-width` property. - -Give your `.text` selector a `column-width` property set to `25rem`. - -# --hints-- - -Your `.text` selector should have a `column-width` property set to `25rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.text')?.columnWidth === '25rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - ---fcc-editable-region-- -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; -} ---fcc-editable-region-- - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md deleted file mode 100644 index ce92865db3f221..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md +++ /dev/null @@ -1,299 +0,0 @@ ---- -id: 6148ceaf5d897d4d8b3554b3 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Magazines often use justified text in their printed content to structure their layout and control the flow of their content. While this works in printed form, justified text on websites can be an accessibility concern, for example presenting challenges for folks with dyslexia. - -To make your project look like a printed magazine, give the `.text` selector a `text-align` property set to `justify`. - -# --hints-- - -Your `.text` selector should have a `text-align` property set to `justify`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.text')?.textAlign === 'justify'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - ---fcc-editable-region-- -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; -} ---fcc-editable-region-- - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md deleted file mode 100644 index 520950e1b676b4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md +++ /dev/null @@ -1,314 +0,0 @@ ---- -id: 6148cf094b3f2b4e8a032c63 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -The `::first-letter` pseudo-selector allows you to target the first letter in the text content of an element. - -Create a `.first-paragraph::first-letter` selector and set the `font-size` property to `6rem`. Also give it a `color` property set to `orangered` to make it stand out. - -# --hints-- - -You should have a `.first-paragraph::first-letter` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')); -``` - -Your `.first-paragraph::first-letter` selector should have a `font-size` property set to `6rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.fontSize === '6rem'); -``` - -Your `.first-paragraph::first-letter` selector should have a `color` property set to `orangered`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.color === 'orangered'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md deleted file mode 100644 index a1d9a2bf4a2fa1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 6148d0b863d10d50544ace0e -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -The other text has been shifted out of place. Move it into position by giving the `.first-paragraph::first-letter` selector a `float` property set to `left` and a `margin-right` property set to `1rem`. - -# --hints-- - -Your `.first-paragraph::first-letter` selector should have a `float` property set to `left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.float === 'left'); -``` - -Your `.first-paragraph::first-letter` selector should have a `margin-right` property set to `1rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.marginRight === '1rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - ---fcc-editable-region-- -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md deleted file mode 100644 index 9054c00a5013fb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md +++ /dev/null @@ -1,313 +0,0 @@ ---- -id: 6148d1bdf39c5b5186f5974b -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Create an `hr` selector, and give it a `margin` property set to `1.5rem 0`. - -# --hints-- - -You should have an `hr` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('hr')); -``` - -Your `hr` selector should have a `margin` property set to `1.5rem 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('hr')?.margin === '1.5rem 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md deleted file mode 100644 index eb83872c2728d7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 6148d1f9eb63c252e1f8acc4 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -To give the `hr` a color, you need to adjust the `border` property. Give the `hr` selector a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`. - -# --hints-- - -Your `hr` should have a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderWidth, '1px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderStyle, 'solid'); -assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderColor, 'rgba(120, 120, 120, 0.6)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - ---fcc-editable-region-- -hr { - margin: 1.5rem 0; -} ---fcc-editable-region-- - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md deleted file mode 100644 index b3432f4f885142..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 6148d2444d01ab541e64a1e4 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Create a `.quote` selector. Give it a `color` property set to `#00beef`, a `font-size` property set to `2.4rem`, and a `text-align` property set to `center`. - -# --hints-- - -You should have a `.quote` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.quote')); -``` - -Your `.quote` selector should have a `color` property set to `#00beef`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.quote')?.color === 'rgb(0, 190, 239)'); -``` - -Your `.quote` selector should have a `font-size` property set to `2.4rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.quote')?.fontSize === '2.4rem'); -``` - -Your `.quote` selector should have a `text-align` property set to `center`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.quote')?.textAlign === 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md deleted file mode 100644 index 5ed42ac42e6279..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 6148d33e31fccf558696c745 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -To make the quote text stand out more, give the `.quote` selector a `font-family` property set to `Raleway` with a fallback of `sans-serif`. - -# --hints-- - -Your `.quote` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. - -```js -const fontFamily = new __helpers.CSSHelp(document).getStyle('.quote')?.fontFamily; -assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - ---fcc-editable-region-- -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md deleted file mode 100644 index 03037ebc9534cc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md +++ /dev/null @@ -1,341 +0,0 @@ ---- -id: 6148d3fff5186b57123d97e2 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -A quote is not really a quote without proper quotation marks. You can add these with CSS pseudo selectors. - -Create a `.quote::before` selector and set the `content` property to `"` with a space following it. - -Also, create a `.quote::after` selector and set the `content` property to `"` with a space preceding it. - -# --hints-- - -You should have a `.quote::before` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); -``` - -Your `.quote::before` selector should have a `content` property set to `'" '`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/)); -``` - -You should have a `.quote::after` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); -``` - -Your `.quote::after` selector should have a `content` property set to `' "'`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md deleted file mode 100644 index 1b9e5805a31e1f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 6148d4d57b965358c9fa38bf -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Now to style your second `section`. Note that it has the `text` and `text-with-images` values for the `class` attribute, which means it is already inheriting the styles from your `.text` rule. - -Create a `.text-with-images` selector and set the `display` property to `grid`. - -# --hints-- - -You should have a `.text-with-images` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')); -``` - -Your `.text-with-images` selector should have a `display` property set to `grid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.display === 'grid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md deleted file mode 100644 index a8eb1f118039d6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 6148d7720f0db36775db868a -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -You will need to have a column for text and a column for images. Give the `.text-with-images` selector a `grid-template-columns` property set to `1fr 2fr`. Also set the `column-gap` property to `3rem` to provide more spacing between the columns. - -# --hints-- - -Your `.text-with-images` selector should have a `grid-template-columns` property set to `1fr 2fr`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.gridTemplateColumns === '1fr 2fr'); -``` - -Your `.text-with-images` selector should have a `column-gap` property set to `3rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.columnGap === '3rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - ---fcc-editable-region-- -.text-with-images { - display: grid; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md deleted file mode 100644 index 434ea948a65f06..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -id: 6148d94fdf6a5d6899f8ff15 -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Give the `.text-with-images` selector a `margin-bottom` property set to `3rem`. - -# --hints-- - -Your `.text-with-images` selector should have a `margin-bottom` property set to `3rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.marginBottom === '3rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - ---fcc-editable-region-- -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md deleted file mode 100644 index be459f90587f22..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md +++ /dev/null @@ -1,340 +0,0 @@ ---- -id: 6148d9825b50a3698aeee644 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -Create a `.lists` selector and set the `list-style-type` property to `none`. This will get rid of the bullet points on the list items. - -# --hints-- - -You should have a `.lists` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.lists')); -``` - -Your `.lists` selector should have a `list-style-type` property set to `none`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.lists')?.listStyleType === 'none'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md deleted file mode 100644 index 93b012b2b35909..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 6148e162e255676ae0da6a76 -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Give the `.lists` selector a `margin-top` property set to `2rem`. - -# --hints-- - -Your `.lists` selector should have a `margin-top` property set to `2rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.lists')?.marginTop === '2rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - ---fcc-editable-region-- -.lists { - list-style-type: none; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md deleted file mode 100644 index 0e161b7d942275..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 6148e19c3e26436be0155690 -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Create a `.lists li` rule to target the list items within your `.lists` element. Give it a `margin-bottom` property set to `1.5rem`. - -# --hints-- - -You should have a `.lists li` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.lists li')); -``` - -Your `.lists li` selector should have a `margin-bottom` property set to `1.5rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.lists li')?.marginBottom === '1.5rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - -.lists { - list-style-type: none; - margin-top: 2rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md deleted file mode 100644 index 32e24f817501db..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 6148e246146b646cf4255f0c -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Create a `.list-title, .list-subtitle` selector and set the `color` property to `#00beef`. - -# --hints-- - -You should have a `.list-title, .list-subtitle` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')) -``` - -Your `.list-title, .list-subtitle` selector should have a `color` property set to `#00beef`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')?.color === 'rgb(0, 190, 239)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - -.lists { - list-style-type: none; - margin-top: 2rem; -} - -.lists li { - margin-bottom: 1.5rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md deleted file mode 100644 index 581200983341de..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -id: 6148e2dcdd60306dd77d41cc -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Time to style the last section of the magazine - the images. - -The images are wrapped with an `aside` element using the `image-wrapper` class, so create an `.image-wrapper` selector. Set the `display` property to `grid`. - -# --hints-- - -You should have an `.image-wrapper` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')); -``` - -Your `.image-wrapper` selector should have a `display` property set to `grid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.display === 'grid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - -.lists { - list-style-type: none; - margin-top: 2rem; -} - -.lists li { - margin-bottom: 1.5rem; -} - -.list-title, .list-subtitle { - color: #00beef; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md deleted file mode 100644 index 81edaa4266f2d1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 6148e4d6861a486f60681f36 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -The images should be within a two column, three row layout. - -Give the `.image-wrapper` selector a `grid-template-columns` property set to `2fr 1fr` and a `grid-template-rows` property set to `repeat(3, min-content)`. This will give our grid rows that adjust in height based on the content, but columns that remain a fixed width based on the container. - -# --hints-- - -Your `.image-wrapper` selector should have a `grid-template-columns` property set to `2fr 1fr`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateColumns === '2fr 1fr'); -``` - -Your `.image-wrapper` selector should have a `grid-template-rows` property set to `repeat(3, min-content)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateRows === 'repeat(3, min-content)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - -.lists { - list-style-type: none; - margin-top: 2rem; -} - -.lists li { - margin-bottom: 1.5rem; -} - -.list-title, .list-subtitle { - color: #00beef; -} - ---fcc-editable-region-- -.image-wrapper { - display: grid; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md deleted file mode 100644 index 22c5c3dad93a93..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 6148e5a204d99e70343a63e4 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -The `gap` property is a shorthand way to set the value of `column-gap` and `row-gap` at the same time. If given one value, it sets the `column-gap` and `row-gap` both to that value. If given two values, it sets the `row-gap` to the first value and the `column-gap` to the second. - -Give the `.image-wrapper` selector a `gap` property set to `2rem`. - -# --hints-- - -Your `.image-wrapper` element should have a `gap` property set to `2rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gap === '2rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - -.lists { - list-style-type: none; - margin-top: 2rem; -} - -.lists li { - margin-bottom: 1.5rem; -} - -.list-title, .list-subtitle { - color: #00beef; -} - ---fcc-editable-region-- -.image-wrapper { - display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: repeat(3, min-content); -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md deleted file mode 100644 index 55b3d446631cfa..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 6148e62a6f768f71c4f04828 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -The `place-items` property can be used to set the `align-items` and `justify-items` values at the same time. The `place-items` property takes one or two values. If one value is provided, it is used for both the `align-items` and `justify-items` properties. If two values are provided, the first value is used for the `align-items` property and the second value is used for the `justify-items` property. - -Give the `.image-wrapper` selector a `place-items` property set to `center`. - -# --hints-- - -Your `.image-wrapper` selector should have a `place-items` property set to `center`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.placeItems === 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - -.lists { - list-style-type: none; - margin-top: 2rem; -} - -.lists li { - margin-bottom: 1.5rem; -} - -.list-title, .list-subtitle { - color: #00beef; -} - ---fcc-editable-region-- -.image-wrapper { - display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: repeat(3, min-content); - gap: 2rem; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md deleted file mode 100644 index 34ce6ba6049740..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 6148e789329dc9736ce59b85 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Create an `.image-1, .image-3` rule and give it a `grid-column` property set to `1 / -1`. This will allow the first and third images to span the full width of the grid. - -# --hints-- - -You should have an `.image-1, .image-3` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3')); -``` - -Your `.image-1, .image-3` selector should have a `grid-column` property set to `1 / -1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3')?.gridColumn === '1 / -1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - -.lists { - list-style-type: none; - margin-top: 2rem; -} - -.lists li { - margin-bottom: 1.5rem; -} - -.list-title, .list-subtitle { - color: #00beef; -} - -.image-wrapper { - display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: repeat(3, min-content); - gap: 2rem; - place-items: center; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md deleted file mode 100644 index 4d2f2a41afe963..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md +++ /dev/null @@ -1,375 +0,0 @@ ---- -id: 6148f34ebedc2274bceeb99c -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -Now that the magazine layout is finished, you need to make it responsive. - -Start with a `@media` query for `only screen` with a `max-width` of `720px`. Inside, create an `.image-wrapper` selector and give it a `grid-template-columns` property of `1fr`. - -This will collapse the three images into one column on smaller screens. - -# --hints-- - -You should have a new `@media` rule for `only screen and (max-width: 720px)`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === 'only screen and (max-width: 720px)'); -``` - -Your new `@media` rule should have an `.image-wrapper` selector. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.selectorText === '.image-wrapper'); -``` - -Your new `.image-wrapper` selector should have a `grid-template-columns` property of `1fr`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - -.lists { - list-style-type: none; - margin-top: 2rem; -} - -.lists li { - margin-bottom: 1.5rem; -} - -.list-title, .list-subtitle { - color: #00beef; -} - -.image-wrapper { - display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: repeat(3, min-content); - gap: 2rem; - place-items: center; -} - -.image-1, .image-3 { - grid-column: 1 / -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md deleted file mode 100644 index 0f56bb91521261..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md +++ /dev/null @@ -1,379 +0,0 @@ ---- -id: 6148f600cde42b7670c2611f -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -Create another `@media` query for `only screen` with a `max-width` of `600px`. Within, create a `.text-with-images` rule and give it a `grid-template-columns` property of `1fr`. - -This will collapse your bottom text area into a single column on smaller screens. - -# --hints-- - -You should create a new `@media` query for `only screen and (max-width: 600px)`. This should be below your previous `@media` query. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === 'only screen and (max-width: 600px)'); -``` - -Your new `@media` query should have a `.text-with-images` selector. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.selectorText === '.text-with-images'); -``` - -Your new `.text-with-images` selector should have a `grid-template-columns` property with a value of `1fr`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - -.lists { - list-style-type: none; - margin-top: 2rem; -} - -.lists li { - margin-bottom: 1.5rem; -} - -.list-title, .list-subtitle { - color: #00beef; -} - -.image-wrapper { - display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: repeat(3, min-content); - gap: 2rem; - place-items: center; -} - -.image-1, .image-3 { - grid-column: 1 / -1; -} - -@media only screen and (max-width: 720px) { - .image-wrapper { - grid-template-columns: 1fr; - } -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md deleted file mode 100644 index 252f2a27524101..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md +++ /dev/null @@ -1,404 +0,0 @@ ---- -id: 6148f693e0728f77c87f3020 -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -Create a third `@media` query for `only screen` with a `max-width` of `550px`. Within, create a `.hero-title` selector with a `font-size` set to `6rem`, a `.hero-subtitle, .author, .quote, .list-header` selector with a `font-size` set to `1.8rem`, a `.social-icons` selector with a `font-size` set to `2rem`, and a `.text` selector with a `font-size` set to `1.6rem`. - -# --hints-- - -You should have a new `@media` query for `only screen` with a `max-width` of `550px`. This should come after your previous two. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.media?.mediaText === 'only screen and (max-width: 550px)'); -``` - -Your new `@media` rule should have a `.hero-title` selector, a `.hero-subtitle, .author, .quote, .list-header` selector, a `.social-icons` selector, and a `.text` selector. These selectors should be in this order. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.selectorText === '.hero-title'); -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.selectorText === '.hero-subtitle, .author, .quote, .list-header'); -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.selectorText === '.social-icons'); -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.selectorText === '.text'); -``` - -Your `.hero-title` selector should have a `font-size` set to `6rem`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.style?.fontSize === '6rem'); -``` - -Your `.hero-subtitle, .author, .quote, .list-header` selector should have a `font-size` set to `1.8rem`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.style?.fontSize === '1.8rem'); -``` - -Your `.social-icons` selector should have a `font-size` set to `2rem`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.style?.fontSize === '2rem'); -``` - -Your `.text` selector should have a `font-size` set to `1.6rem`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.style?.fontSize === '1.6rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - -.lists { - list-style-type: none; - margin-top: 2rem; -} - -.lists li { - margin-bottom: 1.5rem; -} - -.list-title, .list-subtitle { - color: #00beef; -} - -.image-wrapper { - display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: repeat(3, min-content); - gap: 2rem; - place-items: center; -} - -.image-1, .image-3 { - grid-column: 1 / -1; -} - -@media only screen and (max-width: 720px) { - .image-wrapper { - grid-template-columns: 1fr; - } -} - -@media only screen and (max-width: 600px) { - .text-with-images { - grid-template-columns: 1fr; - } -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md deleted file mode 100644 index 57245ab3d332fb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md +++ /dev/null @@ -1,780 +0,0 @@ ---- -id: 6148f6f7d8914c78e93136ca -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Create one final `@media` query for `only screen` with a `max-width` of `420px`. Within, create a `.hero-title` selector with a `font-size` property set to `4.5rem`. - -Congratulations! Your magazine is now complete. - -# --hints-- - -You should have a new `@media` query for `only screen and (max-width: 420px)`. This should be the last query in the `@media` query list. - -```js -assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.media?.mediaText, 'only screen and (max-width: 420px)'); -``` - -Your new `@media` query should have a `.hero-title` selector. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.selectorText === '.hero-title'); -``` - -Your `.hero-title` selector should have a `font-size` property set to `4.5rem`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.style?.fontSize === '4.5rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - -.lists { - list-style-type: none; - margin-top: 2rem; -} - -.lists li { - margin-bottom: 1.5rem; -} - -.list-title, .list-subtitle { - color: #00beef; -} - -.image-wrapper { - display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: repeat(3, min-content); - gap: 2rem; - place-items: center; -} - -.image-1, .image-3 { - grid-column: 1 / -1; -} - -@media only screen and (max-width: 720px) { - .image-wrapper { - grid-template-columns: 1fr; - } -} - -@media only screen and (max-width: 600px) { - .text-with-images { - grid-template-columns: 1fr; - } -} - -@media only screen and (max-width: 550px) { - .hero-title { - font-size: 6rem; - } - - .hero-subtitle, - .author, - .quote, - .list-header { - font-size: 1.8rem; - } - - .social-icons { - font-size: 2rem; - } - - .text { - font-size: 1.6rem; - } -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -img { - width: 100%; - object-fit: cover; -} - -hr { - margin: 1.5rem 0; - border: 1px solid rgba(120, 120, 120, 0.6); -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; - font-size: 1.8rem; - letter-spacing: 0.6px; - column-width: 25rem; - text-align: justify; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} - -.hero-title { - text-align: center; - color: orangered; - font-size: 8rem; -} - -.hero-subtitle { - font-size: 2.4rem; - color: orangered; - text-align: center; -} - -.author { - font-size: 2rem; - font-family: "Raleway", sans-serif; -} - -.author-name a:hover { - background-color: #306203; -} - -.publish-date { - color: rgba(255, 255, 255, 0.5); -} - -.social-icons { - display: grid; - font-size: 3rem; - grid-template-columns: repeat(5, 1fr); - grid-auto-flow: column; - grid-auto-columns: 1fr; - align-items: center; -} - -.first-paragraph::first-letter { - font-size: 6rem; - color: orangered; - float: left; - margin-right: 1rem; -} - -.quote { - color: #00beef; - font-size: 2.4rem; - text-align: center; - font-family: "Raleway", sans-serif; -} - -.quote::before { - content: '" '; -} - -.quote::after { - content: ' "'; -} - -.text-with-images { - display: grid; - grid-template-columns: 1fr 2fr; - column-gap: 3rem; - margin-bottom: 3rem; -} - -.lists { - list-style-type: none; - margin-top: 2rem; -} - -.lists li { - margin-bottom: 1.5rem; -} - -.list-title, .list-subtitle { - color: #00beef; -} - -.image-wrapper { - display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: repeat(3, min-content); - gap: 2rem; - place-items: center; -} - -.image-1, .image-3 { - grid-column: 1 / -1; -} - -@media only screen and (max-width: 720px) { - .image-wrapper { - grid-template-columns: 1fr; - } -} - -@media only screen and (max-width: 600px) { - .text-with-images { - grid-template-columns: 1fr; - } -} - -@media only screen and (max-width: 550px) { - .hero-title { - font-size: 6rem; - } - - .hero-subtitle, - .author, - .quote, - .list-header { - font-size: 1.8rem; - } - - .social-icons { - font-size: 2rem; - } - - .text { - font-size: 1.6rem; - } -} - -@media only screen and (max-width: 420px) { - .hero-title { - font-size: 4.5rem; - } -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md deleted file mode 100644 index b309b425346ffa..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md +++ /dev/null @@ -1,256 +0,0 @@ ---- -id: 614e0e503b110f76d3ac2ff6 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -You should remove the temporary `width` attribute before writing the CSS for your `.hero-img`. - -# --hints-- - -Your `.hero-img` should not have a `width` attribute. - -```js -assert.isNull(document.querySelector('.hero-img')?.getAttribute('width')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
---fcc-editable-region-- - freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

---fcc-editable-region-- -
-
-

- By - freeCodeCamp -

-

March 7, 2019

-
- -
-
-

- Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. -

-

- After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! -

-

- It wasn't as dramatic as Doc's revelation in Back to the Future. It - just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) -

-
-
-

- The entire curriculum should be a series of projects -

-
-
-

- No more walls of explanatory text. No more walls of tests. Just one - test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. -

-

- The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". -

-

- Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. -

-
-
-
-

A Brief History

-

Of the Curriculum

-
    -
  • -

    V1 - 2014

    -

    - We launched freeCodeCamp with a simple list of 15 resources, - including Harvard's CS50 and Stanford's Database Class. -

    -
    • -
  • -

    V2 - 2015

    -

    We added interactive algorithm challenges.

    -
    • -
  • -

    V3 - 2015

    -

    - We added our own HTML+CSS challenges (before we'd been relying on - General Assembly's Dash course for these). -

    -
    • -
  • -

    V4 - 2016

    -

    - We expanded the curriculum to 3 certifications, including Front - End, Back End, and Data Visualization. They each had 10 required - projects, but only the Front End section had its own challenges. - For the other certs, we were still using external resources like - Node School. -

    -
    • -
  • -

    V5 - 2017

    -

    We added the back end and data visualization challenges.

    -
    • -
  • -

    V6 - 2018

    -

    - We launched 6 new certifications to replace our old ones. This was - the biggest curriculum improvement to date. -

    -
    • -
-
- -
-
- - -``` - -```css -*, -::before, -::after { - padding: 0; - margin: 0; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - font-family: 'Baskervville', serif; - color: linen; - background-color: rgb(20, 30, 40); -} - -h1 { - font-family: 'Anton', sans-serif; -} - -h2, h3, h4, h5, h6 { - font-family: 'Raleway', sans-serif; -} - -a { - text-decoration: none; - color: linen; -} - -main { - display: grid; - grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); - row-gap: 3rem; -} - -.heading { - grid-column: 2 / 3; - display: grid; - grid-template-columns: repeat(2, 1fr); - row-gap: 1.5rem; -} - -.text { - grid-column: 2 / 3; -} - -.hero { - grid-column: 1 / -1; - position: relative; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md deleted file mode 100644 index f6b66931c04c9b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 614e0e588f0e8a772a8a81a6 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Your image currently takes up a lot of space. To better see what you are working on, add a `width` attribute to the `img` element, with a value of `400`. - -You will remove this later on when you have worked on the CSS. - -# --hints-- - -Your `img` element should have a `width` attribute set to `400`. - -```js -assert(document.querySelector('img')?.getAttribute('width') === '400'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - ---fcc-editable-region-- -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
-
-
---fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md deleted file mode 100644 index 21e7017a11506b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 6165d3b702a5d92ad970b30c -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -After your `img` element, add an `h1` element with the `class` set to `hero-title` and the text set to `OUR NEW CURRICULUM`, followed by a `p` element with the `class` set to `hero-subtitle` and the text set to `Our efforts to restructure our curriculum with a more project-based focus`. - -# --hints-- - -You should create an `h1` element. - -```js -assert.exists(document.querySelector('h1')); -``` - -Your `h1` element should come after your `img` element. - -```js -assert(document.querySelector('h1')?.previousElementSibling?.localName === 'img'); -``` - -Your `h1` element should have the `class` set to `hero-title`. - -```js -assert(document.querySelector('h1')?.className === 'hero-title'); -``` - -Your `h1` element should have the text set to `OUR NEW CURRICULUM`. - -```js -assert(document.querySelector('h1')?.textContent === 'OUR NEW CURRICULUM'); -``` - -You should create a new `p` element. - -```js -assert.exists(document.querySelector('p')); -``` - -Your `p` element should come after your `h1` element. - -```js -assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1'); -``` - -Your `p` element should have the `class` set to `hero-subtitle`. - -```js -assert(document.querySelector('p')?.className === 'hero-subtitle'); -``` - -Your `p` element should have the text set to `Our efforts to restructure our curriculum with a more project-based focus`. - -```js -assert.equal(document.querySelector('p')?.textContent?.trim()?.replace(/\s{2,}/, ' '), 'Our efforts to restructure our curriculum with a more project-based focus'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - ---fcc-editable-region-- -
-
-
- freecodecamp logo -
-
-
---fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md deleted file mode 100644 index fef941bc8fef89..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 6169cd8a558aa8434e0ad7f6 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -The `Referer` HTTP header contains information about the address or URL of a page that a user might be visiting from. This information can be used in analytics to track how many users from your page visit freecodecamp.org, for example. Setting the `rel` attribute to `noreferrer` omits this information from the HTTP request. Give your `a` element a `rel` attribute set to `noreferrer`. - -# --hints-- - -Your `a` element should have the `rel` set to `noreferrer`. - -```js -assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('rel') === 'noreferrer'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Magazine - - - - - -
-
-
- freecodecamp logo -

OUR NEW CURRICULUM

-

- Our efforts to restructure our curriculum with a more project-based - focus -

-
---fcc-editable-region-- -
-

- By - freeCodeCamp -

-

March 7, 2019

-
-
-
---fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md deleted file mode 100644 index f95c4903e25ada..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 619665c9abd72906f3ad30f9 -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -You will be building a happy Flappy Penguin, and further exploring CSS transforms and animations in the process. - -Begin with your basic HTML boilerplate. Include the `DOCTYPE` declaration, `html` element, the appropriate `meta` tags, a `head`, `body`, and `title` element. Also, link your stylesheet to the page. - -# --hints-- - -Your code should have a `` declaration. - -```js -assert(code.match(//i)); -``` - -Your code should have an `html` element. - -```js -assert.equal(document.querySelectorAll('html')?.length, 1); -``` - -Your code should have a `head` element within the `html` element. - -```js -assert.equal(document.querySelectorAll('head')?.length, 1); -``` - -Your code should have a `body` element within the `html` element. - -```js -assert.equal(document.querySelectorAll('body')?.length, 1); -``` - -Your `head` element should come before your `body` element. - -```js -assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD'); -``` - -You should have two `meta` elements. - -```js -const meta = document.querySelectorAll('meta'); -assert.equal(meta?.length, 2); -``` - -One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); -assert.exists(target); -``` - -The other `meta` element should have the `charset` attribute set to `UTF-8`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -assert.exists(target); -``` - -Your code should have a `title` element. - -```js -const title = document.querySelector('title'); -assert.exists(title); -``` - -Your `title` should have some text. - -```js -const title = document.querySelector('title'); -assert.isAtLeast(title?.textContent?.length, 1); -``` - -Your code should have a `link` element. - -```js -assert(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert.match(code, / - - - - - - Penguin - - - - - - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md deleted file mode 100644 index be0b424bdb5fba..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 61968df2acd5550bf1616c34 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Normalise your page's sizing, by removing the `body` element's `margin` and `padding`. - -# --hints-- - -You should give `body` a `margin` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); -``` - -You should give `body` a `padding` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - - - -``` - -```css ---fcc-editable-region-- -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md deleted file mode 100644 index de1934899972d0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 61968e9243a4090cc805531c -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Remove both the horizontal and vertical scrollbars, and prevent programmatic scrolling, using only one property. - -# --hints-- - -You should give `body` an `overflow` of `clip`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'clip'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - - - -``` - -```css ---fcc-editable-region-- -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md deleted file mode 100644 index b5e240acbaadbe..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 61968f8877c6720d6d61aaf5 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Within the `body`, add a `div` with a `class` of `ground`. - -# --hints-- - -You should add a new `div`. - -```js -assert.exists(document.querySelector('div')); -``` - -You should give the `div` a `class` of `ground`. - -```js -assert.include(document.querySelector('div')?.className, 'ground'); -``` - -You should place the `div` within the `body`. - -```js -assert.exists(document.querySelector('body > div.ground')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - ---fcc-editable-region-- - - - ---fcc-editable-region-- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md deleted file mode 100644 index 0b400b7701384a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 619691693bc14b0e528f5a20 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`. - -# --hints-- - -You should use the `.ground` selector. - -```js -assert.match(code, /\.ground\s*\{/); -``` - -You should give the `.ground` element a `width` of `100vw`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw'); -``` - -You should give the `.ground` element a `height` of `400px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md deleted file mode 100644 index ac23498857194e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: 6196928658b6010f28c39484 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`. - -# --hints-- - -You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`. - -```js -assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - ---fcc-editable-region-- -.ground { - width: 100vw; - height: 400px; - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md deleted file mode 100644 index be4e21b00663a1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 619692ff79f5770fc6d8c0b4 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin. - -# --hints-- - -You should add a new `div` within the `body`. - -```js -assert.equal(document.querySelectorAll('body > div')?.length, 2); -``` - -You should give the `div` a `class` of `penguin`. - -```js -assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin'); -``` - -You should place `div.penguin` before `div.ground`. - -```js -assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - ---fcc-editable-region-- - - -
- ---fcc-editable-region-- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md deleted file mode 100644 index ffc20e0a9315e0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 6196990f966e8f10a40094f6 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Target the `.penguin` element, and set its `width` and `height` to `300px`. - -# --hints-- - -You should use the `.penguin` selector. - -```js -assert.match(code, /\.penguin\s*\{/); -``` - -You should give `.penguin` a `width` of `300px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px'); -``` - -You should give `.penguin` a `height` of `300px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - -
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md deleted file mode 100644 index 4a3d8650b1ff1e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 619699c10a0f6e11591d73c4 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`. - -# --hints-- - -You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginBottom, 'auto'); -``` - -You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - -
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - ---fcc-editable-region-- -.penguin { - width: 300px; - height: 300px; - -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md deleted file mode 100644 index ab4f0c0c70c662..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: 61969aa6acef5b12200f672e -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -To create some scenery in the background, you will add two mountains. - -Above the `.penguin` element, add a `div` with a `class` of `left-mountain`. - -# --hints-- - -You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('body > div')?.length, 3); -``` - -You should give the `div` a `class` of `left-mountain`. - -```js -assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain'); -``` - -You should place `.left-mountain` before `.penguin`. - -```js -assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - ---fcc-editable-region-- - - -
-
- ---fcc-editable-region-- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md deleted file mode 100644 index ca587cc993d183..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 61969c487ced6f12db8fef94 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`. - -# --hints-- - -You should use the `.left-mountain` selector. - -```js -assert.match(code, /\.left-mountain\s*\{/); -``` - -You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px'); -``` - -You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px'); -``` - -You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`. - -```js -assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - -
-
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md deleted file mode 100644 index aef38e05a45c32..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: 61969d66cfcdba137d021558 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout. - -# --hints-- - -You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - -
-
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - ---fcc-editable-region-- -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - -} ---fcc-editable-region-- - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md deleted file mode 100644 index 96d112e5130c03..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 61969e7451455614217e901b -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by. - -Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis. - -# --hints-- - -You should give `.left-mountain` a `transform` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform); -``` - -You should use the `skew` function on `transform`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew'); -``` - -You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - -
-
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - ---fcc-editable-region-- -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - -} ---fcc-editable-region-- - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md deleted file mode 100644 index 73015c8fffce84..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 6196adc17f77a714d51485f2 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Set the stack level of the mountain element such that it remains directly behind the `.ground` element. - -# --hints-- - -You should use the `z-index` property to change the stack level. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex); -``` - -You should set the `z-index` property to `2`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2'); -``` - -You should not change the `z-index` of the `.ground` element. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - -
-
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - ---fcc-editable-region-- -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - -} ---fcc-editable-region-- - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md deleted file mode 100644 index 0983e0fd2ec4b4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: 6196aead7ac7bf1584b17a7f -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`. - -# --hints-- - -You should give `.left-mountain` a `margin-top` of `100px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px'); -``` - -You should give `.ground` a `margin-top` of `-58px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - -
-
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - ---fcc-editable-region-- -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md deleted file mode 100644 index c20375470a36a9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 6196ce0415498d2463989e84 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`. - -# --hints-- - -You should add a new `div` within `body`. - -```js -assert.equal(document.querySelectorAll('body > div')?.length, 4); -``` - -You should give the `div` a `class` of `back-mountain`. - -```js -assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain'); -``` - -You should place `.back-mountain` after `.left-mountain`. - -```js -assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - ---fcc-editable-region-- - -
- -
-
- ---fcc-editable-region-- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md deleted file mode 100644 index b6b61bb39d5daa..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 6196cee94c6da1253809dff9 -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`. - -# --hints-- - -You should use the `.back-mountain` selector. - -```js -assert.match(code, /\.back-mountain\s*\{/); -``` - -You should give `.back-mountain` a `width` of `300px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px'); -``` - -You should give `.back-mountain` a `height` of `300px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px'); -``` - -You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`. - -```js -assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md deleted file mode 100644 index f591f16d485c2a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 6196d00a5d7292262bc02f4c -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout. - -# --hints-- - -You should give `.back-mountain` a `position` of `absolute`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - ---fcc-editable-region-- -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - -} ---fcc-editable-region-- - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md deleted file mode 100644 index 24f3cb2c039c48..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 6196d0cda039d026f7f78d1e -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element. - -# --hints-- - -You should use the `z-index` property to change the stack level. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex); -``` - -You should set the `z-index` property to `1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1'); -``` - -You should not change the `z-index` of the `.left-mountain` element. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - ---fcc-editable-region-- -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - -} ---fcc-editable-region-- - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md deleted file mode 100644 index ca88d5121e99c3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 6196d1ac33c68d27dcda5796 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`. - -# --hints-- - -You should use the `transform` property to rotate the element. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform); -``` - -You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform, 'rotate(45deg)'); -``` - -You should give `.back-mountain` a `left` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left); -``` - -You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px'); -``` - -You should give `.back-mountain` a `top` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top); -``` - -You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - ---fcc-editable-region-- -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - -} ---fcc-editable-region-- - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md deleted file mode 100644 index 6f50c075cfd913..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 6196d213d99f16287bff22ae -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`. - -# --hints-- - -You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('body > div')?.length, 5); -``` - -You should give the new `div` element a `class` of `sun`. - -```js -assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun'); -``` - -You should place the new `div` element immediately after the `.back-mountain` element. - -```js -assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - ---fcc-editable-region-- - -
-
- -
-
- ---fcc-editable-region-- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md deleted file mode 100644 index cfd0f6827fbe73..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 6196d2c0f22ca0293107c048 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`. - -# --hints-- - -You should use the `.sun` selector. - -```js -assert.match(code, /\.sun\s*\{/); -``` - -You should give `.sun` a `width` of `200px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px'); -``` - -You should give `.sun` a `height` of `200px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px'); -``` - -You should give `.sun` a `background-color` of `yellow`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md deleted file mode 100644 index 03e1bef9eb1c4c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 6196d32d1340d829f0f6f57d -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle. - -# --hints-- - -You should give `.sun` a `position` of `absolute`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute'); -``` - -You should give `.sun` a `border-radius` of `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - ---fcc-editable-region-- -.sun { - width: 200px; - height: 200px; - background-color: yellow; - -} ---fcc-editable-region-- - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md deleted file mode 100644 index ed1dd40c595b7b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 6196d41d40bf9b2aaea5d520 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen. - -# --hints-- - -You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px'); -``` - -You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - ---fcc-editable-region-- -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - -} ---fcc-editable-region-- - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md deleted file mode 100644 index 954564415d33aa..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -id: 6197cff995d03905b0cca8ad -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Your penguin will consist of two main sections: the head, and the body. - -Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`. - -# --hints-- - -You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.penguin > div')?.length, 2); -``` - -You should give the first `div` a `class` of `penguin-head`. - -```js -assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head'); -``` - -You should give the second `div` a `class` of `penguin-body`. - -```js -assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
---fcc-editable-region-- -
- -
---fcc-editable-region-- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md deleted file mode 100644 index 151d27cb3829cc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 6197f40a16afea068c7e60c8 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`. - -# --hints-- - -You should use the `z-index` property to change the stack level. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex); -``` - -You should give the `.penguin` element a `z-index` of `4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4'); -``` - -You should give `.penguin` a `position` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position); -``` - -You should give `.penguin` a `position` of `relative`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - ---fcc-editable-region-- -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md deleted file mode 100644 index 5c42c6a4819ffe..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 6197f667297bb30a552ce017 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`. - -# --hints-- - -You should give `.ground` a `z-index` of `3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3'); -``` - -You should give `.ground` a `position` of `absolute`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - ---fcc-editable-region-- -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md deleted file mode 100644 index 58e601a3eefb24..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 61993b72e874e709b8dfd666 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`. - -# --hints-- - -You should use the `.penguin-head` selector. - -```js -assert.match(code, /\.penguin-head\s*\{/); -``` - -You should give `.penguin-head` a `width` of `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%'); -``` - -You should give `.penguin-head` a `height` of `45%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%'); -``` - -You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`. - -```js -assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md deleted file mode 100644 index 81ecef3046537f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 61993cf26a8e0f0a553db223 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -_Most_ penguins do not have a square head. - -Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`. - -# --hints-- - -You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`. - -```js -// Maybe check for individual border-radius properties? -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - ---fcc-editable-region-- -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md deleted file mode 100644 index fec5b8d98a38d2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 61993dbb35adf30b10d49e38 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`. - -# --hints-- - -You should use the `.penguin-body` selector. - -```js -assert.match(code, /\.penguin-body\s*\{/); -``` - -You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%'); -``` - -You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%'); -``` - -You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`. - -```js -assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md deleted file mode 100644 index df8e6a855c4394..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 61993e9adc9e9a0bb4d28fff -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Another interesting fact about penguins is that they do not have square bodies. - -Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body. - -# --hints-- - -You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; -} - ---fcc-editable-region-- -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md deleted file mode 100644 index 3db2e03fda9d47..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 6199409834ccaf0d10736596 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`. - -# --hints-- - -You should use the `.penguin *` selector. - -```js -assert.match(code, /\.penguin\s*\*\s*\{/); -``` - -You should give `.penguin *` a `position` of `absolute`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md deleted file mode 100644 index 86896286d43a8c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 6199429802b7c10dc79ff871 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent. - -# --hints-- - -You should give `.penguin-head` a `top` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top); -``` - -You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%'); -``` - -You should give `.penguin-head` a `left` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left); -``` - -You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - ---fcc-editable-region-- -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - -} ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md deleted file mode 100644 index c4312988ebf7ab..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 619943285a41720e6370d985 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent. - -# --hints-- - -You should give `.penguin-body` a `top` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top); -``` - -You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%'); -``` - -You should give `.penguin-body` a `left` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left); -``` - -You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; -} - ---fcc-editable-region-- -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md deleted file mode 100644 index 796857678a8dab..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 619943876b706d0f35c01dbc -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element. - -# --hints-- - -You should use the `z-index` property to change the stack level. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex); -``` - -You should give the `.penguin-head` element a `z-index` of `1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - ---fcc-editable-region-- -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - -} ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md deleted file mode 100644 index 403d35990b22ef..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -id: 6199442866286d0ff421a4fc -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string. - -# --hints-- - -You should use the `.penguin-body::before` selector. - -```js -assert.match(code, /\.penguin-body::before\s*\{/); -``` - -You should give `.penguin-body::before` a `content` of `""`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md deleted file mode 100644 index b5a97dad6cc903..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -id: 619bcf239fc15905ecd66fce -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Position the pseudo-element relative to its closest positioned ancestor. - -# --hints-- - -You should give `.penguin-body::before` a `position` of `absolute`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - ---fcc-editable-region-- -.penguin-body::before { - content: ""; - -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md deleted file mode 100644 index 49f5c8a1d4531e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 619be73b3c806006ccc00bb0 -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`. - -# --hints-- - -You should give `.penguin-body::before` a `width` of `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%'); -``` - -You should give `.penguin-body::before` a `height` of `45%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%'); -``` - -You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - ---fcc-editable-region-- -.penguin-body::before { - content: ""; - position: absolute; - -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md deleted file mode 100644 index d26ba7edc7c72e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -id: 619be7af7b0bf60770f5d2a4 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Position the pseudo-element `10%` from the top and `25%` from the left of its parent. - -# --hints-- - -You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%'); -``` - -You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - ---fcc-editable-region-- -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md deleted file mode 100644 index 66497f14a392ae..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: 619be80062551a080e32c821 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`. - -# --hints-- - -You should use the `border-radius` property to round off the crest. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius); -``` - -You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - ---fcc-editable-region-- -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md deleted file mode 100644 index 5f8b07f1745de2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -id: 619be8ce4ea49008c5bfbc30 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Increase the psuedo-element's transparency by `30%`. - -# --hints-- - -You should give `.penguin-body::before` an `opacity` of `70%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - ---fcc-editable-region-- -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md deleted file mode 100644 index f54bfa634d93ec..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -id: 619be946958c6009844f1dee -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`. - -# --hints-- - -You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2); -``` - -You should give the first `div` a `class` of `face`, but found `--fcc-actual--`. - -```js -assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face'); -``` - -You should give the second `div` a `class` of `face`, but found `--fcc-actual--`. - -```js -assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
---fcc-editable-region-- -
- -
---fcc-editable-region-- -
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md deleted file mode 100644 index e5add0eae5cbf8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 619c155df0063a0a3fec0e32 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`. - -# --hints-- - -You should use the `.face` selector. - -```js -assert.match(code, /\.face\s*\{/); -``` - -You should give `.face` a `width` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width); -``` - -You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%'); -``` - -You should give `.face` a `height` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height); -``` - -You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%'); -``` - -You should give `.face` a `background-color` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor); -``` - -You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md deleted file mode 100644 index b99042ce04d77b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -id: 619c16debd0c270b01c5ce38 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`. - -# --hints-- - -You should give `.face` a `border-radius` of `70% 70% 60% 60%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - ---fcc-editable-region-- -.face { - width: 60%; - height: 70%; - background-color: white; - -} ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md deleted file mode 100644 index 53dde86c234512..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 619cfdf2e63ddf05feab86ad -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Position the `.face` elements so that they are `15%` from the top. - -# --hints-- - -You should give `.face` a `top` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top); -``` - -You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - ---fcc-editable-region-- -.face { - width: 60%; - height: 70%; - background-color: white; - border-radius: 70% 70% 60% 60%; - -} ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md deleted file mode 100644 index 1a38b59bd158ef..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -id: 619d019488f98c06acbbb71a -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Currently, the two `.face` elements are on top of each other. - -Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element. - -# --hints-- - -You should give a `class` of `left` to the first `.face` element. - -```js -assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left'); -``` - -You should give a `class` of `right` to the second `.face` element. - -```js -assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
---fcc-editable-region-- -
-
-
-
---fcc-editable-region-- -
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: white; - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md deleted file mode 100644 index 39f2459a839f69..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 619d022dc8400c0763829a17 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Target the `.face` element with the `left` class, and position it `5%` left of its parent. - -# --hints-- - -You should use the `.face.left` selector. - -```js -assert.match(code, /\.face\.left\s*\{/); -``` - -You should give `.face.left` a `left` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left); -``` - -You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: white; - border-radius: 70% 70% 60% 60%; - top: 15%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md deleted file mode 100644 index 71740f75f7ed54..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 619d02c7bc95bf0827a5d296 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Target the `.face` element with the `right` class, and position it `5%` right of its parent. - -# --hints-- - -You should use the `.face.right` selector. - -```js -assert.match(code, /\.face\.right\s*\{/); -``` - -You should give `.face.right` a `right` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right); -``` - -You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: white; - border-radius: 70% 70% 60% 60%; - top: 15%; -} - ---fcc-editable-region-- -.face.left { - left: 5%; -} - - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md deleted file mode 100644 index 0a3d13de0322de..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 619d033915012509031f309a -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Below the `.face.right` element, add a `div` element with a `class` of `chin`. - -# --hints-- - -You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3); -``` - -You should give the `div` a `class` of `chin`. - -```js -assert.exists(document.querySelector('.penguin-head > div.chin')); -``` - -You should place the `div` element below the `.face.right` element. - -```js -assert.exists(document.querySelector('.face.right + .chin')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
---fcc-editable-region-- -
-
-
- -
---fcc-editable-region-- -
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: white; - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md deleted file mode 100644 index b1fd72eb246b1e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 619d03dadadb6509a16f4f5f -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Target the `.chin` element, and give it a `width` of `90%`, height of `70%`, and `background-color` of `white`. - -# --hints-- - -You should use the `.chin` selector. - -```js -assert.match(code, /\.chin\s*\{/); -``` - -You should give `.chin` a `width` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width); -``` - -You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%'); -``` - -You should give `.chin` a `height` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height); -``` - -You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%'); -``` - -You should give `.chin` a `background-color` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor); -``` - -You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: white; - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md deleted file mode 100644 index 23655dc0882d18..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 619d0503e03a790a4179d463 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`. - -# --hints-- - -You should give `.chin` a `top` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top); -``` - -You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%'); -``` - -You should give `.chin` a `left` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left); -``` - -You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%'); -``` - -You should give `.chin` a `border-radius` of `70% 70% 100% 100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: white; - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - ---fcc-editable-region-- -.chin { - width: 90%; - height: 70%; - background-color: white; - -} ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md deleted file mode 100644 index a8ba349954221f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 619d05c54dabca0b10058235 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -So far, the `.face` and `.chin` elements have the same `background-color`. - -Create a custom CSS property called `--penguin-face`, and set it to `white`. - -# --hints-- - -You should use the `:root` selector. - -```js -assert.match(code, /:root\s*\{/); -``` - -You should give `:root` a `--penguin-face` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face')); -``` - -You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: white; - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: white; - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md deleted file mode 100644 index fa8b62a3561857..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 619d0882f54bf40bdc4671ed -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Where relevant, replace property values with your `--penguin-face` variable. - -# --hints-- - -You should give `.face` a `background-color` of `var(--penguin-face)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)'); -``` - -You should give `.chin` a `background-color` of `var(--penguin-face)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)'); -``` - -You should not use `var(--penguin-face)` in the `.penguin-body` selector. - -```js -assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css ---fcc-editable-region-- -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: white; - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: white; - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md deleted file mode 100644 index d3e4bbd140e63b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 619d090cd8d6db0c93dc5087 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`. - -# --hints-- - -You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5); -``` - -You should give the first new `div` a `class` of `eye`. - -```js -assert.exists(document.querySelector('.penguin-head > div.eye')); -``` - -You should give the second new `div` a `class` of `eye`. - -```js -assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2); -``` - -You should give the first new `div` a `class` of `left`. - -```js -assert.exists(document.querySelector('.penguin-head > div.eye.left')); -``` - -You should give the second new `div` a `class` of `right`. - -```js -assert.exists(document.querySelector('.penguin-head > div.eye.right')); -``` - -You should place `div.eye.left` after `div.chin`. - -```js -assert.exists(document.querySelector('.chin + .eye.left')); -``` - -You should place `div.eye.right` after `div.eye.left`. - -```js -assert.exists(document.querySelector('.eye.left + .eye.right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
---fcc-editable-region-- -
-
-
-
- -
---fcc-editable-region-- -
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md deleted file mode 100644 index 194fbebfee0d5b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 619d0b51ca42ed0d74582186 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`. - -# --hints-- - -You should use the `.eye` selector. - -```js -assert.match(code, /\.eye\s*\{/); -``` - -You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%'); -``` - -You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%'); -``` - -You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md deleted file mode 100644 index 5ef1e0c107d550..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -id: 619d0bc9cb05360e1bf549c3 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`. - -# --hints-- - -You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%'); -``` - -You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - ---fcc-editable-region-- -.eye { - width: 15%; - height: 17%; - background-color: black; - -} ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md deleted file mode 100644 index d4b3b9340ff5ce..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: 619d0c1594c38c0ebae75878 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent. - -# --hints-- - -You should use the `.eye.left` selector. - -```js -assert.match(code, /\.eye\.left\s*\{/); -``` - -You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%'); -``` - -You should use the `.eye.right` selector. - -```js -assert.match(code, /\.eye\.right\s*\{/); -``` - -You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md deleted file mode 100644 index 8cce4bf4b7d538..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 619d0d18ca99870f884a7bff -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Within each `.eye` element, add a `div` with a `class` of `eye-lid`. - -# --hints-- - -You should add one `div` element within `.eye.left`, but found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1); -``` - -You should add one `div` element within `.eye.right`, but found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1); -``` - -You should give the first new `div` a `class` of `eye-lid`. - -```js -assert.exists(document.querySelector('.eye.left > div.eye-lid')); -``` - -You should give the second new `div` a `class` of `eye-lid`. - -```js -assert.exists(document.querySelector('.eye.right > div.eye-lid')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
---fcc-editable-region-- -
-
-
-
-
- -
-
- -
-
---fcc-editable-region-- -
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md deleted file mode 100644 index 91bf2597bfd358..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 619d0daf214542102739b0da -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`. - -# --hints-- - -You should use the `.eye-lid` selector. - -```js -assert.match(code, /\.eye-lid\s*\{/); -``` - -You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%'); -``` - -You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%'); -``` - -You should give `.eye-lid` a `background-color` of `var(--penguin-face)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md deleted file mode 100644 index cca6de99cfe0a8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 619d0e56f9ca9710fcb974e3 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`. - -# --hints-- - -You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%'); -``` - -You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%'); -``` - -You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - ---fcc-editable-region-- -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - -} ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md deleted file mode 100644 index 246841f262f329..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md +++ /dev/null @@ -1,247 +0,0 @@ ---- -id: 619d0eec0ac40611b41e2ccc -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`. - -# --hints-- - -You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7); -``` - -You should give the first new `div` a `class` of `blush`. - -```js -assert.exists(document.querySelector('.penguin-head > div.blush')); -``` - -You should give the second new `div` a `class` of `blush`. - -```js -assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2); -``` - -You should give the first new `div` a `class` of `left`. - -```js -assert.exists(document.querySelector('.penguin-head > div.blush.left')); -``` - -You should give the second new `div` a `class` of `right`. - -```js -assert.exists(document.querySelector('.penguin-head > div.blush.right')); -``` - -You should place `.blush.right` after `.blush.left`. - -```js -assert.exists(document.querySelector('.blush.left + .blush.right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md deleted file mode 100644 index a2c7b8bca46b6f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 619d0fc9825c271253df28d4 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`. - -# --hints-- - -You should use the `.blush` selector. - -```js -assert.match(code, /\.blush\s*\{/); -``` - -You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%'); -``` - -You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%'); -``` - -You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md deleted file mode 100644 index f0ecacc88a0993..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md +++ /dev/null @@ -1,231 +0,0 @@ ---- -id: 619d102d786c3d13124c37c6 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`. - -# --hints-- - -You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%'); -``` - -You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - ---fcc-editable-region-- -.blush { - width: 15%; - height: 10%; - background-color: pink; - -} ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md deleted file mode 100644 index f31cbe0a90cf09..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -id: 619d107edf7ddf13cc77106a -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent. - -# --hints-- - -You should use the `.blush.left` selector. - -```js -assert.match(code, /\.blush\.left\s*\{/); -``` - -You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%'); -``` - -You should use the `.blush.right` selector. - -```js -assert.match(code, /\.blush\.right\s*\{/); -``` - -You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md deleted file mode 100644 index bf0c236a6611c6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 619d10cc98145f14820399c5 -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`. - -# --hints-- - -You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9); -``` - -You should give the first new `div` a `class` of `beak`. - -```js -assert.exists(document.querySelector('.penguin-head > div.beak')); -``` - -You should give the second new `div` a `class` of `beak`. - -```js -assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2); -``` - -You should give the first new `div` a `class` of `top`. - -```js -assert.exists(document.querySelector('.penguin-head > div.beak.top')); -``` - -You should give the second new `div` a `class` of `bottom`. - -```js -assert.exists(document.querySelector('.penguin-head > div.beak.bottom')); -``` - -You should place `div.beak.top` after `div.blush.right`. - -```js -assert.exists(document.querySelector('.blush.right + .beak.top')); -``` - -You should place `div.beak.bottom` after `div.beak.top`. - -```js -assert.exists(document.querySelector('.beak.top + .beak.bottom')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md deleted file mode 100644 index ce35b4d554117d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md +++ /dev/null @@ -1,256 +0,0 @@ ---- -id: 619d115e2adcd71538e82ebb -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`. - -# --hints-- - -You should use the `.beak` selector. - -```js -assert.match(code, /\.beak\s*\{/); -``` - -You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%'); -``` - -You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange'); -``` - -You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md deleted file mode 100644 index e9d865406a4c91..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 619d11e6d5ef9515d2a16033 -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent. - -# --hints-- - -You should use the `.beak.top` selector. - -```js -assert.match(code, /\.beak\.top\s*\{/); -``` - -You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%'); -``` - -You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%'); -``` - -You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md deleted file mode 100644 index a93da9151c040d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 619d129a417d0716a94de913 -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`. - -# --hints-- - -You should use the `.beak.bottom` selector. - -```js -assert.match(code, /\.beak\.bottom\s*\{/); -``` - -You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%'); -``` - -You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%'); -``` - -You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - ---fcc-editable-region-- -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md deleted file mode 100644 index 71e033623bb273..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 619d1340361095175f4b5115 -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element. - -# --hints-- - -You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.penguin > div')?.length, 3); -``` - -You should give the new `div` a `class` of `shirt`. - -```js -assert.exists(document.querySelector('.penguin > div.shirt')); -``` - -You should place the new `div` before `.penguin-body`. - -```js -assert.exists(document.querySelector('.shirt + .penguin-body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md deleted file mode 100644 index 1b21e208fb1632..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 619d15797b580c1828b05426 -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Within the `.shirt` element, add a `div` with the following emoji as content: 💜 - -# --hints-- - -You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.shirt > div')?.length, 1); -``` - -You should give the new `div` a content of `💜`, but found `--fcc-actual--`. - -```js -assert.equal(document.querySelector('.shirt > div')?.textContent, '💜'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
- -
---fcc-editable-region-- -
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md deleted file mode 100644 index a76d3f48276acb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: 619d15d955d9d418c4487bbc -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS` - -# --hints-- - -You should add one `p` element within `.shirt`, but found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.shirt > p')?.length, 1); -``` - -You should give the `p` element the content `I CSS`, but found `--fcc-actual--`. - -```js -assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
💜
- -
---fcc-editable-region-- -
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md deleted file mode 100644 index d14671bd3fe49c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md +++ /dev/null @@ -1,278 +0,0 @@ ---- -id: 619d1629a8adc61960ca8b40 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`. - -# --hints-- - -You should use the `.shirt` selector. - -```js -assert.match(code, /\.shirt\s*\{/); -``` - -You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px'); -``` - -You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif'); -``` - -You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md deleted file mode 100644 index 27b9f2be0717de..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 619d1c5fc9f8941a400955da -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -If you look closely, the _heart_ emoji is slightly different. This is because some of the character's properties were overridden by the `font-weight` style of `bold`. - -Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value. - -# --hints-- - -You should use the `.shirt div` selector to target the `div` with the heart emoji. - -```js -assert.match(code, /\.shirt div\s*\{/); -``` - -You should give the `.shirt div` a `font-weight` of `initial` or `normal`. - -```js -assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - ---fcc-editable-region-- -.shirt { - font: bold 25px Helvetica, sans-serif; -} - - ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md deleted file mode 100644 index 6c54a58964a6c2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 619d1dab9ff3421ae1976991 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent. - -# --hints-- - -You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px'); -``` - -You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - ---fcc-editable-region-- -.shirt { - font: bold 25px Helvetica, sans-serif; -} - -.shirt div { - font-weight: initial; - -} ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md deleted file mode 100644 index c9e91af3bb6eb5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 619d1deb8b04811b8839ffe4 -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element. - -# --hints-- - -You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px'); -``` - -You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px'); -``` - -You should give the `.shirt` element a `z-index` of `1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - ---fcc-editable-region-- -.shirt { - font: bold 25px Helvetica, sans-serif; - -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md deleted file mode 100644 index d1d1c163e2f62c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 619d1e7a8e81a61c5a819dc4 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -For the shirt's final touch, set the `color` to `#6a6969`. - -# --hints-- - -You should give `.shirt` a `color` of `#6a6969`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - ---fcc-editable-region-- -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} ---fcc-editable-region-- - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md deleted file mode 100644 index 5478b812f5c7ac..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md +++ /dev/null @@ -1,306 +0,0 @@ ---- -id: 619d1ed33c9a071cf657a0d6 -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -Fun fact: Penguins cannot stand without at least two feet. - -Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`. - -# --hints-- - -You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2); -``` - -You should give the first new `div` a `class` of `foot`. - -```js -assert.exists(document.querySelector('.penguin-body > div.foot')); -``` - -You should give the second new `div` a `class` of `foot`. - -```js -assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2); -``` - -You should give one `div` a `class` of `left`. - -```js -assert.exists(document.querySelector('.penguin-body > div.foot.left')); -``` - -You should give the other `div` a `class` of `right`. - -```js -assert.exists(document.querySelector('.penguin-body > div.foot.right')); -``` - -You should place `.foot.right` after `.foot.left`. - -```js -assert.exists(document.querySelector('.foot.left + .foot.right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
---fcc-editable-region-- -
- -
---fcc-editable-region-- -
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md deleted file mode 100644 index 8b493d914ab41b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 619d1fb5d244c31db8a7fdb7 -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`. - -# --hints-- - -You should use the `.foot` selector. - -```js -assert.match(code, /\.foot\s*\{/); -``` - -You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%'); -``` - -You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%'); -``` - -You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md deleted file mode 100644 index edb8b48f294212..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 619d204bd73ae51e743b8e94 -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`. - -# --hints-- - -You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%'); -``` - -You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - ---fcc-editable-region-- -.foot { - width: 15%; - height: 30%; - background-color: orange; - -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md deleted file mode 100644 index 335dce1653d1fa..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 619d20b12996101f430920fb -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -The penguin's beak and feet share the same `color`. - -Create a new custom CSS variable named `--penguin-picorna`, and replace all relavant property values with it. - -# --hints-- - -You should give `:root` a `--penguin-picorna` property. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna')); -``` - -You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange'); -``` - -You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)'); -``` - -You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
- -
- - -``` - -```css ---fcc-editable-region-- -:root { - --penguin-face: white; - -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: orange; - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.foot { - width: 15%; - height: 30%; - background-color: orange; - top: 85%; - border-radius: 50%; -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md deleted file mode 100644 index 29d32498e93c92..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 619d21fe6a3f9b2016be9d9d -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent. - -# --hints-- - -You should use the `.foot.left` selector. - -```js -assert.match(code, /\.foot\.left\s*\{/); -``` - -You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%'); -``` - -You should use the `.foot.right` selector. - -```js -assert.match(code, /\.foot\.right\s*\{/); -``` - -You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - ---fcc-editable-region-- -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; -} - - ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md deleted file mode 100644 index d59ff7896fb097..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 619d229b0e542520cd91c685 -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`. - -# --hints-- - -You should give `.foot.left` a `transform` of `rotate(80deg)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left').getPropVal('transform', true), 'rotate(80deg)'); -``` - -You should give `.foot.right` a `transform` of `rotate(-80deg)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right').getPropVal('transform', true), 'rotate(-80deg)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; -} - ---fcc-editable-region-- -.foot.left { - left: 25%; - -} - -.foot.right { - right: 25%; - -} ---fcc-editable-region-- - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md deleted file mode 100644 index 5763e8de58cce0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 619d23089e787e216a7043d6 -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element. - -# --hints-- - -You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - ---fcc-editable-region-- -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - -} ---fcc-editable-region-- - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md deleted file mode 100644 index 4f6286196ecfb9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 619d237a107c10221ed743fa -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Fun fact: Penguins cannot fly without wings. - -Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`. - -# --hints-- - -You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. - -```js -assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4); -``` - -You should give the first new `div` a `class` of `arm`. - -```js -assert.exists(document.querySelector('.penguin-body > div.arm')); -``` - -You should give the second new `div` a `class` of `arm`. - -```js -assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2); -``` - -You should give one `div` a `class` of `left`. - -```js -assert.exists(document.querySelector('.penguin-body > div.arm.left')); -``` - -You should give the other `div` a `class` of `right`. - -```js -assert.exists(document.querySelector('.penguin-body > div.arm.right')); -``` - -You should place `.arm.right` after `.arm.left`. - -```js -assert.exists(document.querySelector('.arm.left + .arm.right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
---fcc-editable-region-- -
- -
-
-
---fcc-editable-region-- -
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md deleted file mode 100644 index 99562c1c8d7892..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 619d26b12e651022d80cd017 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`. - -# --hints-- - -You should use the `.arm` selector. - -```js -assert.match(code, /\.arm\s*\{/); -``` - -You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%'); -``` - -You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%'); -``` - -You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`. - -```js -assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md deleted file mode 100644 index 315b0d7513dc66..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md +++ /dev/null @@ -1,332 +0,0 @@ ---- -id: 619d2712853306238f41828e -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it. - -# --hints-- - -You should give `:root` a `--penguin-skin` property. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin')); -``` - -You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray'); -``` - -You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))'); -``` - -You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)'); -``` - -You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css ---fcc-editable-region-- -:root { - --penguin-face: white; - --penguin-picorna: orange; - -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - gray, - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: gray; - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - gray, - rgb(209, 210, 199) - ); -} ---fcc-editable-region-- - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md deleted file mode 100644 index 2840399f95e122..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md +++ /dev/null @@ -1,340 +0,0 @@ ---- -id: 619d2b7a84e78b246f2d17a2 -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent. - -# --hints-- - -You should use the `.arm.left` selector. - -```js -assert.match(code, /\.arm\.left\s*\{/); -``` - -You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%'); -``` - -You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%'); -``` - -You should use the `.arm.right` selector. - -```js -assert.match(code, /\.arm\.right\s*\{/); -``` - -You should give `.arm.right` a `top` of `0%`. - -```js -assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top); -``` - -You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md deleted file mode 100644 index 4ae53bfc82548c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 619d2bd9c1d43c2526e96f1f -title: Step 90 -challengeType: 0 -dashedName: step-90 ---- - -# --description-- - -Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent. - -# --hints-- - -You should use the `transform-origin` property to do this. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin); -``` - -You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`. - -```js -assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); -} - ---fcc-editable-region-- -.arm.left { - top: 35%; - left: 5%; - -} - -.arm.right { - top: 0%; - right: -5%; -} ---fcc-editable-region-- - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md deleted file mode 100644 index 6d3798cdc6ab4e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 619d2d4e80400325ff89664a -title: Step 91 -challengeType: 0 -dashedName: step-91 ---- - -# --description-- - -To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis. - -# --hints-- - -You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left').getPropVal('transform', true), 'rotate(130deg)scaleX(-1)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); -} - ---fcc-editable-region-- -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - -} ---fcc-editable-region-- - -.arm.right { - top: 0%; - right: -5%; -} - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md deleted file mode 100644 index 19fcd75107784d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 619d2ebc81ba81271460850d -title: Step 92 -challengeType: 0 -dashedName: step-92 ---- - -# --description-- - -Rotate the right arm by `45deg` counterclockwise. - -# --hints-- - -You should give `.arm.right` a `transform` of `rotate(-45deg)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.getPropVal('transform', true), 'rotate(-45deg)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); -} - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); -} - ---fcc-editable-region-- -.arm.right { - top: 0%; - right: -5%; - -} ---fcc-editable-region-- - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md deleted file mode 100644 index ca92f31fc58829..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 619d2f0e9440bc27caee1cec -title: Step 93 -challengeType: 0 -dashedName: step-93 ---- - -# --description-- - -Fun fact: Most, if not all, flippers are not naturally rectangles. - -Give the `.arm` elements top -left, -right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`. - -# --hints-- - -You should give `.arm` a `border-radius` of `30% 30% 30% 120%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - ---fcc-editable-region-- -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - -} ---fcc-editable-region-- - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); -} - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md deleted file mode 100644 index e27421a66b80fb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 619d2fd3ff4f772882e3d998 -title: Step 94 -challengeType: 0 -dashedName: step-94 ---- - -# --description-- - -Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element. - -# --hints-- - -You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - ---fcc-editable-region-- -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - border-radius: 30% 30% 30% 120%; - -} ---fcc-editable-region-- - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); -} - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md deleted file mode 100644 index 249dd1cdaf6a25..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md +++ /dev/null @@ -1,333 +0,0 @@ ---- -id: 619d30350883802921bfcccc -title: Step 95 -challengeType: 0 -dashedName: step-95 ---- - -# --description-- - -Now, you are going to use CSS animations to make the penguin wave. - -Define a new `@keyframes` named `wave`. - -# --hints-- - -You should defined a new `@keyframes` rule. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes')); -``` - -You should give the `@keyframes` rule a `name` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - border-radius: 30% 30% 30% 120%; - z-index: -1; -} - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); -} - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md deleted file mode 100644 index 4a7cb3eaafdca2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 619d324f5915c929f36ae91d -title: Step 96 -challengeType: 0 -dashedName: step-96 ---- - -# --description-- - -Give `wave` four waypoints starting at `10%`, and incrementing by `10%`. - -# --hints-- - -You should add a `10%` waypoint for `@keyframes wave`. - -```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%')); -``` - -You should add a `20%` waypoint for `@keyframes wave`. - -```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%')); -``` - -You should add a `30%` waypoint for `@keyframes wave`. - -```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%')); -``` - -You should add a `40%` waypoint for `@keyframes wave`. - -```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - border-radius: 30% 30% 30% 120%; - z-index: -1; -} - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); -} - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - ---fcc-editable-region-- -@keyframes wave { - -} ---fcc-editable-region-- - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md deleted file mode 100644 index 1f054655a14e08..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md +++ /dev/null @@ -1,338 +0,0 @@ ---- -id: 619d32c7fa21f32aaa91d499 -title: Step 97 -challengeType: 0 -dashedName: step-97 ---- - -# --description-- - -Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm. - -# --hints-- - -You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`. - -```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - border-radius: 30% 30% 30% 120%; - z-index: -1; -} - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); -} - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - ---fcc-editable-region-- -@keyframes wave { - 10% { - - } - 20% { - - } - 30% { - - } - 40% { - - } -} ---fcc-editable-region-- - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md deleted file mode 100644 index d223c82b41d9a7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md +++ /dev/null @@ -1,338 +0,0 @@ ---- -id: 619d333b738e3c2b5d58b095 -title: Step 98 -challengeType: 0 -dashedName: step-98 ---- - -# --description-- - -Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm. - -# --hints-- - -You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`. - -```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - border-radius: 30% 30% 30% 120%; - z-index: -1; -} - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); -} - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - ---fcc-editable-region-- -@keyframes wave { - 10% { - transform: rotate(110deg) scaleX(-1); - } - 20% { - - } - 30% { - - } - 40% { - - } -} ---fcc-editable-region-- - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md deleted file mode 100644 index 4345f7fd79dd06..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md +++ /dev/null @@ -1,344 +0,0 @@ ---- -id: 619d337765b9f02c10e93722 -title: Step 99 -challengeType: 0 -dashedName: step-99 ---- - -# --description-- - -For the third and fourth waypoints, repeat the `transform` pattern once more. - -# --hints-- - -You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`. - -```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)'); -``` - -You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`. - -```js -assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - border-radius: 30% 30% 30% 120%; - z-index: -1; -} - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); -} - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - ---fcc-editable-region-- -@keyframes wave { - 10% { - transform: rotate(110deg) scaleX(-1); - } - 20% { - transform: rotate(130deg) scaleX(-1); - } - 30% { - - } - 40% { - - } -} ---fcc-editable-region-- - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md deleted file mode 100644 index 93b669377dfdb7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 619d33c51140292cc5a21742 -title: Step 100 -challengeType: 0 -dashedName: step-100 ---- - -# --description-- - -Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function. - -# --hints-- - -You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave'); -``` - -You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s'); -``` - -You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite'); -``` - -You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - border-radius: 30% 30% 30% 120%; - z-index: -1; -} - ---fcc-editable-region-- -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); - -} ---fcc-editable-region-- - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - -@keyframes wave { - 10% { - transform: rotate(110deg) scaleX(-1); - } - 20% { - transform: rotate(130deg) scaleX(-1); - } - 30% { - transform: rotate(110deg) scaleX(-1); - } - 40% { - transform: rotate(130deg) scaleX(-1); - } -} - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md deleted file mode 100644 index eca10ffaa32f6a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 619d3482f505452d861d0f62 -title: Step 101 -challengeType: 0 -dashedName: step-101 ---- - -# --description-- - -Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions. - -# --hints-- - -You should use the `.penguin:active` selector. - -```js -assert.match(code, /\.penguin:active\s*\{/); -``` - -You should give `.penguin:active` a `transform` of `scale(1.5)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - border-radius: 30% 30% 30% 120%; - z-index: -1; -} - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); - animation: 3s linear infinite wave; -} - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - -@keyframes wave { - 10% { - transform: rotate(110deg) scaleX(-1); - } - 20% { - transform: rotate(130deg) scaleX(-1); - } - 30% { - transform: rotate(110deg) scaleX(-1); - } - 40% { - transform: rotate(130deg) scaleX(-1); - } -} - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md deleted file mode 100644 index 960ef561d17893..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md +++ /dev/null @@ -1,346 +0,0 @@ ---- -id: 619d3561a951bf2e41a24f10 -title: Step 102 -challengeType: 0 -dashedName: step-102 ---- - -# --description-- - -When you activate the `.penguin` element, it might look as though you can drag it around. This is not true. - -Indicate this to users, by giving the active element a `cursor` property of `not-allowed`. - -# --hints-- - -You should give `.penguin:active` a `cursor` property of `not-allowed`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; -} - -.penguin * { - position: absolute; -} - ---fcc-editable-region-- -.penguin:active { - transform: scale(1.5); - -} ---fcc-editable-region-- - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - border-radius: 30% 30% 30% 120%; - z-index: -1; -} - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); - animation: 3s linear infinite wave; -} - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - -@keyframes wave { - 10% { - transform: rotate(110deg) scaleX(-1); - } - 20% { - transform: rotate(130deg) scaleX(-1); - } - 30% { - transform: rotate(110deg) scaleX(-1); - } - 40% { - transform: rotate(130deg) scaleX(-1); - } -} - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md deleted file mode 100644 index ce80ba31e554bc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 619d36103839c82efa95dd34 -title: Step 103 -challengeType: 0 -dashedName: step-103 ---- - -# --description-- - -Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`. - -# --hints-- - -You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s'); -``` - -You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out'); -``` - -You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - ---fcc-editable-region-- -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; - -} ---fcc-editable-region-- - -.penguin * { - position: absolute; -} - -.penguin:active { - transform: scale(1.5); - cursor: not-allowed; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - border-radius: 30% 30% 30% 120%; - z-index: -1; -} - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); - animation: 3s linear infinite wave; -} - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - -@keyframes wave { - 10% { - transform: rotate(110deg) scaleX(-1); - } - 20% { - transform: rotate(130deg) scaleX(-1); - } - 30% { - transform: rotate(110deg) scaleX(-1); - } - 40% { - transform: rotate(130deg) scaleX(-1); - } -} - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md deleted file mode 100644 index 1fdd036d7e0576..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md +++ /dev/null @@ -1,670 +0,0 @@ ---- -id: 619d3711d04d623000013e9e -title: Step 104 -challengeType: 0 -dashedName: step-104 ---- - -# --description-- - -Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element. - -Congratulations! You have completed the Responsive Web Design certification. - -# --hints-- - -You should give `.ground` a `height` of `calc(100vh - 300px)`. - -```js -assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; - transition: transform 1s ease-in-out 0ms; -} - -.penguin * { - position: absolute; -} - -.penguin:active { - transform: scale(1.5); - cursor: not-allowed; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - border-radius: 30% 30% 30% 120%; - z-index: -1; -} - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); - animation: 3s linear infinite wave; -} - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - -@keyframes wave { - 10% { - transform: rotate(110deg) scaleX(-1); - } - 20% { - transform: rotate(130deg) scaleX(-1); - } - 30% { - transform: rotate(110deg) scaleX(-1); - } - 40% { - transform: rotate(130deg) scaleX(-1); - } -} - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - ---fcc-editable-region-- -.ground { - width: 100vw; - height: 400px; - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - Penguin - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
💜
-

I CSS

-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --penguin-face: white; - --penguin-picorna: orange; - --penguin-skin: gray; -} - -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - overflow: clip; -} - -.left-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); - position: absolute; - transform: skew(0deg, 44deg); - z-index: 2; - margin-top: 100px; -} - -.back-mountain { - width: 300px; - height: 300px; - background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); - position: absolute; - z-index: 1; - transform: rotate(45deg); - left: 110px; - top: 225px; -} - -.sun { - width: 200px; - height: 200px; - background-color: yellow; - position: absolute; - border-radius: 50%; - top: -75px; - right: -75px; -} - -.penguin { - width: 300px; - height: 300px; - margin: auto; - margin-top: 75px; - z-index: 4; - position: relative; - transition: transform 1s ease-in-out 0ms; -} - -.penguin * { - position: absolute; -} - -.penguin:active { - transform: scale(1.5); - cursor: not-allowed; -} - -.penguin-head { - width: 50%; - height: 45%; - background: linear-gradient( - 45deg, - var(--penguin-skin), - rgb(239, 240, 228) - ); - border-radius: 70% 70% 65% 65%; - top: 10%; - left: 25%; - z-index: 1; -} - -.face { - width: 60%; - height: 70%; - background-color: var(--penguin-face); - border-radius: 70% 70% 60% 60%; - top: 15%; -} - -.face.left { - left: 5%; -} - -.face.right { - right: 5%; -} - -.chin { - width: 90%; - height: 70%; - background-color: var(--penguin-face); - top: 25%; - left: 5%; - border-radius: 70% 70% 100% 100%; -} - -.eye { - width: 15%; - height: 17%; - background-color: black; - top: 45%; - border-radius: 50%; -} - -.eye.left { - left: 25%; -} - -.eye.right { - right: 25%; -} - -.eye-lid { - width: 150%; - height: 100%; - background-color: var(--penguin-face); - top: 25%; - left: -23%; - border-radius: 50%; -} - -.blush { - width: 15%; - height: 10%; - background-color: pink; - top: 65%; - border-radius: 50%; -} - -.blush.left { - left: 15%; -} - -.blush.right { - right: 15%; -} - -.beak { - height: 10%; - background-color: var(--penguin-picorna); - border-radius: 50%; -} - -.beak.top { - width: 20%; - top: 60%; - left: 40%; -} - -.beak.bottom { - width: 16%; - top: 65%; - left: 42%; -} - -.shirt { - font: bold 25px Helvetica, sans-serif; - top: 165px; - left: 127.5px; - z-index: 1; - color: #6a6969; -} - -.shirt div { - font-weight: initial; - top: 22.5px; - left: 12px; -} - -.penguin-body { - width: 53%; - height: 45%; - background: linear-gradient( - 45deg, - rgb(134, 133, 133) 0%, - rgb(234, 231, 231) 25%, - white 67% - ); - border-radius: 80% 80% 100% 100%; - top: 40%; - left: 23.5%; -} - -.penguin-body::before { - content: ""; - position: absolute; - width: 50%; - height: 45%; - background-color: var(--penguin-skin); - top: 10%; - left: 25%; - border-radius: 0% 0% 100% 100%; - opacity: 70%; -} - -.arm { - width: 30%; - height: 60%; - background: linear-gradient( - 90deg, - var(--penguin-skin), - rgb(209, 210, 199) - ); - border-radius: 30% 30% 30% 120%; - z-index: -1; -} - -.arm.left { - top: 35%; - left: 5%; - transform-origin: top left; - transform: rotate(130deg) scaleX(-1); - animation: 3s linear infinite wave; -} - -.arm.right { - top: 0%; - right: -5%; - transform: rotate(-45deg); -} - -@keyframes wave { - 10% { - transform: rotate(110deg) scaleX(-1); - } - 20% { - transform: rotate(130deg) scaleX(-1); - } - 30% { - transform: rotate(110deg) scaleX(-1); - } - 40% { - transform: rotate(130deg) scaleX(-1); - } -} - -.foot { - width: 15%; - height: 30%; - background-color: var(--penguin-picorna); - top: 85%; - border-radius: 50%; - z-index: -1; -} - -.foot.left { - left: 25%; - transform: rotate(80deg); -} - -.foot.right { - right: 25%; - transform: rotate(-80deg); -} - -.ground { - width: 100vw; - height: calc(100vh - 300px); - background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); - z-index: 3; - position: absolute; - margin-top: -58px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md deleted file mode 100644 index 6aa9fd8f8879b6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 61a8fe15a6a31306e60d1e89 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Normalise your page, by setting the `width` to `100%`, and `height` to `100vh`. - -# --hints-- - -You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%'); -``` - -You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - Penguin - - - - - - -``` - -```css ---fcc-editable-region-- -body { - background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); - margin: 0; - padding: 0; - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md deleted file mode 100644 index 0dfd8acd66a666..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5d822fd413a79914d39e98c9 -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Welcome to the CSS Variables Skyline project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(/html\s*>/gi)); -``` - -Your `DOCTYPE` declaration should be at the beginning of your HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md deleted file mode 100644 index 3a3b1cce4778ac..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ca -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code. - -# --hints-- - -Your `DOCTYPE` declaration should be at the beginning of your HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -Your `html` element should have an opening tag. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Your `html` tags should be in the correct order. - -```js -assert(code.match(/\s*<\/html\s*>/)); -``` - -You should only have one `html` element. - -```js -assert(document.querySelectorAll('html').length === 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md deleted file mode 100644 index c875ecf77c1fd6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 5d822fd413a79914d39e98cb -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Next, add opening and closing `head` and `body` tags within the `html` element. - -# --hints-- - -You should have an opening `head` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `head` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `body` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `body` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -The `head` and `body` elements should be siblings. - -```js -assert(document.querySelector('head').nextElementSibling.localName === 'body'); -``` - -The `head` element should be within the `html` element. - -```js -assert([...document.querySelector('html').children].some(x => x.localName === 'head')); -``` - -The `body` element should be within the `html` element. - -```js -assert([...document.querySelector('html').children].some(x => x.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - - - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md deleted file mode 100644 index f310a12cb775ba..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5d822fd413a79914d39e98cc -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Add a `title` element to the `head`, and give your project a title of `City Skyline`. Also, nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value of `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. - -# --hints-- - -Your code should have a `title` element. - -```js -const title = document.querySelector('title'); -assert.exists(title); -``` - -The `title` element should be within the `head` element. - -```js -assert.exists(document.querySelector('head > title')); -``` - -Your project should have a title of `City Skyline`. - -```js -const title = document.querySelector('title'); -assert.equal(title.text.toLowerCase(), 'city skyline') -``` - -Remember, the casing and spelling matters for the title. - -```js -const title = document.querySelector('title'); -assert.equal(title.text, 'City Skyline'); -``` - -Your code should have a `link` element. - -```js -assert.match(code, //i)); -``` - -Your `link` element should be within your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert.match(code, / - ---fcc-editable-region-- - - - ---fcc-editable-region-- - - - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md deleted file mode 100644 index 61f822ea8ceefb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5d822fd413a79914d39e98cd -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick I like to use to help visualize where elements are and their size. You will remove this later. - -# --hints-- - -You should use the `*` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); -``` - -You should use the `border` property to style all the elements. - -```js -assert(new __helpers.CSSHelp(document).isPropertyUsed('border')); -``` - -All elements should have a `1px solid black` border. - -```js -const astStyles = new __helpers.CSSHelp(document).getStyle('*'); -assert.equal(astStyles?.border, '1px solid black'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - - - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md deleted file mode 100644 index 371dcf1110f210..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ce -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements. - -# --hints-- - -You should use the `box-sizing` property. - -```js -assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing')); -``` - -You should make use of the existing `*` selector. - -```js -// Two selectors create two CSSStyleRule objects -assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1); -``` - -All elements should have a `box-sizing` of `border-box`. - -```js -const astStyles = new __helpers.CSSHelp(document).getStyle('*'); -assert.equal(astStyles.boxSizing, 'border-box'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - - - -``` - -```css ---fcc-editable-region-- -* { - border: 1px solid black; -} - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md deleted file mode 100644 index 10675b01898693..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 5d822fd413a79914d39e98cf -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport. - -# --hints-- - -You should use the `body` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); -``` - -Your `body` should have a `height` of `100vh`. - -```js -const bodyStyles = new __helpers.CSSHelp(document).getStyle('body'); -assert.equal(bodyStyles?.height, '100vh'); -``` - -Your `body` should have a `margin` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); -``` - -Your `body` should have the `overflow` property set to `hidden`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - - - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - ---fcc-editable-region-- - - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md deleted file mode 100644 index b33ef81115dfa7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d0 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -It's tough to see now, but there's a border at the edge of your preview, that's the `body`. Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings. - -# --hints-- - -You should create a `div` element. - -```js -assert.exists(document.querySelector('div')); -``` - -Your `div` element should be within the `body`. - -```js -assert(document.querySelector('div')?.parentElement?.localName === 'body'); -``` - -Your `div` element should have a class of `background-buildings` - -```js -assert([...document.querySelector('div')?.classList]?.includes('background-buildings')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - ---fcc-editable-region-- - - - ---fcc-editable-region-- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md deleted file mode 100644 index f70e88dc6587a5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d1 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Give your background buildings element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`. - -# --hints-- - -You should use the `background-buildings` class to select the correct element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings')); -``` - -Your `.background-buildings` element should have a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%'); -``` - -Your `.background-buildings` element should have a `height` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} ---fcc-editable-region-- - - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md deleted file mode 100644 index dc9b865a83d76f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d2 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Nest a `div` with a class of `bb1` in the background buildings container. Open your `styles.css` file, and give `.bb1` a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building. - -# --hints-- - -You should create a new `div` element. - -```js -assert.equal(document.querySelectorAll('div').length, 2); -``` - -You should give the new `div` a class of `bb1`. - -```js -assert.exists(document.querySelector('div.bb1')); -``` - -You should use a `.bb1` class selector to style the element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')); -``` - -You should give the `.bb1` element a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%'); -``` - -You should give the `.bb1` element a `height` of `70%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - ---fcc-editable-region-- -
---fcc-editable-region-- - - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md deleted file mode 100644 index c2e2b83a7f89a6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d3 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections. - -# --hints-- - -You should create four new `div` elements. - -```js -assert.equal(document.querySelectorAll('div')?.length, 6); -``` - -You should give one of the new `div` elements a class of `bb1a`. - -```js -assert.exists(document.querySelector('div.bb1a')); -``` - -You should give one of the new `div` elements a class of `bb1b`. - -```js -assert.exists(document.querySelector('div.bb1b')); -``` - -You should give one of the new `div` elements a class of `bb1c`. - -```js -assert.exists(document.querySelector('div.bb1c')); -``` - -You should give one of the new `div` elements a class of `bb1d`. - -```js -assert.exists(document.querySelector('div.bb1d')); -``` - -You should place the new `div` elements in the correct order. - -```js -function __t(a, b) { - return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); -} -assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d')); -``` - -You should place the new `div` elements within the `.bb1` element. - -```js -assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
---fcc-editable-region-- -
---fcc-editable-region-- -
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md deleted file mode 100644 index de7293e6b27ece..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d4 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container. - -# --hints-- - -You should use a class selector to style `.bb1a`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')); -``` - -You should give `.bb1a` a `width` of `70%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%'); -``` - -You should give `.bb1a` a `height` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%'); -``` - -You should use a class selector to style `.bb1b`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')); -``` - -You should give `.bb1b` a `width` of `80%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%'); -``` - -You should give `.bb1b` a `height` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%'); -``` - -You should use a class selector to style `.bb1c`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')); -``` - -You should give `.bb1c` a `width` of `90%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%'); -``` - -You should give `.bb1c` a `height` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%'); -``` - -You should use a class selector to style `.bb1d`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')); -``` - -You should give `.bb1d` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%'); -``` - -You should give `.bb1d` a `height` of `70%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; -} ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md deleted file mode 100644 index 20c34309017622..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d5 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Give your `.bb1` element these style properties: `display: flex;`, `flex-direction: column;`, and `align-items: center;`. This will center the parts of the building using "flex" or "flexbox". You will learn about it in more detail on another project. - -# --hints-- - -You should not change the `.bb1` `width` or `height` properties. - -```js -const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); -assert.equal(bb1Style?.width, '10%'); -assert.equal(bb1Style?.height, '70%'); -``` - -You should give the `.bb1` element a `display` of `flex`. - -```js -const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); -assert.equal(bb1Style?.display, 'flex'); -``` - -You should give the `.bb1` element a `flex-direction` of `column`. - -```js -const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); -assert.equal(bb1Style?.flexDirection, 'column'); -``` - -You should give the `.bb1` element a `align-items` of `center`. - -```js -const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); -assert.equal(bb1Style?.alignItems, 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} ---fcc-editable-region-- -.bb1 { - width: 10%; - height: 70%; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - height: 10%; -} - -.bb1b { - width: 80%; - height: 10%; -} - -.bb1c { - width: 90%; - height: 10%; -} - -.bb1d { - width: 100%; - height: 70%; -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md deleted file mode 100644 index 73e7b1e587d289..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d6 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Now you have something that is starting to resemble a building. Let's get into your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the `.bb1` class, create a variable named `--building-color1` and give it a value of `#999`. - -# --hints-- - -You should create a new variable named `--building-color1`. - -```js -assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1')); -``` - -You should define the `--building-color1` variable within `.bb1`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); -``` - -You should give `--building-color1` a value of `#999`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} ---fcc-editable-region-- -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - height: 10%; -} - -.bb1b { - width: 80%; - height: 10%; -} - -.bb1c { - width: 90%; - height: 10%; -} - -.bb1d { - width: 100%; - height: 70%; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md deleted file mode 100644 index bf07db2deab0bd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d7 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Add your variable as the value of the `background-color` property of the `.bb1a` class. Whatever value you gave the variable will be applied to whatever property you use it on. In this case, your variable has the value of `#999`. So `#999` will be used as the value for the `background-color` property. - -# --hints-- - -The `background-color` of the `bb1a` element should be set. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor) -``` - -You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor.trim(), 'var(--building-color1)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #999; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - height: 10%; -} ---fcc-editable-region-- -.bb1b { - width: 80%; - height: 10%; -} - -.bb1c { - width: 90%; - height: 10%; -} - -.bb1d { - width: 100%; - height: 70%; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md deleted file mode 100644 index 5ef9b78353c018..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d8 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building. - -# --hints-- - -The `background-color` of the `bb1b` element should be set. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor) -``` - -You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor.trim(), 'var(--building-color1)'); -``` - -The `background-color` of the `bb1c` element should be set. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor) -``` - -You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor.trim(), 'var(--building-color1)'); -``` - -The `background-color` of the `bb1d` element should be set. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor) -``` - -You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor.trim(), 'var(--building-color1)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #999; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.bb1b { - width: 80%; - height: 10%; -} - -.bb1c { - width: 90%; - height: 10%; -} - -.bb1d { - width: 100%; - height: 70%; -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md deleted file mode 100644 index 84c2a2384fbdc7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d9 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -I don't really like that color. Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable. - -# --hints-- - -You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; ---fcc-editable-region-- - --building-color1: #999; ---fcc-editable-region-- -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md deleted file mode 100644 index 812e3458953c01..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -id: 5d822fd413a79914d39e98da -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Your first building looks pretty good now. Let's make some more! Nest three new `div` elements in the `background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background. - -# --hints-- - -You should create a `div` with a class of `bb2`. - -```js -assert.exists(document.querySelector('div.bb2')); -``` - -You should create a `div` with a class of `bb3`. - -```js -assert.exists(document.querySelector('div.bb3')); -``` - -You should create a `div` with a class of `bb4`. - -```js -assert.exists(document.querySelector('div.bb4')); -``` - -You should create 3 new `div` elements. - -```js -assert.equal(document.querySelectorAll('div')?.length, 9); -``` - -You should place these `div` elements within the `.background-buildings` element. - -```js -assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4); -``` - -You should place the elements in the correct order. - -```js -function __t(a, b) { - return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); -} -assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md deleted file mode 100644 index fcaaf5c77cf39d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -id: 5d822fd413a79914d39e98db -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive. - -# --hints-- - -You should give `.bb2` a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%'); -``` - -You should give `.bb2` a `height` of `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%'); -``` - -You should give `.bb3` a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%'); -``` - -You should give `.bb3` a `height` of `55%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%'); -``` - -You should give `.bb4` a `width` of `11%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%'); -``` - -You should give `.bb4` a `height` of `58%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md deleted file mode 100644 index 6cf5ab76d2b8f8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 5d822fd413a79914d39e98dc -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -The buildings are stacked on top of each other and running off the screen. Let's fix that. Add the properties `display: flex;`, `align-items: flex-end;`, and `justify-content: space-evenly;` to the `background-buildings` class. This will use flexbox again to evenly space the buildings across the bottom of the element. - -# --hints-- - -You should add a `display` of `flex` to the `background-buildings` class. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex'); -``` - -You should add an `align-items` of `flex-end` to the `background-buildings` class. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end'); -``` - -You should add a `justify-content` of `space-evenly` to the `background-buildings` class. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} ---fcc-editable-region-- -.background-buildings { - width: 100%; - height: 100%; -} ---fcc-editable-region-- -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb3 { - width: 10%; - height: 55%; -} - -.bb4 { - width: 11%; - height: 58%; -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md deleted file mode 100644 index 4576a529b40e81..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5d822fd413a79914d39e98dd -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -I don't like how spaced out the buildings are. Squeeze them together by adding two empty `div` elements to the top of the `background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center. - -# --hints-- - -You should add two new `div` elements before the `.bb1` element. - -```js -const bBuildings = document.querySelector('.background-buildings')?.children; -assert(![...bBuildings?.[0]?.classList]?.includes('bb1')); -assert(![...bBuildings?.[1]?.classList]?.includes('bb1')); -``` - -You should add one new `div` element between the `.bb3` and `.bb4` element. - -```js -assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling); -``` - -You should add two new `div` elements after the `.bb4` element. - -```js -const bb4 = document.querySelector('.bb4'); -assert.exists(bb4?.nextElementSibling); -assert.exists(bb4?.nextElementSibling?.nextElementSibling); -``` - -You should add 5 new `div` elements. - -```js -assert.equal(document.querySelectorAll('div')?.length, 14); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - ---fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- - - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb3 { - width: 10%; - height: 55%; -} - -.bb4 { - width: 11%; - height: 58%; -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md deleted file mode 100644 index 9301ed8f9a3cef..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d822fd413a79914d39e98de -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Create a new variable below the other one called `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`. - -# --hints-- - -You should define a new property variable called `--building-color2`. - -```js -assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2')); -``` - -You should give `--building-color2` a value of `#66cc99`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99'); -``` - -You should set the `background-color` of `.bb2`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor); -``` - -You should set the `background-color` using the `--building-color2` variable. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} ---fcc-editable-region-- -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; -} ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; -} - -.bb4 { - width: 11%; - height: 58%; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md deleted file mode 100644 index 7aadac56f07001..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5d822fd413a79914d39e98df -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Hmm, I'm not sure why that didn't work. You can add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`. - -# --hints-- - -You should add a fallback value of `green` to the `background-color` property. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2, green)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; - --building-color2: #66cc99; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; -} - -.bb4 { - width: 11%; - height: 58%; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md deleted file mode 100644 index a3b2cdcc43cb8c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e0 -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Create a new variable below the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`. - -# --hints-- - -You should define a new property variable called `--building-color3`. - -```js -assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3')); -``` - -You should give `--building-color3` a value of `#cc6699`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); -``` - -You should set the `background-color` of `.bb3`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor); -``` - -You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3, pink)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} ---fcc-editable-region-- -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; - --building-color2: #66cc99; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2, green); -} - -.bb3 { - width: 10%; - height: 55%; -} ---fcc-editable-region-- -.bb4 { - width: 11%; - height: 58%; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md deleted file mode 100644 index 37db333f206c86..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e1 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -That one used the fallback value as well? I see the problem now! The variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there. - -# --hints-- - -You should declare a `:root` selector at the top of the stylesheet. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle(':root')); -``` - -You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff'); -``` - -You should define `--building-color2` with a value of `#66cc99` in the `:root` selector. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99'); -``` - -You should define `--building-color3` with a value of `#cc6699` in the `:root` selector. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); -``` - -You should remove the custom property variables from `.bb1`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2')); -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2, green); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3, pink); -} - -.bb4 { - width: 11%; - height: 58%; -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md deleted file mode 100644 index 7fdf4d2af74202..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e2 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now. - -# --hints-- - -You should remove the fallback in the `background-color` from `.bb2`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor, 'var(--building-color2)'); -``` - -You should remove the fallback in the `background-color` from `.bb3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2, green); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3, pink); -} ---fcc-editable-region-- -.bb4 { - width: 11%; - height: 58%; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md deleted file mode 100644 index 9c1e53d79ad5b6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e3 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building. - -# --hints-- - -You should define a new property variable called `--building-color4`. - -```js -assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4')); -``` - -You should give `--building-color4` a value of `#538cc6` in the `:root` selector. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; -} ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md deleted file mode 100644 index ed5a7a7d195020..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e4 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -The background buildings are starting to look pretty good. Create a new `div` below the `background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings. - -# --hints-- - -You should create a new `div` element. - -```js -assert.equal(document.querySelectorAll('div')?.length, 15); -``` - -The new `div` should come after the `div.background-buildings` element. - -```js -assert.exists(document.querySelector('div.background-buildings + div')); -``` - -Your new `div` should have a class of `foreground-buildings`. - -```js -assert.exists(document.querySelector('div.foreground-buildings')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- - ---fcc-editable-region-- - - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md deleted file mode 100644 index b745a8657b0262..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e5 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -You want the foreground buildings container to sit directly on top of the background buildings element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner. - -# --hints-- - -You should use a `.foreground-buildings` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); -``` - -You should give the `.foreground-buildings` element a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%'); -``` - -You should give the `.foreground-buildings` element a `height` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%'); -``` - -You should give the `.foreground-buildings` element a `position` of `absolute`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute'); -``` - -You should give the `.foreground-buildings` element a `top` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md deleted file mode 100644 index 847b50f0840bee..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e6 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground. - -# --hints-- - -You should create a new `div` with a class of `fb1`. - -```js -assert.exists(document.querySelector('div.fb1')); -``` - -You should create a new `div` with a class of `fb2`. - -```js -assert.exists(document.querySelector('div.fb2')); -``` - -You should create a new `div` with a class of `fb3`. - -```js -assert.exists(document.querySelector('div.fb3')); -``` - -You should create a new `div` with a class of `fb4`. - -```js -assert.exists(document.querySelector('div.fb4')); -``` - -You should create a new `div` with a class of `fb5`. - -```js -assert.exists(document.querySelector('div.fb5')); -``` - -You should create a new `div` with a class of `fb6`. - -```js -assert.exists(document.querySelector('div.fb6')); -``` - -You should place these new `div` elements within the `.foreground-buildings` element. - -```js -assert.exists(document.querySelector('div.foreground-buildings > div.fb1')); -assert.exists(document.querySelector('div.foreground-buildings > div.fb2')); -assert.exists(document.querySelector('div.foreground-buildings > div.fb3')); -assert.exists(document.querySelector('div.foreground-buildings > div.fb4')); -assert.exists(document.querySelector('div.foreground-buildings > div.fb5')); -assert.exists(document.querySelector('div.foreground-buildings > div.fb6')); -``` - -You should place the new `div` elements in the correct order. - -```js -function __t(a, b) { - return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); -} -assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- - - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.foreground-buildings { - width: 100%; - height: 100%; - position: absolute; - top: 0; -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md deleted file mode 100644 index 145f1c7a6150a8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e7 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`. - -# --hints-- - -You should create a `.fb1` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1')); -``` - -You should give the `.fb1` selector a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%'); -``` - -You should give the `.fb1` selector a `height` of `60%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%'); -``` - -You should create a `.fb2` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2')); -``` - -You should give the `.fb2` selector a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%'); -``` - -You should give the `.fb2` selector a `height` of `40%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%'); -``` - -You should create a `.fb3` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3')); -``` - -You should give the `.fb3` selector a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%'); -``` - -You should give the `.fb3` selector a `height` of `35%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%'); -``` - -You should create a `.fb4` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4')); -``` - -You should give the `.fb4` selector a `width` of `8%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%'); -``` - -You should give the `.fb4` selector a `height` of `45%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%'); -``` - -You should create a `.fb5` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5')); -``` - -You should give the `.fb5` selector a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%'); -``` - -You should give the `.fb5` selector a `height` of `33%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%'); -``` - -You should create a `.fb6` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6')); -``` - -You should give the `.fb6` selector a `width` of `9%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%'); -``` - -You should give the `.fb6` selector a `height` of `38%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.foreground-buildings { - width: 100%; - height: 100%; - position: absolute; - top: 0; -} ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md deleted file mode 100644 index 9cfdde00c5485a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e8 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Add the same `display`, `align-items`, and `justify-content` properties and values to `foreground-buildings` that you used on `background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container. - -# --hints-- - -You should give `.foreground-buildings` a `display` property of `flex`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex'); -``` - -You should give `.foreground-buildings` an `align-items` property of `flex-end`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end'); -``` - -You should give `.foreground-buildings` a `justify-content` property of `space-evenly`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} ---fcc-editable-region-- -.foreground-buildings { - width: 100%; - height: 100%; - position: absolute; - top: 0; -} ---fcc-editable-region-- -.fb1 { - width: 10%; - height: 60%; -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb4 { - width: 8%; - height: 45%; -} - -.fb5 { - width: 10%; - height: 33%; -} - -.fb6 { - width: 9%; - height: 38%; -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md deleted file mode 100644 index 70ba517d4c5f04..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e9 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -I see some code that can be optimized. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`. - -# --hints-- - -You should not remove the `.foreground-buildings` declaration. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); -``` - -You should remove the `position` property from `.foreground-buildings`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position); -``` - -You should remove the `top` property from `.foreground-buildings`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top); -``` - -You should add the `position` property of `absolute` to `.background-buildings, foreground-buildings`. - -```js -function eitherOr() { - const a = new __helpers.CSSHelp(document) - return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); -} -assert.equal(eitherOr()?.position, 'absolute'); -``` - -You should add the `top` property of `0` to `.background-buildings, foreground-buildings`. - -```js -function eitherOr() { - const a = new __helpers.CSSHelp(document) - return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); -} -assert.equal(eitherOr()?.top, '0px'); -``` - -You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration. - -```js -function eitherOr() { - const a = new __helpers.CSSHelp(document) - return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); -} -assert.exists(eitherOr()); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} ---fcc-editable-region-- -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.foreground-buildings { - width: 100%; - height: 100%; - position: absolute; - top: 0; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} ---fcc-editable-region-- -.fb1 { - width: 10%; - height: 60%; -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb4 { - width: 8%; - height: 45%; -} - -.fb5 { - width: 10%; - height: 33%; -} - -.fb6 { - width: 9%; - height: 38%; -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md deleted file mode 100644 index 1d76ccace7c352..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ea -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore. - -# --hints-- - -You should delete the whole `.foreground-buildings` style declaration. - -```js -assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} ---fcc-editable-region-- -.foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} ---fcc-editable-region-- -.fb1 { - width: 10%; - height: 60%; -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb4 { - width: 8%; - height: 45%; -} - -.fb5 { - width: 10%; - height: 33%; -} - -.fb6 { - width: 9%; - height: 38%; -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md deleted file mode 100644 index 97c69b1e7df4f8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -id: 5d822fd413a79914d39e98eb -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`. - -# --hints-- - -You should give `.fb1` a `background-color` using `--building-color4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.backgroundColor.trim(), 'var(--building-color4)'); -``` - -You should give `.fb2` a `background-color` using `--building-color3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.backgroundColor, 'var(--building-color3)'); -``` - -You should give `.fb3` a `background-color` using `--building-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.backgroundColor, 'var(--building-color1)'); -``` - -You should give `.fb4` a `background-color` using `--building-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.backgroundColor, 'var(--building-color1)'); -``` - -You should give `.fb5` a `background-color` using `--building-color2`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.backgroundColor, 'var(--building-color2)'); -``` - -You should give `.fb6` a `background-color` using `--building-color3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.backgroundColor, 'var(--building-color3)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} ---fcc-editable-region-- -.fb1 { - width: 10%; - height: 60%; -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb4 { - width: 8%; - height: 45%; -} - -.fb5 { - width: 10%; - height: 33%; -} - -.fb6 { - width: 9%; - height: 38%; -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md deleted file mode 100644 index ceb2f3e1bf2194..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ec -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`. - -# --hints-- - -You should add two `div` elements as the first children of `.foreground-buildings`. - -```js -const bBuildings = document.querySelector('.background-buildings')?.children; -assert(![...bBuildings?.[0]?.classList]?.includes('fb1')); -assert(![...bBuildings?.[1]?.classList]?.includes('fb1')); -``` - -You should add one `div` element between `.fb2` and `.fb3`. - -```js -assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling); -``` - - -You should add two `div` elements as the last children of `.foreground-buildings`. - -```js -const fb6 = document.querySelector('.fb6'); -assert.exists(fb6?.nextElementSibling); -assert.exists(fb6?.nextElementSibling?.nextElementSibling); -``` - -You should have added 5 new `div` elements. - -```js -assert.equal(document.querySelectorAll('div')?.length, 26); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
-
---fcc-editable-region-- - - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md deleted file mode 100644 index e35ab54c3d16fd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ed -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings. - -# --hints-- - -You should give `.fb4` a `position` of `relative`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative'); -``` - -You should give `.fb4` a `left` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%'); -``` - -You should give `.fb5` a `position` of `relative`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative'); -``` - -You should give `.fb5` a `right` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md deleted file mode 100644 index 7ff1f3b563b315..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ee -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`. - -# --hints-- - -You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector. - -```js -assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code)); -``` - -You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector. - -```js -assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} ---fcc-editable-region-- - - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} ---fcc-editable-region-- -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md deleted file mode 100644 index 52bb47be7746ed..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md +++ /dev/null @@ -1,196 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ef -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings. - -# --hints-- - -You should create a new variable in `:root` called `--window-color1`. - -```js -assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1')); -``` - -You should give the property variable `--window-color1` a value of `black`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} ---fcc-editable-region-- -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md deleted file mode 100644 index 98ead5caa6096c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f0 -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this: - -```css -gradient-type( - color1, - color2 -); -``` - -In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a gradient of type `linear-gradient` to the `background` property with `--building-color1` as the first color and `--window-color1` as the second. - -# --hints-- - -You should apply a `background` to `.bb1a`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); -``` - -You should give the `background` a `linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient'); -``` - -You should give the `background` a `linear-gradient` starting from `--building-color1`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1'); -``` - -You should give the `background` a `linear-gradient` ending at `--window-color1`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md deleted file mode 100644 index cdd19b6b3c07bd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f1 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -You want to add the same gradient to the next two sections. Instead of doing that, create a new class called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class. - -# --hints-- - -You should create a new class declaration called `bb1-window`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window')); -``` - -You should move the `height` property and value from `.bb1a` to `.bb1-window`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height); -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%'); -``` - -You should move the `background` property and value from `.bb1a` to `.bb1-window`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); -``` - -You should not move the `background-color` property from `.bb1a`. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); -``` - -You should not move the `width` property from `.bb1a`. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - - ---fcc-editable-region-- -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md deleted file mode 100644 index fbbc1116eb48ae..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md +++ /dev/null @@ -1,236 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f2 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them. - -# --hints-- - -You should not remove the `bb1a` class. - -```js -assert.exists(document.querySelector('div.bb1a')); -``` - -You should add the `bb1-window` class to the `.bb1a` element. - -```js -assert.exists(document.querySelector('div.bb1a.bb1-window')); -``` - -You should not remove the `bb1b` class. - -```js -assert.exists(document.querySelector('div.bb1b')); -``` - -You should add the `bb1-window` class to the `.bb1b` element. - -```js -assert.exists(document.querySelector('div.bb1b.bb1-window')); -``` - -You should not remove the `bb1c` class. - -```js -assert.exists(document.querySelector('div.bb1c')); -``` - -You should add the `bb1-window` class to the `.bb1c` element. - -```js -assert.exists(document.querySelector('div.bb1c.bb1-window')); -``` - -You should not change the `.bb1d` element. - -```js -assert.exists(document.querySelector('div.bb1d')); -assert.notExists(document.querySelector('div.bb1d.bb1-window')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
---fcc-editable-region-- -
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md deleted file mode 100644 index fbeb142da1fd80..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md +++ /dev/null @@ -1,221 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f3 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them. - -# --hints-- - -You should remove the `background-color` from `.bb1a`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); -``` - -You should remove the `height` property from `.bb1b`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height); -``` - -You should remove the `background-color` property from `.bb1b`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor); -``` - -You should remove the `height` property from `.bb1c`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height); -``` - -You should remove the `background-color` property from `.bb1c`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md deleted file mode 100644 index f14c7ad682f2d7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f4 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Gradients can use as many colors as you want like this: - -```css -gradient-type( - color1, - color2, - color3 -); -``` - -Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property. - -# --hints-- - -You should use the `background` on `.bb1d`. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background); -``` - -You should give the `background` property a `linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient'); -``` - -You should use `orange` as the first color in the `linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange'); -``` - -You should use `--building-color1` as the second color in the `linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)'); -``` - -You should use `--window-color1` as the third color in the `linear-gradient`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} ---fcc-editable-region-- -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md deleted file mode 100644 index 0e92d01f849cac..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f5 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`. - -# --hints-- - -You should remove the `background-color` property and value from `.bb1d` - -```js -assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} ---fcc-editable-region-- -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); - background: linear-gradient( - orange, - var(--building-color1), - var(--window-color1) - ); -} ---fcc-editable-region-- -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md deleted file mode 100644 index 39c25a4bc8a8bb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f6 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -You can specify where you want a gradient transition to complete by adding it to the color like this: - -```css -gradient-type( - color1, - color2 20%, - color3 -); -``` - -Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action. - -# --hints-- - -You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} ---fcc-editable-region-- -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - orange, - var(--building-color1), - var(--window-color1) - ); -} ---fcc-editable-region-- -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md deleted file mode 100644 index 96667201651ab3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f7 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half. - -# --hints-- - -You should remove `orange` from the `linear-gradient`. - -```js -assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange'); -``` - -You should change the now first `linear-gradient` color to transition at `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} ---fcc-editable-region-- -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - orange, - var(--building-color1) 80%, - var(--window-color1) - ); -} ---fcc-editable-region-- -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md deleted file mode 100644 index 582f8bdce84df6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f8 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building. - -# --hints-- - -You should add two `div` elements to `.bb2`. - -```js -assert.equal(document.querySelector('div.bb2')?.children?.length, 2); -``` - -You should give the first `div` a class of `bb2a`. - -```js -assert.exists(document.querySelector('div.bb2a')); -``` - -You should give the second `div` a class of `bb2b`. - -```js -assert.exists(document.querySelector('div.bb2b')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md deleted file mode 100644 index c6e3351ee8515f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f9 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later. - -# --hints-- - -You should give `.bb2b` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%'); -``` - -You should give `.bb2b` a `height` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} ---fcc-editable-region-- - ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md deleted file mode 100644 index 390701f88f1218..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 5d822fd413a79914d39e98fa -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building. - -# --hints-- - -You should create a new property variable called `window-color2` within `:root`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2')); -``` - -You should give `window-color2` a value of `#8cd9b3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} ---fcc-editable-region-- -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb2b { - width: 100%; - height: 100%; -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md deleted file mode 100644 index 9391bc089451be..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d822fd413a79914d39e98fb -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -You can make an instant color change in a gradient by giving the transition zero space like this: - -```css -gradient-type( - color1, - color1 50%, - color2 50%, - color2 -); -``` - -Here, the top half of the element will be `color1` and the bottom half will be `color2`. Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`. - -# --hints-- - -You should give `.bb2b` a `background` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background); -``` - -You should use a `linear-gradient` on the `background`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient"); -``` - -You should use `--building-color2` from `0%` to `6%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/); -``` - -You should use `--window-color2` from `6%` to `9%`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%"); -``` - -`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; -} ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md deleted file mode 100644 index fb4e8d59698326..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 5d822fd413a79914d39e98fc -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them. - -# --hints-- - -You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md deleted file mode 100644 index 4631d5a45e1376..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -id: 5d822fd413a79914d39e98fd -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore. - -# --hints-- - -You should remove the `background-color` from `.bb2`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( -var(--building-color1) 50%, -var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( -var(--building-color1), -var(--window-color1) - ); -} ---fcc-editable-region-- -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( -var(--building-color2), -var(--building-color2) 6%, -var(--window-color2) 6%, -var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md deleted file mode 100644 index 137054187c1e85..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -id: 5d822fd413a79914d39e98fe -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Add these properties to `.bb2a`: - -```css -margin: auto; -width: 5vw; -height: 5vw; -border-top: 1vw solid #000; -border-bottom: 1vw solid #000; -border-left: 1vw solid #999; -border-right: 1vw solid #999; -``` - -After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building. - -# --hints-- - -You should give `.bb2a` a `margin` of `auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto"); -``` - -You should give `.bb2a` a `width` of `auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw"); -``` - -You should give `.bb2a` a `height` of `5vw`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw"); -``` - -You should give `.bb2a` a `border-top` of `1vw solid #000`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)"); -``` - -You should give `.bb2a` a `border-bottom` of `1vw solid #000`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)"); -``` - -You should give `.bb2a` a `border-left` of `1vw solid #999`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)"); -``` - -You should give `.bb2a` a `border-right` of `1vw solid #999`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} ---fcc-editable-region-- - ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md deleted file mode 100644 index c9e76533500320..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ff -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle. - -# --hints-- - -You should remove the `width` from `.bb2a`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width); -``` - -You should remove the `height` from `.bb2a`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height); -``` - -You should change the `border-left` to use `5vw`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)"); -``` - -You should change the `border-right` to use `5vw`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} ---fcc-editable-region-- -.bb2a { - margin: auto; - width: 5vw; - height: 5vw; - border-top: 1vw solid #000; - border-bottom: 1vw solid #000; - border-left: 1vw solid #999; - border-right: 1vw solid #999; -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md deleted file mode 100644 index abaa08286489f9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -id: 5d822fd413a79914d39e9900 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible. - -# --hints-- - -You should change the `border-left` to use `transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent"); -``` - -You should change the `border-right` to use `transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} ---fcc-editable-region-- -.bb2a { - margin: auto; - border-top: 1vw solid #000; - border-bottom: 1vw solid #000; - border-left: 5vw solid #999; - border-right: 5vw solid #999; -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md deleted file mode 100644 index 9bfd7cbb1f25f2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -id: 5d822fd413a79914d39e9901 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building. - -# --hints-- - -You should remove the `margin` from `.bb2a`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin); -``` - -You should remove the `border-top` from `.bb2a`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} ---fcc-editable-region-- -.bb2a { - margin: auto; - border-top: 1vw solid #000; - border-bottom: 1vw solid #000; - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md deleted file mode 100644 index f0b6b1a21fc729..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5d822fd413a79914d39e9902 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end. - -# --hints-- - -You should change `border-bottom` to use `5vh`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh"); -``` - -You should change `border-bottom` to use `--building-color2`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)"); -``` - -`border-bottom` should be `5vh solid var(--building-color2)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} ---fcc-editable-region-- -.bb2a { - border-bottom: 1vw solid #000; - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md deleted file mode 100644 index fd43c824d5eefb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5d822fd413a79914d39e9903 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings. - -# --hints-- - -You should define a new property variable `--window-color3`. - -```js -assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3")); -``` - -You should give `--window-color3` a value of `#d98cb3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} ---fcc-editable-region-- -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md deleted file mode 100644 index eccd9df6bc20fb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 5d822fd413a79914d39e9904 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this: - -```css -gradient-type( - direction, - color1, - color2 -); -``` - -Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`. - -# --hints-- - -You should give `.bb3` a `background` using `repeating-linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient"); -``` - -You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); -``` - -You should use `--building-color3` for the first two colors. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)"); -``` - -You should use `--window-color3` at `15%` for the third color. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} ---fcc-editable-region-- -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md deleted file mode 100644 index 68c77916cbd5d7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5d822fd413a79914d39e9905 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now. - -# --hints-- - -You should remove the `background-color` from `.bb3`. - -```js -assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} ---fcc-editable-region-- -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md deleted file mode 100644 index 8286c34ee7e3b8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: 5d822fd413a79914d39e9906 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order. - -# --hints-- - -You should add three `div` elements within `.bb4`. - -```js -assert.equal(document.querySelector("div.bb4")?.children?.length, 3); -``` - -You should give the first new `div` a class of `bb4a`. - -```js -assert.exists(document.querySelector("div.bb4 > div.bb4a")); -``` - -You should give the second new `div` a class of `bb4b`. - -```js -assert.exists(document.querySelector("div.bb4 > div.bb4a")); -``` - -You should give the third new `div` a class of `bb4c`. - -```js -assert.exists(document.querySelector("div.bb4 > div.bb4a")); -``` - -You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`. - -```js -assert.exists(document.querySelector("div.bb4a + div.bb4b")); -assert.exists(document.querySelector("div.bb4b + div.bb4c")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md deleted file mode 100644 index 807624c9390cd0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d822fd413a79914d39e9907 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`. - -# --hints-- - -You should give `.bb4a` a `width` of `3%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%"); -``` - -You should give `.bb4a` a `height` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%"); -``` - -You should give `.bb4b` a `width` of `80%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%"); -``` - -You should give `.bb4b` a `height` of `5%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%"); -``` - -You should give `.bb4c` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%"); -``` - -You should give `.bb4c` a `height` of `85%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} ---fcc-editable-region-- - ---fcc-editable-region-- -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md deleted file mode 100644 index 44cf923948da6f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d822fd413a79914d39e9908 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled. - -# --hints-- - -You should remove the `background-color` from `.bb4`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor); -``` - -You should give `.bb4a` a `background-color` of `--building-color4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)"); -``` - -You should give `.bb4b` a `background-color` of `--building-color4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)"); -``` - -You should give `.bb4c` a `background-color` of `--building-color4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} ---fcc-editable-region-- -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.bb4a { - width: 3%; - height: 10%; -} - -.bb4b { - width: 80%; - height: 5%; -} - -.bb4c { - width: 100%; - height: 85%; -} ---fcc-editable-region-- -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md deleted file mode 100644 index cba0b04b489186..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 5d822fd413a79914d39e9909 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding. - -# --hints-- - -You should create a new class declaration called `building-wrap`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} ---fcc-editable-region-- - ---fcc-editable-region-- -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md deleted file mode 100644 index 17f5af788fa0bc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md +++ /dev/null @@ -1,276 +0,0 @@ ---- -id: 5d822fd413a79914d39e990a -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class. - -# --hints-- - -You should remove `display` from `.bb1`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display); -``` - -You should move `display` with a value of `flex` to `.building-wrap`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex"); -``` - -You should remove `flex-direction` from `.bb1`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection); -``` - -You should move `flex-direction` with a value of `column` to `.building-wrap`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column"); -``` - -You should remove `align-items` from `.bb1`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems); -``` - -You should move `align-items` with a value of `center` to `.building-wrap`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} ---fcc-editable-region-- -.building-wrap { - -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} ---fcc-editable-region-- -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md deleted file mode 100644 index d597b01a1dfff0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md +++ /dev/null @@ -1,253 +0,0 @@ ---- -id: 5d822fd413a79914d39e990b -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it. - -# --hints-- - -You should add `building-wrap` to the `.bb1` element. - -```js -assert.exists(document.querySelector("div.bb1.building-wrap")); -``` - -You should add `building-wrap` to the `.bb4` element. - -```js -assert.exists(document.querySelector("div.bb4.building-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md deleted file mode 100644 index 66e190e6f7cfef..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d822fd413a79914d39e990c -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building. - -# --hints-- - -You should define a new property variable `--window-color4`. - -```js -assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4")); -``` - -You should give `--window-color4` a value of `#8cb3d9`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} ---fcc-editable-region-- -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md deleted file mode 100644 index 272ca45d2fbabd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md +++ /dev/null @@ -1,254 +0,0 @@ ---- -id: 5d822fd413a79914d39e990d -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building. - -# --hints-- - -You should add four `div` elements to `.bb4c`. - -```js -assert.equal(document.querySelector(".bb4c")?.children?.length, 4); -``` - -You should give each new `div` a class of `bb4-window`. - -```js -assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md deleted file mode 100644 index 76b1a0291f4a45..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: 5d822fd413a79914d39e990e -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`. - -# --hints-- - -You should give `.bb4-window` a `width` of `18%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%"); -``` - -You should give `.bb4-window` a `height` of `90%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%"); -``` - -You should give `.bb4-window` a `background-color` of `--window-color4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} ---fcc-editable-region-- - ---fcc-editable-region-- -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md deleted file mode 100644 index baa01d29bf4e01..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 5d822fd413a79914d39e990f -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `.window-wrap`, and add these properties to it: - -```css -display: flex; -align-items: center; -justify-content: space-evenly; -``` - -This will be used in a few places to center window elements vertically, and evenly space them in their parent. - -# --hints-- - -You should create a `.window-wrap` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap")); -``` - -You should give `.window-wrap` a `display` of `flex`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex"); -``` - -You should give `.window-wrap` an `align-items` of `center`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center"); -``` - -You should give `.window-wrap` a `justify-content` of `space-evenly`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} ---fcc-editable-region-- - ---fcc-editable-region-- -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md deleted file mode 100644 index c626722b945d9a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d822fd413a79914d39e9910 -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Add the new `window-wrap` class to the `.bb4c` element. - -# --hints-- - -You should add a class of `window-wrap` to `.bb4c`. - -```js -assert.exists(document.querySelector("div.bb4c.window-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md deleted file mode 100644 index b8581bcc1f9c1c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md +++ /dev/null @@ -1,290 +0,0 @@ ---- -id: 5d822fd413a79914d39e9911 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order. - -# --hints-- - -You should add three `div` elements within `.fb1`. - -```js -assert.equal(document.querySelector("div.fb1")?.children?.length, 3); -``` - -You should give the first new `div` a class of `fb1a`. - -```js -assert.exists(document.querySelector("div.fb1 > div.fb1a")); -``` - -You should give the second new `div` a class of `fbab`. - -```js -assert.exists(document.querySelector("div.fb1 > div.fb1b")); -``` - -You should give the third new `div` a class of `fb1c`. - -```js -assert.exists(document.querySelector("div.fb1 > div.fb1c")); -``` - -You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`. - -```js -assert.exists(document.querySelector("div.fb1a + div.fb1b")); -assert.exists(document.querySelector("div.fb1b + div.fb1c")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md deleted file mode 100644 index e7afc1537e1dde..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 5d822fd413a79914d39e9912 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`. - -# --hints-- - -You should give `.fb1b` a `width` of `60%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%"); -``` - -You should give `.fb1b` a `height` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%"); -``` - -You should give `.fb1c` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%"); -``` - -You should give `.fb1c` a `height` of `80%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md deleted file mode 100644 index 42b504404de85c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md +++ /dev/null @@ -1,279 +0,0 @@ ---- -id: 5d822fd413a79914d39e9913 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Add the `building-wrap` class to the `.fb1` element to center the sections. - -# --hints-- - -You should add the class `building-wrap` to `.fb1`. - -```js -assert.exists(document.querySelector("div.fb1.building-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
---fcc-editable-region-- -
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb1b { - width: 60%; - height: 10%; -} - -.fb1c { - width: 100%; - height: 80%; -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md deleted file mode 100644 index 3b0f5f4e714c08..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 5d822fd413a79914d39e9914 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Move the `background-color` property and value from `.fb1` to `.fb1b`. - -# --hints-- - -You should remove `background-color` from `.fb1`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor); -``` - -You should add a `background-color` of `--building-color4` to `.fb1b`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ ---fcc-editable-region-- -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb1b { - width: 60%; - height: 10%; -} ---fcc-editable-region-- -.fb1c { - width: 100%; - height: 80%; -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md deleted file mode 100644 index 6f6e8680c647db..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md +++ /dev/null @@ -1,390 +0,0 @@ ---- -id: 5d822fd413a79914d39e9915 -title: Step 106 -challengeType: 0 -dashedName: step-106 ---- - -# --description-- - -You don't need the `background-color` for this building anymore so you can remove that property. - -# --hints-- - -You should remove the `background-color` of `.fb5`. - -```js -assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md deleted file mode 100644 index f0e6e9ae11fa01..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 5d822fd413a79914d39e9916 -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building. - -Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`. - -# --hints-- - -You should give `.fb1c` a `background` with a `repeating-linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient"); -``` - -You should use a direction of `90deg`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); -``` - -You should use a first color of `--building-color4` from `0%` to `10%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%/); -``` - -You should use a second color of `transparent` from `10%` to `15%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} ---fcc-editable-region-- -.fb1c { - width: 100%; - height: 80%; -} ---fcc-editable-region-- -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md deleted file mode 100644 index 02f797b2c0730a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md +++ /dev/null @@ -1,306 +0,0 @@ ---- -id: 5d822fd413a79914d39e9917 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -You can add multiple gradients to an element by separating them with a comma (`,`) like this: - -```css -gradient1( - colors -), -gradient2( - colors -); -``` - -Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last. - -# --hints-- - -You should not alter the first `repeating-linear-gradient`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); -``` - -You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color4\)(0%)?,var\(--building-color4\)10%/); -``` - -You should use a second color of `--window-color4` from `10%` to `90%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var\(--building-color4\)(0%)?,var\(--building-color4\)10%,var\(--window-color4\)10%,var\(--window-color4\)90%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} ---fcc-editable-region-- -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ) -} ---fcc-editable-region-- -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md deleted file mode 100644 index 63033c5ee3ed9f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 5d822fd413a79914d39e9918 -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements. - -# --hints-- - -You should give `.fb1a` a `border-bottom`. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom); -``` - -You should use a `border-bottom` of `7vh solid var(--building-color4)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md deleted file mode 100644 index 101708de331e34..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 5d822fd413a79914d39e9919 -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide. - -# --hints-- - -You should give `.fb1a` a `border-left` of `2vw solid transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent"); -``` - -You should give `.fb1a` a `border-right` of `2vw solid transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} ---fcc-editable-region-- -.fb1a { - border-bottom: 7vh solid var(--building-color4); -} ---fcc-editable-region-- -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md deleted file mode 100644 index db9240b7d73da1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 5d822fd413a79914d39e991a -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order. - -# --hints-- - -You should add two `div` elements within `.fb2`. - -```js -assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2); -``` - -You should give the first new `div` a class of `fb2a`. - -```js -assert.exists(document.querySelector("div.fb2 > div.fb2a")); -assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild); -``` - -You should give the second new `div` a class of `fb2b`. - -```js -assert.exists(document.querySelector("div.fb2 > div.fb2b")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md deleted file mode 100644 index 34494469f9cef8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md +++ /dev/null @@ -1,313 +0,0 @@ ---- -id: 5d822fd413a79914d39e991b -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`. - -# --hints-- - -You should give `.fb2a` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%"); -``` - -You should give `.fb2b` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%"); -``` - -You should give `.fb2b` a `height` of `75%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md deleted file mode 100644 index dcc46fbb9b5ccc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5d822fd413a79914d39e991c -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building. - -# --hints-- - -You should add three `div` elements within `.fb2b`. - -```js -assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3); -``` - -You should give the three new `div` elements each a class of `fb2-window`. - -```js -assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb2a { - width: 100%; -} - -.fb2b { - width: 100%; - height: 75%; -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md deleted file mode 100644 index b00a8254b6c9e4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md +++ /dev/null @@ -1,314 +0,0 @@ ---- -id: 5d822fd413a79914d39e991d -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Add your `window-wrap` class to `.fb2b` to position the new window elements. - -# --hints-- - -You should add the class `window-wrap` to `.fb2b`. - -```js -assert.exists(document.querySelector("div.fb2b.window-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb2a { - width: 100%; -} - -.fb2b { - width: 100%; - height: 75%; -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md deleted file mode 100644 index 9562b457e5ef01..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 5d822fd413a79914d39e991e -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable. - -# --hints-- - -You should give the `.fb2-window` elements a `width` of `22%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%"); -``` - -You should give the `.fb2-window` elements a `height` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%"); -``` - -You should give the `.fb2-window` elements a `background-color` of `--window-color3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb2a { - width: 100%; -} - -.fb2b { - width: 100%; - height: 75%; -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md deleted file mode 100644 index 1221ea0aac6717..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 5d822fd413a79914d39e991f -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container. - -# --hints-- - -You should remove the `background-color` property from `.fb2`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor); -``` - -You should give `.fb2b` a `background-color` of `--building-color3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} ---fcc-editable-region-- -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb2a { - width: 100%; -} - -.fb2b { - width: 100%; - height: 75%; -} ---fcc-editable-region-- -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md deleted file mode 100644 index e7dd5c9df32820..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md +++ /dev/null @@ -1,329 +0,0 @@ ---- -id: 5d822fd413a79914d39e9920 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape. - -# --hints-- - -You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)"); -``` - -You should give `.fb2a` a `border-left` of `1vw solid transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent"); -``` - -You should give `.fb2a` a `border-right` of `1vw solid transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} ---fcc-editable-region-- -.fb2a { - width: 100%; -} ---fcc-editable-region-- -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md deleted file mode 100644 index bdc153301e067f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 5d822fd413a79914d39e9921 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two. - -# --hints-- - -You should add four `div` elements within `.fb3`. - -```js -assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4); -``` - -You should give the first new `div` a class of `fb3a`. - -```js -assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a")); -``` - -You should give the second new `div` a class of `fb3b`. - -```js -assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b")); -``` - -You should give the third new `div` a class of `fb3a`. - -```js -assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a")); -``` - -You should give the fourth new `div` a class of `fb3b`. - -```js -assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md deleted file mode 100644 index dab7f724b02976..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md +++ /dev/null @@ -1,346 +0,0 @@ ---- -id: 5d822fd413a79914d39e9922 -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`. - -# --hints-- - -You should give `.fb3a` a `width` of `80%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%"); -``` - -You should give `.fb3a` a `height` of `15%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%"); -``` - -You should give `.fb3b` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%"); -``` - -You should give `.fb3b` a `height` of `35%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md deleted file mode 100644 index 50adb775f0fede..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 5d822fd413a79914d39e9923 -title: Step 90 -challengeType: 0 -dashedName: step-90 ---- - -# --description-- - -Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`. - -# --hints-- - -You should remove the `background-color` from `.fb3`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor); -``` - -You should give `.fb3a` a `background-color` of `--building-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)"); -``` - -You should give `.fb3b` a `background-color` of `--building-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} ---fcc-editable-region-- -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3a { - width: 80%; - height: 15%; -} - -.fb3b { - width: 100%; - height: 35%; -} ---fcc-editable-region-- -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md deleted file mode 100644 index cad73994a3a36d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 5d822fd413a79914d39e9924 -title: Step 91 -challengeType: 0 -dashedName: step-91 ---- - -# --description-- - -Add your `building-wrap` class to the `.fb3` element to center the sections. - -# --hints-- - -You should add the class `building-wrap` to `.fb3`. - -```js -assert.exists(document.querySelector("div.fb3.building-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md deleted file mode 100644 index 5ebfebedb61586..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 5d822fd413a79914d39e9925 -title: Step 92 -challengeType: 0 -dashedName: step-92 ---- - -# --description-- - -Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section. - -# --hints-- - -You should add three `div` elements within the first `.fb3a` element. - -```js -assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3); -``` - -You should give each new `div` a class of `fb3-window`. - -```js -assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md deleted file mode 100644 index 7f537a47e7977e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 5d822fd413a79914d39e9926 -title: Step 93 -challengeType: 0 -dashedName: step-93 ---- - -# --description-- - -Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value. - -# --hints-- - -You should give `.fb3-window` a `width` of `25%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%"); -``` - -You should give `.fb3-window` a `height` of `80%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%"); -``` - -You should give `.fb3-window` a `background-color` of `--window-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md deleted file mode 100644 index a61c57920a528c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 5d822fd413a79914d39e9927 -title: Step 94 -challengeType: 0 -dashedName: step-94 ---- - -# --description-- - -Add your `window-wrap` class to the `.fb3a` element to center and space the windows. - -# --hints-- - -You should give `.fb3a` a class of `window-wrap`. - -```js -assert.exists(document.querySelector("div.fb3a.window-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md deleted file mode 100644 index 10a3aaa8e833a6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 5d822fd413a79914d39e9928 -title: Step 95 -challengeType: 0 -dashedName: step-95 ---- - -# --description-- - -I'm not thrilled about that black for the windows anymore. Change the `--window-color1` value to `#bb99ff`. - -# --hints-- - -You should change the value of `--window-color1` to `#bb99ff`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} ---fcc-editable-region-- -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md deleted file mode 100644 index 20b6addc7ab87c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 5d822fd413a79914d39e9929 -title: Step 96 -challengeType: 0 -dashedName: step-96 ---- - -# --description-- - -Only three more building to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now. - -# --hints-- - -You should add two `div` elements within `.fb4`. - -```js -assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2); -``` - -You should give the first new `div` a class of `fb4a`. - -```js -assert.exists(document.querySelector("div.fb4a")); -``` - -You should give the second new `div` a class of `fb4b`. - -```js -assert.exists(document.querySelector("div.fb4b")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md deleted file mode 100644 index 9b8e675c09b595..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md +++ /dev/null @@ -1,358 +0,0 @@ ---- -id: 5d822fd413a79914d39e992a -title: Step 97 -challengeType: 0 -dashedName: step-97 ---- - -# --description-- - -Give `.fb4b` a `width` of `100%` and `height` of `89%`. - -# --hints-- - -You should give `.fb4b` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%"); -``` - -You should give `.fb4b` a `height` of `89%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md deleted file mode 100644 index a24546ffcb4fdb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md +++ /dev/null @@ -1,360 +0,0 @@ ---- -id: 5d822fd413a79914d39e992b -title: Step 98 -challengeType: 0 -dashedName: step-98 ---- - -# --description-- - -Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`. - -# --hints-- - -You should remove the `background-color` from `.fb4`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor); -``` - -You should give `.fb4b` a `background-color` of `--building-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} ---fcc-editable-region-- -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb4b { - width: 100%; - height: 89%; -} ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md deleted file mode 100644 index 7322a34b12f7a7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 5d822fd413a79914d39e992c -title: Step 99 -challengeType: 0 -dashedName: step-99 ---- - -# --description-- - -Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`. - -# --hints-- - -You should add six `div` elements within `.fb4b`. - -```js -assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6); -``` - -You should give each new `div` a class of `fb4-window`. - -```js -assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md deleted file mode 100644 index 7dcd171ba58b48..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md +++ /dev/null @@ -1,376 +0,0 @@ ---- -id: 5d822fd413a79914d39e992d -title: Step 100 -challengeType: 0 -dashedName: step-100 ---- - -# --description-- - -Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building. - -# --hints-- - -You should give `.fb4-window` a `width` of `30%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%"); -``` - -You should give `.fb4-window` a `height` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%"); -``` - -You should give `.fb4-window` a `border-radius` of `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md deleted file mode 100644 index 3b3782f2fb2a81..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md +++ /dev/null @@ -1,373 +0,0 @@ ---- -id: 5d822fd413a79914d39e992e -title: Step 101 -challengeType: 0 -dashedName: step-101 ---- - -# --description-- - -Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space. - -# --hints-- - -You should give `.fb4-window` a `background-color` of `--window-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)"); -``` - -You should give `.fb4-window` a `margin` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; -} ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md deleted file mode 100644 index e11fbd378e03fd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md +++ /dev/null @@ -1,376 +0,0 @@ ---- -id: 5d822fd413a79914d39e992f -title: Step 102 -challengeType: 0 -dashedName: step-102 ---- - -# --description-- - -Add `display: flex` and `flex-wrap: wrap` to the window container. This will put your windows side by side, and then push them down to a new row when they don't fit. - -# --hints-- - -You should give `.fb4b` a `display` of `flex`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex"); -``` - -You should give `.fb4b` a `flex-wrap` of `wrap`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} ---fcc-editable-region-- -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md deleted file mode 100644 index d0eab8320b40d7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md +++ /dev/null @@ -1,380 +0,0 @@ ---- -id: 5d822fd413a79914d39e9930 -title: Step 103 -challengeType: 0 -dashedName: step-103 ---- - -# --description-- - -This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color. - -# --hints-- - -You should give `.fb4a` a `border-top` of `5vh solid transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent") -``` - -You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)") -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md deleted file mode 100644 index 4e7bd53afabfa2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md +++ /dev/null @@ -1,403 +0,0 @@ ---- -id: 5d822fd413a79914d39e9931 -title: Step 109 -challengeType: 0 -dashedName: step-109 ---- - -# --description-- - -You can remove the `background-color` for this building now, since it isn't needed. - -# --hints-- - -You should remove the `background-color` of `.fb6`. - -```js -assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md deleted file mode 100644 index b667050f8a6256..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 5d822fd413a79914d39e9932 -title: Step 104 -challengeType: 0 -dashedName: step-104 ---- - -# --description-- - -On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`. - -# --hints-- - -You should give `.fb5` a `background` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background); -``` - -You should give the `background` a `repeating-linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient"); -``` - -You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/); -``` - -You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md deleted file mode 100644 index ed255b86c889dc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md +++ /dev/null @@ -1,401 +0,0 @@ ---- -id: 5d822fd413a79914d39e9933 -title: Step 105 -challengeType: 0 -dashedName: step-105 ---- - -# --description-- - -Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows. - -# --hints-- - -You should give `.fb5` a second `repeating-linear-gradient` in the `background` property. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/); -``` - -You should give the second `repeating-linear-gradient` a direction of `90deg`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/); -``` - -You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/); -``` - -You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ) -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md deleted file mode 100644 index e5553c14d0fbe9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md +++ /dev/null @@ -1,408 +0,0 @@ ---- -id: 5d822fd413a79914d39e9934 -title: Step 107 -challengeType: 0 -dashedName: step-107 ---- - -# --description-- - -Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`. - -# --hints-- - -You should add a `repeating-linear-gradient` to `.fb6` in the `background` property. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient"); -``` - -You should give the `repeating-linear-gradient` a direction of `90deg`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); -``` - -You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); -``` - -You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md deleted file mode 100644 index 378da19f9dab58..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md +++ /dev/null @@ -1,408 +0,0 @@ ---- -id: 5d822fd413a79914d39e9935 -title: Step 108 -challengeType: 0 -dashedName: step-108 ---- - -# --description-- - -Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors. - -# --hints-- - -You should give `.fb6` a second `repeating-linear-gradient` in the `background` property. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/); -``` - -You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); -``` - -You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ) -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md deleted file mode 100644 index 271ec401fc8951..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md +++ /dev/null @@ -1,401 +0,0 @@ ---- -id: 5d822fd413a79914d39e9936 -title: Step 110 -challengeType: 0 -dashedName: step-110 ---- - -# --description-- - -Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together. - -# --hints-- - -You should remove the `border` from the `*` selector. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} ---fcc-editable-region-- -* { - border: 1px solid black; - box-sizing: border-box; -} ---fcc-editable-region-- -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md deleted file mode 100644 index 9a2434c4b81d24..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md +++ /dev/null @@ -1,402 +0,0 @@ ---- -id: 5d822fd413a79914d39e9937 -title: Step 111 -challengeType: 0 -dashedName: step-111 ---- - -# --description-- - -Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline. - -# --hints-- - -You should add a class of `sky` to `.background-buildings`. - -```js -assert.exists(document.querySelector("div.background-buildings.sky")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - ---fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md deleted file mode 100644 index 96d32439bf8b0e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md +++ /dev/null @@ -1,420 +0,0 @@ ---- -id: 5d822fd413a79914d39e9938 -title: Step 112 -challengeType: 0 -dashedName: step-112 ---- - -# --description-- - -Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun. - -# --hints-- - -You should give `.sky` a `radial-gradient` in the `background` property. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient"); -``` - -You should give the `radial-gradient` a first color of `#ffcf33`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/); -``` - -You should give the `radial-gradient` a second color of `#ffff66` at `21%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/); -``` - -You should give the `radial-gradient` a third color of `#bbeeff` at `100%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} ---fcc-editable-region-- - ---fcc-editable-region-- -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md deleted file mode 100644 index 125875e4ae6c4e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md +++ /dev/null @@ -1,409 +0,0 @@ ---- -id: 5d822fd413a79914d39e9939 -title: Step 113 -challengeType: 0 -dashedName: step-113 ---- - -# --description-- - -At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves. - -# --hints-- - -You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} ---fcc-editable-region-- -.sky { - background: radial-gradient( - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% - ); -} ---fcc-editable-region-- -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md deleted file mode 100644 index 994df85a2d53be..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md +++ /dev/null @@ -1,421 +0,0 @@ ---- -id: 5d822fd413a79914d39e993a -title: Step 114 -challengeType: 0 -dashedName: step-114 ---- - -# --description-- - -A media query can be used to change styles based on certain conditions, and they look like this: - -```css -@media (condition) { - -} -``` - -Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less. - -# --hints-- - -You should add an empty media query with `max-width: 1000px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% - ); -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md deleted file mode 100644 index 403eec7fbdd196..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md +++ /dev/null @@ -1,423 +0,0 @@ ---- -id: 5d822fd413a79914d39e993b -title: Step 115 -challengeType: 0 -dashedName: step-115 ---- - -# --description-- - -Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night. - -Note: You are going to need to scroll past the editable region to copy the class. - -# --hints-- - -You should not delete the existing `.sky` declaration. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/); -``` - -You should copy the existing `.sky` declaration into the media query. - -```js -assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% - ); -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} ---fcc-editable-region-- -@media (max-width: 1000px) { - -} ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md deleted file mode 100644 index a34b9b2df8dc0d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md +++ /dev/null @@ -1,436 +0,0 @@ ---- -id: 5d822fd413a79914d39e993c -title: Step 116 -challengeType: 0 -dashedName: step-116 ---- - -# --description-- - -In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors. - -# --hints-- - -You should change the first color values from `#ffcf33` to `#ccc`. - -```js -assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/); -``` - -You should change the second color value from `#ffff66` to `#445`. - -```js -assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/); -``` - -You should change the third color value from `#bbeeff` to `#223`. - -```js -assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sky { - background: radial-gradient( -closest-corner circle at 15% 15%, -#ffcf33, -#ffcf33 20%, -#ffff66 21%, -#bbeeff 100% - ); -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( -var(--building-color1) 50%, -var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( -var(--building-color1), -var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( -var(--building-color2), -var(--building-color2) 6%, -var(--window-color2) 6%, -var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( -90deg, -var(--building-color3), -var(--building-color3), -var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( -90deg, -var(--building-color4), -var(--building-color4) 10%, -transparent 10%, -transparent 15% - ), - repeating-linear-gradient( -var(--building-color4), -var(--building-color4) 10%, -var(--window-color4) 10%, -var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( -var(--building-color2), -var(--building-color2) 5%, -transparent 5%, -transparent 10% - ), - repeating-linear-gradient( -90deg, -var(--building-color2), -var(--building-color2) 12%, -var(--window-color2) 12%, -var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( -90deg, -var(--building-color3), -var(--building-color3) 10%, -transparent 10%, -transparent 30% - ), - repeating-linear-gradient( -var(--building-color3), -var(--building-color3) 10%, -var(--window-color3) 10%, -var(--window-color3) 30% - ); -} - -@media (max-width: 1000px) { ---fcc-editable-region-- - .sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% -); - } ---fcc-editable-region-- -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md deleted file mode 100644 index c57e461e3c1ee3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md +++ /dev/null @@ -1,448 +0,0 @@ ---- -id: 5d822fd413a79914d39e993d -title: Step 117 -challengeType: 0 -dashedName: step-117 ---- - -# --description-- - -Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there. - -# --hints-- - -You should add a `:root` selector to the media query. - -```js -``` - -You should add `--building-color1` with a value of `#000`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000"); -``` - -You should add `--building-color2` with a value of `#000`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000"); -``` - -You should add `--building-color3` with a value of `#000`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000"); -``` - -You should add `--building-color4` with a value of `#000`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% - ); -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -@media (max-width: 1000px) { ---fcc-editable-region-- - ---fcc-editable-region-- - .sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ccc, - #ccc 20%, - #445 21%, - #223 100% - ); - } -} - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md deleted file mode 100644 index 26af98e9ba92ce..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md +++ /dev/null @@ -1,860 +0,0 @@ ---- -id: 5d822fd413a79914d39e993e -title: Step 118 -challengeType: 0 -dashedName: step-118 ---- - -# --description-- - -Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night. - -Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great! - -# --hints-- - -You should add `--window-color1` with a value of `#777`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777"); -``` - -You should add `--window-color2` with a value of `#777`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777"); -``` - -You should add `--window-color3` with a value of `#777`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777"); -``` - -You should add `--window-color4` with a value of `#777`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% - ); -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -@media (max-width: 1000px) { ---fcc-editable-region-- - :root { - --building-color1: #000; - --building-color2: #000; - --building-color3: #000; - --building-color4: #000; - } ---fcc-editable-region-- - .sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ccc, - #ccc 20%, - #445 21%, - #223 100% - ); - } -} - -``` - -# --solutions-- - -```html - - - - City Skyline - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% - ); -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -@media (max-width: 1000px) { - :root { - --building-color1: #000; - --building-color2: #000; - --building-color3: #000; - --building-color4: #000; - --window-color1: #777; - --window-color2: #777; - --window-color3: #777; - --window-color4: #777; - } - .sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ccc, - #ccc 20%, - #445 21%, - #223 100% - ); - } -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md deleted file mode 100644 index 647df97ff4df5e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5dc17d3bf86c76b9248c6eb4 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Paragraph (`p`) elements are used to create paragraph text on websites. - -Create a paragraph (`p`) element below your `h2` element, and give it the text `Click here to view more cat photos.` - -# --hints-- - -Your `p` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('p')); -``` - -Your `p` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/p\>/)); -``` - -Your `p` element's text should be `Click here to view more cat photos.` You have either omitted the text or have a typo. - -```js -const extraSpacesRemoved = document - .querySelector('p') - .innerText.replace(/\s+/g, ' '); -assert(extraSpacesRemoved.match(/click here to view more cat photos\.?$/i)); -``` - -Your `p` element should be below the `h2` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('h2,p')].map( - (node) => node.nodeName -); -assert(collection.indexOf('H2') < collection.indexOf('P')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

---fcc-editable-region-- -

Cat Photos

---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md deleted file mode 100644 index 99eb22d5be7ad6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 5dc17dc8f86c76b9248c6eb5 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Commenting allows you to leave messages without affecting the browser display. It also allows you to make code inactive. A comment in HTML starts with ``. For example, the comment `` contains the text `TODO: Remove h1`. - -Add a comment above the `p` element with the text `TODO: Add link to cat photos`. - -# --hints-- - -Your comment should start with ``. You are missing one or more of the characters that define the end of a comment. - -```js -assert(code.match(/-->/)); -``` - -Your code should not have extra opening/closing comment characters. You have an extra `` displaying in the browser. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert(noSpaces.match(//g).length < 2); -``` - -Your comment should contain the text `TODO: Add link to cat photos`. - -```js -assert(code.match(//i)); -``` - -Your comment should be above the `p` element. You have them in the wrong order. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /

clickheretoviewmorecatphotos\.?<\/p>/i - ) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-

Cat Photos

---fcc-editable-region-- -

Click here to view more cat photos.

---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md deleted file mode 100644 index 78b9d0247b3956..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5dc2385ff86c76b9248c6eb7 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -HTML5 has some elements that identify different content areas. These elements make your HTML easier to read and help with Search Engine Optimization (SEO) and accessibility. - -Identify the main section of this page by adding a `
` opening tag after the `h1` element, and a `
` closing tag after the `p` element. - -# --hints-- - -Your `main` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('main')); -``` - -Your `main` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/main\>/)); -``` - -Your `main` element's opening tag should be below the `h1` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('main,h1')].map( - (node) => node.nodeName -); -assert(collection.indexOf('H1') < collection.indexOf('MAIN')); -``` - -Your `main` element's opening tag should be above the `h2` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('main,h2')].map( - (node) => node.nodeName -); -assert(collection.indexOf('MAIN') < collection.indexOf('H2')); -``` - -Your `main` element's closing tag should be below the `p` element. You have them in the wrong order. - -```js -const mainNode = document.querySelector('main'); -const pNode = document.querySelector('p'); -assert( - mainNode.contains(pNode) && - pNode.textContent.toLowerCase().match(/click here to view more cat photos/) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- -

CatPhotoApp

-

Cat Photos

- -

Click here to view more cat photos.

---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md deleted file mode 100644 index 89ea069bbbfdd6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 5dc23991f86c76b9248c6eb8 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -HTML elements are often nested within other HTML elements. In the previous step you nested the `h2` element, comment and `p` element within the `main` element. A nested element is a child of its parent element. - -To make HTML easier to read, indent the `h2` element, the comment, and `p` element exactly two spaces to indicate they are children of the `main` element. - -# --hints-- - -Your code should have an `h2` element with text `Cat Photos`. You may have accidentally deleted it, it is missing both opening and closing tags, or the text has changed. - -```js -assert( - document.querySelector('h2') && - code.match(/<\/h2\>/) && - document.querySelector('h2').innerText.toLowerCase() === 'cat photos' -); -``` - -Your `h2` element should be below the `main` element's opening tag and its opening tag should start 6 spaces over from the start of the line. - -```js -assert(code.toLowerCase().match(/\n\s{6}

/)); -``` - -Your code should have a comment. You removed the comment from an earlier step. - -```js -assert(code.match(//)); -``` - -The comment's text should be `TODO: Add link to cat photos`. Do not change the text or spacing of the comment. - -```js -assert(code.match(//i)); -``` - -Your comment should be below the `h2` element and start 6 spaces over from the start of the line. - -```js -assert( - code - .toLowerCase() - .match(/<\/h2>\n\s{6}/) -); -``` - -Your code should have a `p` element. You have removed the `p` element from an earlier step. - -```js -assert(document.querySelector('p')); -``` - -The text of the `p` element should be `Click here to view more cat photos.` Do not change the text, spacing, or punctuation of the `p` element. - -```js -assert( - document - .querySelector('p') - .innerText.toLowerCase() - .match(/click\s+here\s+to\s+view\s+more\s+cat\s+photos\.?$/) -); -``` - -Your `p` element should be below the comment and its opening tag should start 6 spaces over from the start of the line. - -```js -assert(code.toLowerCase().match(/-->\n\s{6}

/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
---fcc-editable-region-- -

Cat Photos

- -

Click here to view more cat photos.

---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md deleted file mode 100644 index 3cb407eeb2d77e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5dc23f9bf86c76b9248c6eba -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -You can add images to your website by using the `img` element. `img` elements have an opening tag without a closing tag. A tag for an element without a closing tag is known as a self-closing tag. - -Add an `img` element below the `p` element. At this point, no image will show up in the browser. - -# --hints-- - -Your `img` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('img')); -``` - -Your `img` element should not have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(!code.match(/<\/img\>/)); -``` - -You should only have one `img` element. Remove any extras. - -```js -assert(document.querySelectorAll('img').length === 1); -``` - -Your `img` element should be below the `p` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('p,img')].map( - (node) => node.nodeName -); -assert(collection.indexOf('P') < collection.indexOf('IMG')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-

Cat Photos

- ---fcc-editable-region-- -

Click here to view more cat photos.

---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md deleted file mode 100644 index a18ee569b81dd7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5dc24073f86c76b9248c6ebb -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -HTML attributes are special words used inside the opening tag of an element to control the element's behavior. The `src` attribute in an `img` element specifies the image's URL (where the image is located). An example of an `img` element using an `src` attribute: ``. - -Add an `src` attribute to the existing `img` element that is set to the following URL: `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. - -# --hints-- - -Your code should have an `img` element. You may have removed the `img` element or you have not surrounded the `src` attribute's value with quotes. - -```js -assert(document.querySelector('img')); -``` - -Your `img` element should have an `src` attribute. You have either omitted the attribute or have a typo. Make sure there is a space between the element name and the attribute name. - -```js -assert(document.querySelector('img').src); -``` - -Your `img` element's `src` attribute should be set to '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. You have either omitted the URL or have a typo. The case of the URL is important. - -```js -assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg'); -``` - -Although you have set the `img` element's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\ - -

CatPhotoApp

-
-

Cat Photos

- -

Click here to view more cat photos.

---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md deleted file mode 100644 index 1bb383b3664a6d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: 5dc24165f86c76b9248c6ebc -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -All `img` elements should have an `alt` attribute. The `alt` attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load. For example, `A cat` has an `alt` attribute with the text `A cat`. - -Add an `alt` attribute to the `img` element with the text `A cute orange cat lying on its back`. - -# --hints-- - -Your code should have an `img` element. You removed the `img` element from an earlier step. - -```js -assert(document.querySelector('img')); -``` - -Your `img` element does not have an `alt` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert(document.querySelector('img').hasAttribute('alt')); -``` - -Your `img` element's `alt` attribute value is set to something other than 'A cute orange cat lying on its back'. Make sure the `alt` attribute's value is surrounded with quotation marks. - -```js -const altText = document - .querySelector('img') - .alt.toLowerCase() - .replace(/\s+/g, ' '); -assert(altText.match(/A cute orange cat lying on its back\.?$/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-

Cat Photos

- -

Click here to view more cat photos.

---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md deleted file mode 100644 index 06de5480a03674..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 5dc24614f86c76b9248c6ebd -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -You can link to another page with the anchor (`a`) element. For example, `` would link to `freecodecamp.org`. - -Add an anchor element after the paragraph that links to `https://freecatphotoapp.com`. At this point, the link won’t show up in the preview. - -# --hints-- - -Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('a')); -``` - -Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/a\>/)); -``` - -Your anchor (`a`) element should be below the `p` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('a, p')].map( - (node) => node.nodeName -); -assert(collection.indexOf('P') < collection.indexOf('A')); -``` - -Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert(document.querySelector('a').hasAttribute('href')); -``` - -Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo. - -```js -assert( - document.querySelector('a').getAttribute('href') === - 'https://freecatphotoapp.com' -); -``` - -Although you have set the anchor ('a') element's `href` attribute to the correct link, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert( - !/\ - -

CatPhotoApp

-
-

Cat Photos

- ---fcc-editable-region-- -

Click here to view more cat photos.

---fcc-editable-region-- - A cute orange cat lying on its back. -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md deleted file mode 100644 index 6baf208bb6810e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: 5ddbd81294d8ddc1510a8e56 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -A link's text must be placed between the opening and closing tags of an anchor (`a`) element. For example, `click here to go to freeCodeCamp.org` is a link with the text `click here to go to freeCodeCamp.org`. - -Add the anchor text `cat photos` to the anchor element. This will become the link's text. - -# --hints-- - -Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('a')); -``` - -Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/a\>/)); -``` - -Your anchor (`a`) element's text should be `cat photos`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag. - -```js -assert( - document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') === - 'cat photos' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-

Cat Photos

- -

Click here to view more cat photos.

---fcc-editable-region-- - ---fcc-editable-region-- - A cute orange cat lying on its back. -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md deleted file mode 100644 index cb1ac93f448cb4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 5dfa22d1b521be39a3de7be0 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Turn the words `cat photos` located inside `p` element into a link by replacing the words with the anchor element added previously. The `p` element should show the same text in the browser, but the words `cat photos` should now be a link. There should only be one link showing in the app. - -# --hints-- - -Your code should only contain one anchor (`a`) element. Remove any extra anchor elements. - -```js -assert(document.querySelectorAll('a').length === 1); -``` - -Your anchor (`a`) element should be nested within the `p` element. - -```js -assert($('p > a').length); -``` - -The link's text should be `cat photos`. You have either omitted the text or have a typo. - -```js -const nestedAnchor = $('p > a')[0]; -assert( - nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com' && - nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos' -); -``` - -After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `Click here to view more cat photos.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element. - -```js -const pText = document - .querySelector('p') - .innerText.toLowerCase() - .replace(/\s+/g, ' '); -assert(pText.match(/click here to view more cat photos\.?$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-

Cat Photos

- ---fcc-editable-region-- -

Click here to view more cat photos.

- cat photos ---fcc-editable-region-- - A cute orange cat lying on its back. -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md deleted file mode 100644 index 790143c56d59f6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5dfa2407b521be39a3de7be1 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Add a `target` attribute with the value `_blank` to the anchor (`a`) element's opening tag, so that the link opens in a new tab. - -# --hints-- - -Your `p` element should have a nested anchor (`a`) element with the text `cat photos`. You may have deleted it or have a typo. - -```js -const anchor = $('p > a'); -assert( - anchor.length && - anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos' -); -``` - -Your anchor (`a`) element does not have a `target` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert(document.querySelector('a').hasAttribute('target')); -``` - -The value of the `target` attribute should be `_blank`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert(document.querySelector('a').getAttribute('target') === '_blank'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-

Cat Photos

- ---fcc-editable-region-- -

Click here to view more cat photos.

---fcc-editable-region-- - A cute orange cat lying on its back. -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md deleted file mode 100644 index 82836e6ce431b4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5dfa30b9eacea3f48c6300ad -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value. - -# --hints-- - -You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it. - -```js -assert( - document.querySelector('img') && - document.querySelector('img').getAttribute('src') === - 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg' -); -``` - -Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('a').length >= 2); -``` - -You should only add one opening anchor (`a`) tag. Please remove any extras. - -```js -assert(document.querySelectorAll('a').length === 2); -``` - -Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/a>/g).length >= 2); -``` - -You should only add one closing anchor (`a`) tag. Please remove any extras. - -```js -assert(code.match(/<\/a>/g).length === 2); -``` - -Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert(document.querySelector('a').hasAttribute('href')); -``` - -Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo. - -```js -assert( - document.querySelectorAll('a')[1].getAttribute('href') === - 'https://freecatphotoapp.com' -); -``` - -Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element. - -```js -assert(document.querySelector('img').parentNode.nodeName === 'A'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-

Cat Photos

- -

Click here to view more cat photos.

---fcc-editable-region-- - A cute orange cat lying on its back. ---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md deleted file mode 100644 index 523a531a919af0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 5dfa3589eacea3f48c6300ae -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Within the second `section` element, add a new `h2` element with the text `Cat Lists`. - -# --hints-- - -Your `section` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert( - document.querySelectorAll('section').length === 2 && - code.match(/<\/section>/g).length === 2 -); -``` - -Your `h2` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('h2').length === 2); -``` - -Your `h2` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/h2\>/g).length === 2); -``` - -Your second `h2` element should be right above the second `section` element's closing tag. It is not in the correct position. - -```js -const secondSection = document.querySelectorAll('section')[1]; -assert(secondSection.lastElementChild.nodeName === 'H2'); -``` - -The second `h2` element should have the text `Cat Lists`. You have either omitted the text or have a typo. - -```js -assert( - document - .querySelectorAll('main > section')[1] - .lastElementChild.innerText.toLowerCase() === 'cat lists' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
---fcc-editable-region-- -
-
---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md deleted file mode 100644 index d9ed45aaf35391..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5dfa371beacea3f48c6300af -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -When you add a lower rank heading element to the page, it's implied that you're starting a new subsection. - -After the last `h2` element of the second `section` element, add an `h3` element with the text `Things cats love:`. - -# --hints-- - -The second `section` element appears to be missing or does not have both an opening and closing tag. - -```js -assert( - document.querySelectorAll('main > section')[1] && - code.match(/\<\/section>/g).length == 2 -); -``` - -There should be an `h3` element right above the second `section` element's closing tag. - -```js -assert( - document.querySelectorAll('main > section')[1].lastElementChild.nodeName === - 'H3' -); -``` - -The `h3` element right above the second `section` element's closing tag should have the text `Things cats love:`. Make sure to include the colon at the end of the text. - -```js -assert( - document - .querySelectorAll('main > section')[1] - .lastElementChild.innerText.toLowerCase() - .replace(/\s+/g, ' ') === 'things cats love:' -); -``` - -There should be an `h2` element with the text `Cat Lists` above the last `h3` element that is nested in the last `section` element'. You may have accidentally deleted the `h2` element. - -```js -const secondSectionLastElemNode = document.querySelectorAll('main > section')[1] - .lastElementChild; -assert( - secondSectionLastElemNode.nodeName === 'H3' && - secondSectionLastElemNode.previousElementSibling.innerText - .toLowerCase() - .replace(/\s+/g, ' ') === 'cat lists' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
---fcc-editable-region-- -
-

Cat Lists

-
---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md deleted file mode 100644 index 67b3b9d484cabe..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: 5dfa37b9eacea3f48c6300b0 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -After the `h3` element with the `Things cats love:` text, add an unordered list (`ul`) element. Note that nothing will be displayed at this point. - -# --hints-- - -Your `ul` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('ul')); -``` - -Your `ul` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/ul>/)); -``` - -The `ul` element should be above the second `section` element's closing tag. - -```js -const secondSectionLastElemNode = $('main > section')[1].lastElementChild; -assert(secondSectionLastElemNode.nodeName === 'UL'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
---fcc-editable-region-- -

Cat Lists

-

Things cats love:

---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md deleted file mode 100644 index e358b8169351eb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 5dfb5ecbeacea3f48c6300b1 -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Use list item (`li`) elements to create items in a list. Here is an example of list items in an unordered list: - -```html -
    -
  • milk
    • -
  • cheese
    • -
-``` - -Nest three list items within the `ul` element to display three things cats love: `cat nip`, `laser pointers` and `lasagna`. - -# --hints-- - -You should have three `li` elements. Each `li` element should have its own opening and closing tag. - -```js -assert($('li').length === 3 && code.match(/<\/li\>/g).length === 3); -``` - -You should have three `li` elements with the text `cat nip`, `laser pointers` and `lasagna` in any order. You have either omitted some text or have a typo. - -```js -assert.deepStrictEqual( - [...document.querySelectorAll('li')] - .map((item) => item.innerText.toLowerCase()) - .sort((a, b) => a.localeCompare(b)), - ['cat nip', 'lasagna', 'laser pointers'] -); -``` - -The three `li` elements should be located between the `ul` element's opening and closing tags. - -```js -assert( - [...document.querySelectorAll('li')].filter( - (item) => item.parentNode.nodeName === 'UL' - ).length === 3 -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

---fcc-editable-region-- -
    -
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md deleted file mode 100644 index c437e321c0d362..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5dfb6250eacea3f48c6300b2 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -After the unordered list, add a new image with an `src` attribute value set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg` and an `alt` attribute value set to `A slice of lasagna on a plate.` - -# --hints-- - -There should be an `img` element right after the closing `` tag. - -```js -assert($('section')[1].lastElementChild.nodeName === 'IMG'); -``` - -The new image does not have an `alt` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('section')[1].lastElementChild.hasAttribute('alt')); -``` - -The new image should have an `alt` value of `A slice of lasagna on a plate.` Make sure the `alt` attribute's value is surrounded with quotation marks. - -```js -assert( - $('section')[1] - .lastElementChild.getAttribute('alt') - .replace(/\s+/g, ' ') - .match(/^A slice of lasagna on a plate\.?$/i) -); -``` - -The new image does not have an `src` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('section')[1].lastElementChild.hasAttribute('src')); -``` - -The new image should have an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`. Make sure the `src` attribute's value is surrounded with quotation marks. - -```js -assert( - $('section')[1].lastElementChild.getAttribute('src') === - 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' -); -``` - -Although you have set the new image's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\ - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

---fcc-editable-region-- -
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md deleted file mode 100644 index 788633df18e99a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: 5dfb655eeacea3f48c6300b3 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -The `figure` element represents self-contained content and will allow you to associate an image with a caption. - -Nest the image you just added within a `figure` element. - -# --hints-- - -Your `figure` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('figure')); -``` - -Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figure\>/)); -``` - -There should be an `figure` element right above the second `section` element's closing tag. - -```js -assert($('section')[1].lastElementChild.nodeName === 'FIGURE'); -``` - -The lasagna `img` element should be nested in the `figure` element. - -```js -assert( - document.querySelector('figure > img') && - document.querySelector('figure > img').getAttribute('src').toLowerCase() === - 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
---fcc-editable-region-- - A slice of lasagna on a plate. ---fcc-editable-region-- -
-
- - - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md deleted file mode 100644 index 50dbab186887a2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: 5dfb6a35eacea3f48c6300b4 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -A figure caption (`figcaption`) element is used to add a caption to describe the image contained within the `figure` element. For example, `
A cute cat
` adds the caption `A cute cat`. - -After the image nested in the `figure` element, add a `figcaption` element with the text `Cats love lasagna.` - -# --hints-- - -The Lasagna `img` element should be nested in the `figure` element. - -```js -assert( - document.querySelector('figure > img') && - document.querySelector('figure > img').getAttribute('src').toLowerCase() === - 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' -); -``` - -Your `figcaption` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('figcaption')); -``` - -Your `figcaption` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figcaption\>/)); -``` - -The `figcaption` element should be nested in the `figure` element. - -```js -assert( - document.querySelector('figure > figcaption') && - document.querySelector('figure > figcaption') -); -``` - -The lasagna `img` element should be nested in the `figure` element. - -```js -assert( - document.querySelector('figure > img') && - document.querySelector('figure > img').getAttribute('src').toLowerCase() === - 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' -); -``` - -The `figcaption` element nested in the `figure` element should be below the `img` element. You have them in the wrong order. - -```js -assert( - document.querySelector('figcaption').previousElementSibling.nodeName === 'IMG' -); -``` - -Your `figcaption` element's text should be `Cats love lasagna.` You have either omitted the text or have a typo. - -```js -assert( - document.querySelector('figcaption').innerText.match(/Cats love lasagna.?$/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
---fcc-editable-region-- -
- A slice of lasagna on a plate. -
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md deleted file mode 100644 index 4d11acf545ef66..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d0 -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Emphasize the word `love` in the `figcaption` element by wrapping it in an emphasis (`em`) element. - -# --hints-- - -Your emphasis (`em`) element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('em')); -``` - -Your emphasis (`em`) element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/em\>/)); -``` - -You have either deleted the `figcaption` element or it is missing an opening or closing tag. - -```js -assert(document.querySelector('figcaption') && code.match(/<\/figcaption\>/)); -``` - -Your emphasis (`em`) element should surround the text `love`. You have either omitted the text or have a typo. - -```js -assert( - document.querySelector('figcaption > em').innerText.toLowerCase() === 'love' -); -``` - -The `figcaption`'s text should be `Cats love lasagna`. Check for typos and that the necessary spaces are present around the `em` element's opening and closing tags. - -```js -assert( - document - .querySelector('figcaption') - .innerText.replace(/\s+/gi, ' ') - .match(/cats love lasagna\.?/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. ---fcc-editable-region-- -
Cats love lasagna.
---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md deleted file mode 100644 index 8929c59be37d05..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d1 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -After the `figure` element, add another `h3` element with the text `Top 3 things cats hate:`. - -# --hints-- - -There should be an `h3` element right above the second `section` element's closing tag. Make sure it has an opening and closing tag. - -```js -assert( - document.querySelectorAll('main > section')[1].lastElementChild.nodeName === - 'H3' && code.match(/<\/h3\>/g).length === 2 -); -``` - -The new `h3` element should have the text `Top 3 things cats hate:`. Make sure to include the colon at the end of the text. - -```js -assert( - document - .querySelectorAll('main > section')[1] - .lastElementChild.innerText.toLowerCase() - .replace(/\s+/g, ' ') === 'top 3 things cats hate:' -); -``` - -There should be a `figure` above the new `h3` element. You may have accidentally deleted the `figure` element. - -```js -const secondSectionLastElemNode = document.querySelectorAll('main > section')[1] - .lastElementChild; -assert( - secondSectionLastElemNode.nodeName === 'H3' && - secondSectionLastElemNode.previousElementSibling.nodeName === 'FIGURE' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
---fcc-editable-region-- -
- A slice of lasagna on a plate. -
Cats love lasagna.
-
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md deleted file mode 100644 index 66a2b9487458c6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d2 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -The code for an ordered list (`ol`) is similar to an unordered list, but list items in an ordered list are numbered when displayed. - -After the second `section` element's last `h3` element, add an ordered list with these three list items: `flea treatment`, `thunder` and `other cats`. - -# --hints-- - -Your `ol` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('ol')); -``` - -Your `ol` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/ol>/)); -``` - -The `ol` element should be above the second `section` element's closing tag. You have them in the wrong order. - -```js -assert($('main > section')[1].lastElementChild.nodeName === 'OL'); -``` - -The three `li` elements should be nested inside the `ol` element. - -```js -assert( - [...document.querySelectorAll('li')].filter( - (item) => item.parentNode.nodeName === 'OL' - ).length === 3 -); -``` - -You should have three `li` elements with the text `flea treatment`, `thunder` and `other cats` in any order. - -```js -assert.deepStrictEqual( - [...document.querySelectorAll('li')] - .filter((item) => item.parentNode.nodeName === 'OL') - .map((item) => item.innerText.toLowerCase()) - .sort((a, b) => a.localeCompare(b)), - ['flea treatment', 'other cats', 'thunder'] -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
---fcc-editable-region-- -

Top 3 things cats hate:

---fcc-editable-region-- -
-
- - - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md deleted file mode 100644 index eec907e982bacc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d3 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -After the ordered list, add another `figure` element. - -# --hints-- - -Your `figure` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('figure').length === 2); -``` - -Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figure>/g).length === 2); -``` - -There should be a `figure` element right above the second `section` element's closing tag. - -```js -assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

---fcc-editable-region-- -
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md deleted file mode 100644 index 802e8d08f8445a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d4 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -The `strong` element is used to indicate that some text is of strong importance or urgent. - -In the `figcaption` you just added, indicate that `hate` is of strong importance by wrapping it in a `strong` element. - -# --hints-- - -Your `strong` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('strong')); -``` - -Your `strong` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/strong\>/)); -``` - -Your `strong` element should surround the word `hate` in the text `Cats hate other cats.` You have either omitted the text or have a typo. - -```js -assert( - document - .querySelectorAll('figcaption')[1] - .querySelector('strong') - .innerText.toLowerCase() === 'hate' -); -``` - -The `figcaption`'s text should be `Cats hate other cats.` Check for typos and that the necessary spaces are present around the `strong` element's opening and closing tags. - -```js -const secondFigCaption = document.querySelectorAll('figcaption')[1]; -assert( - secondFigCaption && - secondFigCaption.innerText - .replace(/\s+/gi, ' ') - .trim() - .match(/cats hate other cats\.?/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. ---fcc-editable-region-- -
Cats hate other cats.
---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md deleted file mode 100644 index bc784d05f757b9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d5 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Inside the third `section` element add an `h2` element with the text `Cat Form`. - -# --hints-- - -Unable to find the third `section` element. You may have accidentally deleted it or the opening tag or closing tag. - -```js -assert( - document.querySelectorAll('section').length === 3 && - code.match(/<\/section>/g).length === 3 -); -``` - -Your `h2` element should have an opening tag and closing tag. You may be missing one or both of the required tags. - -```js -assert( - document.querySelectorAll('h2').length >= 3 && - code.match(/<\/h2>/g).length >= 3 -); -``` - -You should only add one `h2` element. Please remove any extras. - -```js -assert(document.querySelectorAll('h2').length === 3); -``` - -The new `h2` element should be located right above the third `section` element's closing tag. - -```js -const thirdSection = document.querySelectorAll('section')[2]; -assert(thirdSection.lastElementChild.nodeName === 'H2'); -``` - -Your `h2` element's text should be `Cat Form`. - -```js -const thirdSection = document.querySelectorAll('section')[2]; -assert( - thirdSection - .querySelector('h2') - .innerText.toLowerCase() - .replace(/\s+/g, ' ') === 'cat form' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
---fcc-editable-region-- -
-
---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md deleted file mode 100644 index 09a6507b83acbc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d6 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Now you will add a web form to collect information from users. - -After the `Cat Form` heading, add a `form` element. - -# --hints-- - -Your `form` element should have an opening tag and closing tag. You may be missing one or both of the required tags, or have them in the wrong order. - -```js -assert(document.querySelector('form') && code.match(/<\/form>/g)); -``` - -Your `form` element tags are not in the correct order. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert(noSpaces.indexOf('
') < noSpaces.indexOf('
')); -``` - -The `form` element nested in the last `section` element should be below the `h2` element. You have the `h2` element and the `form` element in the wrong order. - -```js -assert(document.querySelector('form').previousElementSibling.nodeName === 'H2'); -``` - -The `form` element should have no content. Remove any HTML elements or text between the `form` element's tags. - -```js -assert($('form')[0].innerHTML.trim().length === 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
---fcc-editable-region-- -

Cat Form

---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md deleted file mode 100644 index 3407548e86772d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d7 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -The `action` attribute indicates where form data should be sent. For example, `
` tells the browser that the form data should be sent to the path `/submit-url`. - -Add an `action` attribute with the value `https://freecatphotoapp.com/submit-cat-photo` to the `form` element. - -# --hints-- - -Your `form` element should have an opening tag and closing tag in the correct order. You may be missing one or both of the required tags, or have them in the wrong order. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert( - document.querySelector('form') && - code.match(/<\/form>/g) && - noSpaces.indexOf('') -); -``` - -Your `form` element nested in the last `section` element should be below the `h2` element. You have the `h2` element and the `form` element in the wrong order. - -```js -assert(document.querySelector('form').previousElementSibling.nodeName === 'H2'); -``` - -Your `form` element should have no content. Remove any HTML elements or text between the `form` element's tags. - -```js -assert($('form')[0].innerHTML.trim().length === 0); -``` - -Your `form` element does not have an `action` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -const form = document.querySelector('form'); -assert(form.hasAttribute('action')); -``` - -Your `form` element should have an `action` attribute with the value `https://freecatphotoapp.com/submit-cat-photo`. - -```js -const form = document.querySelector('form'); -assert( - form - .getAttribute('action') - .match(/^https:\/\/freecatphotoapp\.com\/submit-cat-photo$/) -); -``` - -Although you have set the `action` attribute to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert( - !/\ - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

---fcc-editable-region-- -
-
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md deleted file mode 100644 index f18822dccefac3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d8 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -The `input` element allows you several ways to collect data from a web form. Like `img` elements, `input` elements are self-closing and do not need closing tags. - -Nest an `input` element in the `form` element. - -# --hints-- - -Your `form` element should have an opening tag and closing tag in the correct order. You may be missing one or both of the required tags, or have them in the wrong order. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert( - document.querySelector('form') && - code.match(/<\/form>/g) && - noSpaces.indexOf('') -); -``` - -Your `form` element's opening tag should only have an `action` attribute. Remove anything else you may have typed in it. - -```js -assert([...document.querySelector('form').attributes].length < 2); -``` - -You should create an input element. Check the syntax. - -```js -assert(document.querySelector('input')); -``` - -Your `input` element should have an opening tag, but not a closing tag. - -```js -assert(document.querySelector('input') && !code.match(/<\/input\>/g)); -``` - -Your `input` element should be nested within the `form` element. - -```js -assert(document.querySelector('form > input')); -``` - -Your `form` should only contain the `input` element. Remove any HTML elements or text between the `form` element's tags. - -```js -assert( - $('form')[0].children.length === 1 && - $('form')[0].innerText.trim().length === 0 -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

---fcc-editable-region-- -
-
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md deleted file mode 100644 index 19af12e5118c1b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d9 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Placeholder text is used to give people a hint about what kind of information to enter into an input. For example, ``. - -Add the placeholder text `cat photo URL` to your `input` element. - -# --hints-- - -You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. - -```js -assert($('input').length); -``` - -Your `form` should only contain the `input` element. Remove any additional HTML elements or text within the `form` element. - -```js -assert( - $('form')[0].children.length === 1 && - $('form')[0].innerText.trim().length === 0 -); -``` - -Your `input` element does not have a `placeholder` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('input')[0].hasAttribute('placeholder')); -``` - -Your `input` element should have a `placeholder` attribute with the value `cat photo URL`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('input')[0] - .getAttribute('placeholder') - .replace(/\s+/g, ' ') - .match(/^cat photo URL$/i) -); -``` - -Although you have set the `input` element's `placeholder` attribute to `cat photo URL`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md deleted file mode 100644 index 7992ca4515433f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 5ef9b03c81a63668521804da -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Use the `button` element to create a clickable button. For example, `` creates a button with the text `Click Here`. - -Add a `button` element with the text `Submit` below the `input` element. The default behavior of clicking a form button without any attributes submits the form to the location specified in the form's `action` attribute. - -# --hints-- - -Your `button` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('button')); -``` - -Your `button` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/button\>/)); -``` - -Your `button` element's text should be `Submit`. You have either omitted the text or have a typo. - -```js -assert(document.querySelector('button').innerText.toLowerCase() === 'submit'); -``` - -Your `button` element should be below the `input` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('input, button')].map( - (node) => node.nodeName -); -assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md deleted file mode 100644 index 39cff003e0de56..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 5ef9b03c81a63668521804db -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -To prevent a user from submitting your form when required information is missing, you need to add the `required` attribute to an `input` element. There's no need to set a value to the `required` attribute. Instead, just add the word `required` to the `input` element, making sure there is space between it and other attributes. - -# --hints-- - -You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. - -```js -assert($('input').length); -``` - -Your `form` should only contain the `input` element. Remove any additional HTML elements or text within the `form` element. - -```js -assert( - $('form')[0].children.length === 1 && - $('form')[0].innerText.trim().length === 0 -); -``` - -Your `input` element should have a `required` attribute. Remember, you just add the word `required` inside the `input` element's tag. - -```js -assert($('input')[0].hasAttribute('required')); -``` - -A value should not be given to the `required` attribute. - -```js -assert($('input')[0].getAttribute('required') === ''); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md deleted file mode 100644 index 18539d4809c54d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 5ef9b03c81a63668521804dc -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -You can use radio buttons for questions where you want only one answer out of multiple options. - -Here is an example of a radio button with the option of `cat`: ` cat`. Remember that `input` elements are self-closing. - -Before the text input, add a radio button with the option `Indoor`. - -# --hints-- - -You should create an input element for your radio button. Check the syntax. - -```js -assert($('form > input').length >= 2); -``` - -Your `input` element should have an opening tag, but not a closing tag. - -```js -assert($('form > input') && !code.match(/<\/input\>/g)); -``` - -You should only have added one input element for your radio button. Remove any extras. - -```js -assert($('form > input').length === 2); -``` - -Your new `input` element should be above the existing `input` with `type` attribute set to `text`. You have them in the wrong order. - -```js -const existingInputElem = document.querySelector('form > input[type="text"]'); -assert( - existingInputElem && - existingInputElem.previousElementSibling.nodeName === 'INPUT' -); -``` - -Your new `input` element does not have a `type` attribute. Check that there is a space after the opening tag's name. - -```js -assert($('input')[0].hasAttribute('type')); -``` - -Your new `input` element should have a `type` attribute with the value `radio`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('input')[0] - .getAttribute('type') - .match(/^radio$/i) -); -``` - -Although you have set the new `input` element's `type` attribute to `radio`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\<\s*input\s+type\s*=\s*radio/i.test(code)); -``` - -The `radio` button's ` Indoor` text should be located after it instead of before it. - -```js -const radioInputElem = $('input')[0]; -assert(!radioInputElem.previousSibling.nodeValue.match(/Indoor/i)); -``` - -The text ` Indoor` should be located directly to the right of your `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. - -```js -const radioInputElem = $('input')[0]; -assert( - radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Indoor/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md deleted file mode 100644 index 64581e5302ad7a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5ef9b03c81a63668521804dd -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -`label` elements are used to help associate the text for an `input` element with the input element itself (especially for assistive technologies like screen readers). For example, `` makes it so clicking the word `cat` also selects the corresponding radio button. - -Nest your `radio` button inside a `label` element. - -# --hints-- - -You should make sure the radio button is still present. - -```js -assert($('input[type="radio"]')[0]); -``` - -The text ` Indoor` should be located directly to the right of your `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. - -```js -const radioInputElem = $('input')[0]; -assert( - radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Indoor/i) -); -``` - -Your `label` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('label')); -``` - -Your `label` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/label\>/)); -``` - -Your radio button and its text should all be located between the opening and closing tags of the `label` element. - -```js -const labelChildNodes = [...$('form > label')[0].childNodes]; -assert( - labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - Indoor ---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md deleted file mode 100644 index ec264414c614e8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5ef9b03c81a63668521804de -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Notice that both radio buttons can be selected at the same time. To make it so selecting one radio button automatically deselects the other, both buttons must have a `name` attribute with the same value. - -Add the `name` attribute with the value `indoor-outdoor` to both radio buttons. - -# --hints-- - -Both radio buttons should still be located between opening and closing `label` element tags. - -```js -const labelChildNodes = [...document.querySelectorAll('form > label')].map( - (node) => node.childNodes -); -assert( - labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') - .length === 2 -); -``` - -Both radio buttons should have a `name` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; -assert(radioButtons.every((btn) => btn.hasAttribute('name'))); -``` - -Both radio buttons should have a `name` attribute with the value `indoor-outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const radioButtons = [...$('input[type="radio"]')]; -assert( - radioButtons.every((btn) => - btn.getAttribute('name').match(/^indoor-outdoor$/) - ) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - - ---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md deleted file mode 100644 index f5bf435abd1205..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 5ef9b03c81a63668521804df -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -The `id` attribute is used to identify specific HTML elements. Each `id` attribute's value must be unique from all other `id` values for the entire page. - -Add an `id` attribute with the value `indoor` to the radio button. When elements have multiple attributes, the order of the attributes doesn't matter. - -# --hints-- - -Your radio button should still be located between the opening and closing tags of the `label` element. - -```js -const labelChildNodes = [...$('form > label')[0].childNodes]; -assert( - labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length -); -``` - -Your radio button should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('input')[0].hasAttribute('id')); -``` - -Your radio element should have an `id` attribute with the value `indoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert($('input')[0].id.match(/^indoor$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md deleted file mode 100644 index adab4f31bb2fc5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e1 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -The `fieldset` element is used to group related inputs and labels together in a web form. `fieldset` elements are block-level elements, meaning that they appear on a new line. - -Nest the `Indoor` and `Outdoor` radio buttons within a `fieldset` element, and don't forget to indent the radio buttons. - -# --hints-- - -Both radio buttons should still be located between opening and closing `label` element tags. - -```js -const labelChildNodes = [...$('label')].map((node) => [...node.childNodes]); -assert( - labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') - .length === 2 -); -``` - -Your `fieldset` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('fieldset')); -``` - -Your `fieldset` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/fieldset\>/)); -``` - -Both radio button and associated labels should be between the opening and closing tags of the `fieldset` element. - -```js -const radioButtons = [...$('input[type="radio"]')]; -assert( - radioButtons.every((btn) => btn.parentNode.parentNode.nodeName === 'FIELDSET') -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - - ---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md deleted file mode 100644 index 99ca091cbace4c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e2 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Forms commonly use checkboxes for questions that may have more than one answer. For example, here's a checkbox with the option of `tacos`: ` tacos`. - -Under the `legend` element you just added, add an `input` with its `type` attribute set to `checkbox` and give it the option of `Loving`. - -# --hints-- - -The `input` element for your checkbox should have an opening tag, but not a closing tag. - -```js -assert($('fieldset > input') && !code.match(/<\/input\>/g)); -``` - -You should only have added one input element for your checkbox. Remove any extras. - -```js -assert($('fieldset > input').length === 1); -``` - -Your new `input` element should be below the `legend` element with the text `What's your cat's personality?`. You have them in the wrong order. - -```js -const existingLegendElem = $('fieldset > legend')[1]; -assert( - existingLegendElem && - existingLegendElem.nextElementSibling.nodeName === 'INPUT' -); -``` - -Your new `input` element does not have a `type` attribute. Check that there is a space after the opening tag's name. - -```js -assert($('fieldset > input')[0].hasAttribute('type')); -``` - -Your new `input` element should have a `type` attribute with the value `checkbox`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('fieldset > input')[0] - .getAttribute('type') - .match(/^checkbox$/i) -); -``` - -Although you have set the new `input` element's `type` attribute to `checkbox`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\<\s*input\s+type\s*=\s*checkbox/i.test(code)); -``` - -The text ` Loving` should be located directly to the right of your checkbox. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. - -```js -const checkboxInputElem = $('input[type="checkbox"]')[0]; -assert( - checkboxInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Loving/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
---fcc-editable-region-- - What's your cat's personality? ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md deleted file mode 100644 index 32afe5dd1a2c37..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e3 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Add another checkbox after the one you just added. The `id` attribute value should be `lazy` and the `name` attribute value should be the same as the last checkbox. - -Also add a `label` element to the right of the new checkbox with the text `Lazy`. Make sure to associate the `label` element with the new checkbox using the `for` attribute. - -# --hints-- - -You need to add a new checkbox. - -```js -assert($('input[type="checkbox"]').length === 2); -``` - -Your new checkbox should have an `id` attribute with the value `lazy` and a `name` attribute with the value `personality`. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -const checkboxes = [...$('input[type="checkbox"]')]; -assert( - checkboxes.some( - (checkbox) => - checkbox.id === 'lazy' && checkbox.getAttribute('name') === 'personality' - ) -); -``` - -Your new checkbox should be after the first one. You have them in the wrong order. - -```js -const checkboxes = [...$('input[type="checkbox"]')].map( - (checkbox) => checkbox.id -); -assert(checkboxes.indexOf('loving') < checkboxes.indexOf('lazy')); -``` - -On the right side of your new checkbox, there should be `label` element with the text `Lazy`. - -```js -const nextElementSibling = $('input[type="checkbox"]')[1].nextElementSibling; -assert( - nextElementSibling.nodeName === 'LABEL' && - nextElementSibling.innerText.replace(/\s+/g, '').match(/^Lazy$/i) -); -``` - -The new `label` should have a `for` attribute with the same value as the `id` attribute of the new checkbox. You have either omitted the value or have a typo. - -```js -assert( - $('input[type="checkbox"]')[1].nextElementSibling.getAttribute('for') === - 'lazy' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? ---fcc-editable-region-- - ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md deleted file mode 100644 index 6ecff52e877f41..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e5 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -In order to make a checkbox checked or radio button selected by default, you need to add the `checked` attribute to it. There's no need to set a value to the `checked` attribute. Instead, just add the word `checked` to the `input` element, making sure there is space between it and other attributes. - -Make the first radio button and the first checkbox selected by default. - -# --hints-- - -Make sure there still are two radio buttons and three checkboxes nested in their respective `fieldset` elements. - -```js -assert( - $('input[type="radio"]').length === 2 && - $('fieldset > input[type="checkbox"]').length === 3 -); -``` - -The first radio button is missing the `checked` attribute. - -```js -assert($('input[type="radio"]')[0].hasAttribute('checked')); -``` - -The second radio button should not have the `checked` attribute. - -```js -assert(!$('input[type="radio"]')[1].hasAttribute('checked')); -``` - -The first checkbox is missing the `checked` attribute. - -```js -assert($('input[type="checkbox"]')[0].hasAttribute('checked')); -``` - -The second checkbox should not have the `checked` attribute. - -```js -assert(!$('input[type="checkbox"]')[1].hasAttribute('checked')); -``` - -The third checkbox should not have the `checked` attribute. - -```js -assert(!$('input[type="checkbox"]')[2].hasAttribute('checked')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- -
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md deleted file mode 100644 index 9ef05985470894..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e7 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Now you will add a footer section to the page. - -After the `main` element, add a `footer` element. - -# --hints-- - -You have either deleted the `main` element or it is missing an opening tag or closing tag. - -```js -assert(document.querySelector('main') && code.match(/<\/main>/)); -``` - -Your `footer` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('footer')); -``` - -Your `footer` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/footer\>/)); -``` - -Your `footer` element should be below the closing `main` element tag. You have put it somewhere else. - -```js -assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
---fcc-editable-region-- -
- - ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md deleted file mode 100644 index d764e0affe0fb0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e8 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Nest a `p` element with the text `No Copyright - freeCodeCamp.org` within the `footer` element. - -# --hints-- - -You have either deleted the `footer` element or it is missing an opening tag or closing tag. - -```js -assert(document.querySelector('footer') && code.match(/<\/footer>/)); -``` - -Your `footer` element should have a `p` element. Make sure to add an opening tag and closing tag for the `p` element. - -```js -assert(document.querySelector('footer > p')); -``` - -Your `footer` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -const pElemClosingTags = code.match(/<\/p\>/g); -assert(pElemClosingTags && pElemClosingTags.length === 2); -``` - -Your `p` element's text should be `No Copyright - freeCodeCamp.org`. You have either omitted the text, have a typo, or it is not between the `p` element's opening and closing tags. - -```js -const extraSpacesRemoved = $('footer > p')[0].innerText.replace(/\s+/g, ' '); -assert(extraSpacesRemoved.match(/No Copyright - freeCodeCamp\.org$/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
---fcc-editable-region-- -
-
---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md deleted file mode 100644 index 653bd504c6ca49..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e9 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Make the text `freeCodeCamp.org` into a link by enclosing it in an anchor (`a`) element. The `href` attribute should be set to `https://www.freecodecamp.org`. - -# --hints-- - -Your anchor (`a`) element should be nested within the `footer` element. Make sure to add an opening tag and closing tag for the anchor (`a`) element. - -```js -assert($('footer > p > a').length); -``` - -Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -const aElemClosingTags = code.match(/<\/a\>/g); -assert(aElemClosingTags && aElemClosingTags.length === 3); -``` - -Your anchor (`a`) element should have an `href` attribute with the value `https://www.freecodecamp.org`. You may have omitted the attribute/value, or have a typo. - -```js -const nestedAnchor = $('footer > p > a')[0]; -assert(nestedAnchor.getAttribute('href') === 'https://www.freecodecamp.org'); -``` - -The link's text should be `freeCodeCamp.org`. You have either omitted the text or have a typo. - -```js -const nestedAnchor = $('footer > p > a')[0]; -assert( - nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === - 'freecodecamp.org' -); -``` - -After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `No Copyright - freeCodeCamp.org`. Double check the text, spacing, or punctuation of both the `p` and nested anchor element. - -```js -const pText = $('footer > p')[0].innerText.toLowerCase().replace(/\s+/g, ' '); -assert(pText.match(/^no copyright - freecodecamp.org$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
-
-

---fcc-editable-region-- - No Copyright - freeCodeCamp.org ---fcc-editable-region-- -

-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md deleted file mode 100644 index 301f781b01305e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -id: 5ef9b03c81a63668521804ea -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Notice that everything you've added to the page so far is inside the `body` element. All page content elements that should be rendered to the page go inside the `body` element. However, other important information goes inside the `head` element. - -Add a `head` element just above the `body` element. - -# --hints-- - -You have either deleted the `body` element or it is missing an opening tag or closing tag. - -```js -assert(document.querySelector('body') && code.match(/<\/body>/)); -``` - -Your `head` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(code.match(/\/)); -``` - -Your `head` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/\<\/head\>/)); -``` - -Your `head` element should be above the opening `body` element tag. You have put it somewhere else. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert(noSpaces.match(/\<\/head\>\/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md deleted file mode 100644 index 812414ab17a022..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5ef9b03c81a63668521804eb -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -The `title` element determines what browsers show in the title bar or tab for the page. - -Add a `title` element within the `head` element. Its text should be `CatPhotoApp`. - -# --hints-- - -You have either deleted the `head` element or it is missing an opening tag or closing tag. - -```js -assert(code.match(/\/) && code.match(/\<\/head\>/)); -``` - -Your `title` element should be nested in the `head` element. Make sure to add an opening tag and closing tag for the `title` element. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert(noSpaces.match(/\\.*\<\/title\>\<\/head\>/)); -``` - -Your `title` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/\<\/title\>/)); -``` - -Your `title` element's text should be `CatPhotoApp`. You have either omitted the text or have a typo. - -```js -assert(document.title && document.title.toLowerCase() === 'catphotoapp'); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - - ---fcc-editable-region-- - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
- - - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md deleted file mode 100644 index 939eb8e559732f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5ef9b03c81a63668521804ec -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Notice that the entire contents of the page are nested within an `html` element. All other elements must be descendants of this `html` element. - -Add the `lang` attribute with the value `en` to the opening `html` tag to specify that the language of the page is English. - -# --hints-- - -You have either deleted the `html` element or it is missing an opening tag or closing tag. - -```js -assert(code.match(/\/) && code.match(/\<\/html\>/)); -``` - -Your `html` element should have a `lang` attribute with the value `en`. You may have omitted the attribute/value, or have a typo. - -```js -const extraSpacesRemoved = code.replace(/\s+/g, ' '); -assert(extraSpacesRemoved.match(/\/)); -``` - -Although you have set the `html` element's `lang` attribute to `en`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\<\s*html\s+lang\s*=en/i.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- - - CatPhotoApp - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
- - - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md deleted file mode 100644 index c34e9e3f3748ec..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -id: 5ef9b03c81a63668521804ee -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -All pages should begin with ``. This special string is known as a declaration and ensures the browser tries to meet industry-wide specifications. - -To complete this project, add this declaration as the first line of the code. - -# --hints-- - -Your code should begin with the declaration ``. You may have omitted the declaration, have a typo, or it is not the first line of code. - -```js -assert(code.match(/\<\s*!DOCTYPE\s+html\s*\>/)); -``` - -Your `` must be located at the top of the document. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\ - - CatPhotoApp - ---fcc-editable-region-- - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
- - - -``` - -# --solutions-- - -```html - - - - CatPhotoApp - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
- - - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md deleted file mode 100644 index c299c5186b8ac4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5efada803cbd2bbdab94e332 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Inside the `figure` element you just added, nest an `img` element with a `src` attribute set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`. - -# --hints-- - -Your second `figure` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('figure').length === 2); -``` - -Your second `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figure>/g).length === 2); -``` - -There should be a second `figure` element right above the second `section` element's closing tag. You have them in the wrong order. - -```js -assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); -``` - -You should have a third `img` element nested in the `figure` element. - -```js -const catsImg = document.querySelectorAll('figure > img')[1]; -assert( - catsImg && - catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' -); -``` - -The third image should have an `src` attribute set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`. - -```js -const catsImg = document.querySelectorAll('figure > img')[1]; -assert( - catsImg && - catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' -); -``` - -Although you have set the new image's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\ - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
---fcc-editable-region-- -
-
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md deleted file mode 100644 index 07ab44fc62c2b6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 5efae0543cbd2bbdab94e333 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -To improve accessibility of the image you just added, add an `alt` attribute with the text `Five cats looking around a field.` - -# --hints-- - -Your `figure` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('figure').length === 2); -``` - -Your `ol` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figure>/g).length === 2); -``` - -There should be a `figure` element right above the last `section` element's closing tag. - -```js -assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); -``` - -The Cats `img` element should be nested in the `figure` element. - -```js -const catsImg = document.querySelectorAll('figure > img')[1]; -assert( - catsImg && - catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' -); -``` - -The Cats `img` element should have an `alt` attribute with the value `Five cats looking around a field.` - -```js -const catsImg = document.querySelectorAll('figure > img')[1]; -assert( - catsImg - .getAttribute('alt') - .replace(/\s+/g, ' ') - .match(/^Five cats looking around a field\.?$/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md deleted file mode 100644 index adc349c99bb091..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5efae16e3cbd2bbdab94e334 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -After the last `img` element, add a `figcaption` element with the text `Cats hate other cats.` - -# --hints-- - -Your `figcaption` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelectorAll('figcaption').length === 2); -``` - -Your `figcaption` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figcaption\>/g).length === 2); -``` - -There should be a `figure` element right above the second `section` element's closing tag. - -```js -assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); -``` - -The last `img` element should be nested in the `figure` element. - -```js -const catsImg = document.querySelectorAll('figure > img')[1]; -assert( - catsImg && - catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' -); -``` - -Your `figure` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelectorAll('figure').length === 2); -``` - -Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figure\>/g).length === 2); -``` - -The `figcaption` element should be nested in the `figure` element. - -```js -assert(document.querySelectorAll('figure > figcaption').length === 2); -``` - -The `figcaption` element nested in the `figure` element should be below the `img` element. You have the `img` element and the `figcaption` element in the wrong order. - -```js -assert( - document.querySelectorAll('figcaption')[1].previousElementSibling.nodeName === - 'IMG' -); -``` - -The `figcaption` element should have the text `Cats hate other cats.` You have omitted a word or have a typo. - -```js -assert( - document - .querySelectorAll('figcaption')[1] - .innerText.toLowerCase() - .match(/Cats hate other cats\.?$/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
---fcc-editable-region-- - Five cats looking around a field. ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md deleted file mode 100644 index 12b2ae60dc0eb9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5efb23e70dc218d6c85f89b1 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -There are many kinds of inputs you can create using the `type` attribute. You can easily create a password field, reset button, or a control to let users select a file from their computer. - -Create a text field to get text input from a user by adding the `type` attribute with the value `text` to the `input` element. - -# --hints-- - -You have either deleted your `input` element or it has invalid syntax. If you have added attributes, make sure their values are surrounded by quotation marks. - -```js -assert($('input').length); -``` - -Your `form` element should only contain the `input` element. Remove any extra HTML elements or text between the `form` element's tags. - -```js -assert( - $('form')[0].children.length === 1 && - $('form')[0].innerText.trim().length === 0 -); -``` - -Your `input` element does not have a `type` attribute with the value `text`. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('input')[0].hasAttribute('type')); -``` - -Your `input` element should have a `type` attribute with the value `text`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('input')[0] - .getAttribute('type') - .replace(/\s+/g, ' ') - .match(/^text$/i) -); -``` - -Although you have set the `input` element's `type` attribute to the `text`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\ - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md deleted file mode 100644 index b40c637d1bff6a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -id: 5efb2c990dc218d6c85f89b2 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Even though you added your button below the text input, they appear next to each other on the page. That's because both `input` and `button` elements are inline elements, which don't appear on new lines. - -You learned previously that the button submits the form by default, but you can explicitly add the `type` attribute with the value `submit` to make it clearer. Go ahead and do this to specify where this button should submit the form. - -# --hints-- - -Your `button` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('button')); -``` - -Your `button` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/button\>/)); -``` - -Your `button` element does not have a `type` attribute. Check that there is a space after the opening tag's name. - -```js -assert($('button')[0].hasAttribute('type')); -``` - -Your `button` element should have a `type` attribute with the value `submit`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('button')[0] - .getAttribute('type') - .match(/^submit$/i) -); -``` - -Although you have set the `button` element's `type` attribute to `submit`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
- ---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md deleted file mode 100644 index cc6828c3bc6036..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 5efc4f528d6a74d05e68af74 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -There's another way to associate an `input` element's text with the element itself. You can nest the text within a `label` element and add a `for` attribute with the same value as the `input` element's `id` attribute. - -Associate the text `Loving` with the checkbox by only nesting the text `Loving` in a `label` element and place it to the right side of the checkbox `input` element. - -# --hints-- - -You should make sure the checkbox is still present. - -```js -assert($('input[type="checkbox"]')[0]); -``` - -Your checkbox should still have an `id` attribute with the value `loving`. You may have removed the attribute or changed its value. - -```js -assert($('input[type="checkbox"]')[0].id === 'loving'); -``` - -The text ` Loving` should no longer be located directly to the right of your checkbox. It should be wrapped in a `label` element. Make sure there is a space between the two elements. - -```js -const checkboxInputElem = $('input[type="checkbox"]')[0]; -assert( - !checkboxInputElem.nextSibling.nodeValue - .replace(/\s+/g, ' ') - .match(/ Loving/i) -); -``` - -You will need to add a new `label` element in which to nest the text `Loving`. Make sure it has both an opening and closing tag. - -```js -assert( - document.querySelectorAll('label').length === 3 && - code.match(/<\/label\>/g).length === 3 -); -``` - -The new `label` element should be located directly to the right of your checkbox. Make sure there is a space between the two elements. - -```js -const checkboxInputElem = $('input[type="checkbox"]')[0]; -assert(checkboxInputElem.nextElementSibling.nodeName === 'LABEL'); -``` - -The new `label` element does not have a `for` attribute. Check that there is a space after the opening tag's name. - -```js -const labelElem = $('input[type="checkbox"]')[0].nextElementSibling; -assert(labelElem.hasAttribute('for')); -``` - -The new `label` element should have a `for` attribute with the value `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const labelElem = $('input[type="checkbox"]')[0].nextElementSibling; -assert(labelElem.getAttribute('for').match(/^loving$/)); -``` - -The text `Loving` should be nested within the new `label` element. You have either omitted the text or have a typo. - -```js -const labelElem = document.querySelector('label[for="loving"]'); -assert(labelElem.textContent.replace(/\s/g, '').match(/Loving/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? ---fcc-editable-region-- - Loving ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md deleted file mode 100644 index 2b47442e63d472..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5efc518e8d6a74d05e68af75 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Add the `name` attribute with the value `personality` to the checkbox `input` element. - -While you won't notice this in the browser, doing this makes it easier for a server to process your web form, especially when there are multiple checkboxes. - -# --hints-- - -You should make sure the checkbox is still present. - -```js -assert($('input[type="checkbox"]')[0]); -``` - -The checkbox `input` element does not have a `name` attribute. Check that there is a space after the opening tag's name. - -```js -assert($('input[type="checkbox"]')[0].hasAttribute('name')); -``` - -The checkbox `input` element should have a `name` attribute with the value `personality`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('input[type="checkbox"]')[0] - .getAttribute('name') - .match(/^personality$/) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? ---fcc-editable-region-- - ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md deleted file mode 100644 index 833427a5fc7d48..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: 5efc54138d6a74d05e68af76 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Add an `id` attribute with the value `loving` to the checkbox input. - -# --hints-- - -Your checkbox should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('input[type="checkbox"]')[0].hasAttribute('id')); -``` - -Your checkbox should have an `id` attribute with the value `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert($('input[type="checkbox"]')[0].id.match(/^loving$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? ---fcc-editable-region-- - Loving ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md deleted file mode 100644 index 6ba79e3dd8d997..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 5efc575c8d6a74d05e68af77 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Add a final checkbox after the previous one with an `id` attribute value of `energetic`. The `name` attribute should be the same as the previous checkbox. - -Also add a `label` element to the right of the new checkbox with text `Energetic`. Make sure to associate the `label` element with the new checkbox. - -# --hints-- - -You need to add a new checkbox. - -```js -assert($('input[type="checkbox"]').length === 3); -``` - -Your new checkbox should have an `id` attribute with the value `energetic` and a `name` attribute with the value `personality`. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -const checkboxes = [...$('input[type="checkbox"]')]; -assert( - checkboxes.some( - (checkbox) => - checkbox.id === 'energetic' && - checkbox.getAttribute('name') === 'personality' - ) -); -``` - -Your new checkbox should be after the second one. You have them in the wrong order. - -```js -const checkboxes = [...$('input[type="checkbox"]')].map( - (checkbox) => checkbox.id -); -assert(checkboxes.indexOf('lazy') < checkboxes.indexOf('energetic')); -``` - -On the right side of your new checkbox, there should be `label` element with the text `Energetic`. - -```js -const nextElementSibling = $('input[type="checkbox"]')[2].nextElementSibling; -assert( - nextElementSibling.nodeName === 'LABEL' && - nextElementSibling.innerText.replace(/\s+/g, '').match(/^Energetic$/i) -); -``` - -The new `label` should have a `for` attribute with the same value as the `id` attribute of the new checkbox. You have either omitted the value or have a typo. - -```js -assert( - $('input[type="checkbox"]')[2].nextElementSibling.getAttribute('for') === - 'energetic' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? ---fcc-editable-region-- - - ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md deleted file mode 100644 index acf4d378e7af24..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 5f05a1d8e233dff4a68508d8 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Nest another radio button with the option `Outdoor` in a new `label` element. The new radio button should be placed after the first one. Also, set its `id` attribute value to `outdoor`. - -# --hints-- - -You will need to add a new `label` element in which to nest your new radio button. Make sure it has both an opening and closing tag. - -```js -assert( - document.querySelectorAll('label').length === 2 && - code.match(/<\/label\>/g).length === 2 -); -``` - -The text ` Outdoor` should be located directly to the right of your new `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. - -```js -const radioButtons = [...$('input')]; -assert( - radioButtons.filter((btn) => - btn.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Outdoor/i) - ).length -); -``` - -Your new radio button and associated label should be below the first one. You have them in the wrong order. - -```js -const collection = [ - ...document.querySelectorAll('input[type="radio"]') -].map((node) => node.nextSibling.nodeValue.replace(/\s+/g, '')); -assert(collection.indexOf('Indoor') < collection.indexOf('Outdoor')); -``` - -Your new radio button should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('input')[1].hasAttribute('id')); -``` - -Your new radio element should have an `id` attribute with the value `outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert($('input')[1].id.match(/^outdoor$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md deleted file mode 100644 index adf4f4c79f661c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5f07be6ef7412fbad0c5626b -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Before adding any new content, you should make use of a `section` element to separate the cat photos content from the future content. - -Take all the elements currently located within the `main` element and nest them in a `section` element. - -# --hints-- - -Your `section` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('section')); -``` - -Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/section\>/)); -``` - -The entire `section` element should be between the opening and closing tags of the `main` element. - -```js -assert(document.querySelector('section').parentNode.nodeName === 'MAIN'); -``` - -The existing `h2`, comment, `p` element, and anchor (`a`) element should be between the opening and closing tags of the `section` element. - -```js -const childrenOfSection = [...document.querySelector('section').childNodes]; -const foundElems = childrenOfSection.filter((child) => { - return ['H2', 'A', 'P'].includes(child.nodeName); -}); -assert(foundElems.length === 3); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

---fcc-editable-region-- -
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md deleted file mode 100644 index 6be452b82c7fb8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 5f07c98cdb9413cbd4b16750 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -It is time to add a new section. Add a second `section` element below the existing `section` element. - -# --hints-- - -Your `section` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('section').length >= 2); -``` - -You should only add one opening `section` tag. Please remove any extras. - -```js -assert(document.querySelectorAll('section').length === 2); -``` - -Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/section>/g).length >= 2); -``` - -You should only add one closing `section` tag. Please remove any extras. - -```js -assert(code.match(/<\/section>/g).length === 2); -``` - -The second `section` element should not be nested in the first `section` element. - -```js -const childrenOf1stSection = [ - ...document.querySelector('main > section').children -]; -const foundElems = childrenOf1stSection.filter((child) => { - return child.nodeName === 'SECTION'; -}); -assert(foundElems.length === 0); -``` - -Both `section` elements should be between the opening and closing tags of the `main` element. - -```js -const childrenOfMain = [...document.querySelector('main').children]; -const foundElems = childrenOfMain.filter((child) => { - return child.nodeName === 'SECTION'; -}); -assert(foundElems.length === 2); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
---fcc-editable-region-- -
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md deleted file mode 100644 index 7f620d6f74e58e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5f07fb1579dc934717801375 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -It is time to add a new section. Add a third `section` element below the second `section` element. - -# --hints-- - -Your `section` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('section').length >= 3); -``` - -You should only add one opening `section` tag. Please remove any extras. - -```js -assert(document.querySelectorAll('section').length === 3); -``` - -Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/section>/g).length >= 3); -``` - -You should only add one closing `section` tag. Please remove any extras. - -```js -assert(code.match(/<\/section>/g).length === 3); -``` - -All of the `section` elements should be between the opening and closing tags of the `main` element. - -```js -const childrenOfMain = [...document.querySelector('main').children]; -const sectionElemsFound = childrenOfMain.filter((child) => { - return child.nodeName === 'SECTION'; -}); -assert(sectionElemsFound.length === 3); -``` - -The last `section` element should have no content. Remove any HTML elements or text within the `section` element. - -```js -assert($('main > section')[2].children.length === 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
---fcc-editable-region-- -
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md deleted file mode 100644 index aa4669e5e051ea..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5f0d48e7b435f13ab6550051 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -The `legend` element acts as a caption for the content in the `fieldset` element. It gives users context about what they should enter into that part of the form. - -Add a `legend` element with the text `Is your cat an indoor or outdoor cat?` above both of the radio buttons. - -# --hints-- - -Your `legend` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('legend')); -``` - -Your `legend` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/legend\>/)); -``` - -Your `legend` element should be the first element right below `fieldset` element's opening tag and before the first radio button's opening `label` tag. It is not in the correct position. - -```js -const fieldsetElem = document.querySelector('fieldset'); -const fieldsetElemChildren = fieldsetElem.children; -assert( - fieldsetElem.firstElementChild.nodeName === 'LEGEND' && - fieldsetElemChildren[1].nodeName === 'LABEL' && - fieldsetElemChildren[1].children[0].nodeName === 'INPUT' && - fieldsetElemChildren[1].children[0].id === 'indoor' -); -``` - -Your `legend` element's text should be `Is your cat an indoor or outdoor cat?`. You have either omitted the text, have a typo, or it is not between the `legend` element's opening and closing tags. - -```js -const extraSpacesRemoved = document - .querySelector('legend') - .innerText.replace(/\s+/g, ' '); -assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- -
- - -
---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md deleted file mode 100644 index 8e62ddb2a3f4ad..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5f0d4ab1b435f13ab6550052 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Next, you are going to add some new form `input` elements, so add another `fieldset` element directly below the current `fieldset` element. - -# --hints-- - -Your new `fieldset` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('fieldset').length >= 2); -``` - -You should only add one opening `fieldset` tag. Please remove any extras. - -```js -assert(document.querySelectorAll('fieldset').length === 2); -``` - -Your new `fieldset` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/fieldset>/g).length >= 2); -``` - -You should only add one closing `fieldset` tag. Please remove any extras. - -```js -assert(code.match(/<\/fieldset>/g).length === 2); -``` - -The second `fieldset` element should not be nested in the first `fieldset` element. - -```js -const childrenOf1stFieldset = [ - ...document.querySelector('form > fieldset').children -]; -const foundElems = childrenOf1stFieldset.filter((child) => { - return child.nodeName === 'FIELDSET'; -}); -assert(foundElems.length === 0); -``` - -Both `fieldset` elements should be above the text field and its associated `label` element. They are out of order. - -```js -const formChildren = $('form')[0].children; -assert( - formChildren[0].nodeName === 'FIELDSET' && - formChildren[1].nodeName === 'FIELDSET' && - formChildren[2] && - formChildren[2].nodeName === 'INPUT' && - formChildren[2].getAttribute('type') === 'text' -); -``` - -Your new `fieldset` element should be below the existing `fieldset` element. You have them in the wrong order. - -```js -const fieldsetChildren = [...document.querySelectorAll('fieldset')].map( - (elem) => elem.children -); -assert(fieldsetChildren[0].length > fieldsetChildren[1].length); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- -
- Is your cat an indoor or outdoor cat? - - -
- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md deleted file mode 100644 index 6e9654dd6335dc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5f0d4d04b435f13ab6550053 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Add a `legend` element with the text `What's your cat's personality?` inside the second `fieldset` element. - -# --hints-- - -You have either deleted the second `fieldset` element or it is missing an opening tag or closing tag. - -```js -assert( - document.querySelectorAll('fieldset').length === 2 && - code.match(/<\/fieldset>/g).length === 2 -); -``` - -Your `legend` element should have an opening tag. Opening tags have this syntax: ``. - -```js -const secondFieldset = $('fieldset')[1]; -assert( - secondFieldset && - [...secondFieldset.children].filter((child) => child.nodeName === 'LEGEND') - .length -); -``` - -Your `legend` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/legend\>/g).length === 2); -``` - -The `legend` element should have the text `What's your cat's personality?`. You have either omitted the text or have a typo. - -```js -const secondFieldset = $('fieldset')[1]; -assert( - secondFieldset && - [...secondFieldset.children].filter((child) => { - const extraSpacesRemoved = child.innerText.replace(/\s+/g, ' '); - return ( - child.nodeName === 'LEGEND' && - extraSpacesRemoved.match(/What's your cat's personality\??$/i) - ); - }).length -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
---fcc-editable-region-- -
-
---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md deleted file mode 100644 index d78f60d765ef73..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -id: 5f1a80975fc4bcae0edb3497 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -If you select the `Indoor` radio button and submit the form, the form data for the button is based on its `name` and `value` attributes. Since your radio buttons do not have a `value` attribute, the form data will include `indoor-outdoor=on`, which is not useful when you have multiple buttons. - -Add a `value` attribute to both radio buttons. For convenience, set the button's `value` attribute to the same value as its `id` attribute. - -# --hints-- - -Both radio buttons should still be located between opening and closing `label` element tags. - -```js -const labelChildNodes = [...document.querySelectorAll('form > label')].map( - (node) => node.childNodes -); -assert( - labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') - .length === 2 -); -``` - -Both radio buttons should have a `value` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; -assert(radioButtons.every((btn) => btn.hasAttribute('value'))); -``` - -The `Indoor` radio button's `value` attribute should be set to `indoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const indoorRadioButton = document.querySelector('#indoor'); -assert(indoorRadioButton.getAttribute('value').match(/^indoor$/)); -``` - -The `Outdoor` radio button's `value` attribute should be set to `outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const outdoorRadioButton = document.querySelector('#outdoor'); -assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - - ---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md deleted file mode 100644 index 38ffcd2935691c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: 5f1a89f1190aff21ae42105a -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Like radio buttons, form data for selected checkboxes are `name` / `value` attribute pairs. While the `value` attribute is optional, it's best practice to include it with any checkboxes or radio buttons on the page. - -Add a `value` attribute to each checkbox. For convenience, set each checkbox's `value` attribute to the same value as its `id` attribute. - -# --hints-- - -All three checkboxes should have a `value` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -const checkboxes = [...document.querySelectorAll('input[type="checkbox"]')]; -assert(checkboxes.every((checkbox) => checkbox.hasAttribute('value'))); -``` - -The `value` attribute of the `Loving` checkbox should be set to `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const lovingCheckbox = document.querySelector('#loving'); -assert(lovingCheckbox.getAttribute('value').match(/^loving$/)); -``` - -The `value` attribute of the `Lazy` checkbox should be set to `lazy`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const lazyCheckbox = document.querySelector('#lazy'); -assert(lazyCheckbox.getAttribute('value').match(/^lazy$/)); -``` - -The `value` attribute of the `Energetic` checkbox should be set to `energetic`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const energeticCheckbox = document.querySelector('#energetic'); -assert(energeticCheckbox.getAttribute('value').match(/^energetic$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- -
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md deleted file mode 100644 index 041e41ad3e4883..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 7cf9b03d81a65668421804c3 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -In order for a form's data to be accessed by the location specified in the `action` attribute, you must give the text field a `name` attribute and assign it a value to represent the data being submitted. For example, you could use the following syntax for an email address text field: ``. - -Add the `name` attribute with the value `catphotourl` to your text field. - -# --hints-- - -You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. - -```js -assert($('input').length); -``` - -Your `form` should only contain the `input` element. Remove any additional HTML elements or text within the `form` element. - -```js -assert( - $('form')[0].children.length === 1 && - $('form')[0].innerText.trim().length === 0 -); -``` - -Your `input` element does not have a `name` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('input')[0].hasAttribute('name')); -``` - -Your `input` element should have a `name` attribute with the value `catphotourl`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('input')[0] - .getAttribute('name') - .match(/^catphotourl$/i) -); -``` - -Although you have set the `input` element's `name` attribute to `catphotourl`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md deleted file mode 100644 index e8490875ffc61d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 60eebd07ea685b0e777b5583 -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Welcome to the Registration Form project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(/html\s*>/gi)); -``` - -Your `DOCTYPE` declaration should be at the beginning of your HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md deleted file mode 100644 index 87cb5bf27152fe..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60f027099a15b00485563dd2 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code. - -# --hints-- - -Your `DOCTYPE` declaration should be at the beginning of your HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -Your `html` element should have an opening tag. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Your `html` tags should be in the correct order. - -```js -assert(code.match(/\s*<\/html\s*>/)); -``` - -You should only have one `html` element. - -```js -// Possibly a redundant test, as browser fixes this -assert(document.querySelectorAll('html').length === 1); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md deleted file mode 100644 index b2b546852e23cb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: 60f027c87bc98f050395c139 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Next, add opening and closing `head` and `body` tags within the `html` element. - -# --hints-- - -You should have an opening `head` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `head` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `body` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `body` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -The `head` and `body` elements should be siblings. - -```js -assert(document.querySelector('head')?.nextElementSibling.localName === 'body'); -``` - -The `head` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -The `body` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - - - - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md deleted file mode 100644 index 3a339ecfc73ca7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -id: 60f0286404aefb0562a4fdf9 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Add a `title` element to the `head`, and give your project a title of `Registration Form`. Also, nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value of `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. - -# --hints-- - -Your code should have a `title` element. - -```js -const title = document.querySelector('title'); -assert.exists(title); -``` - -The `title` element should be within the `head` element. - -```js -assert.exists(document.querySelector('head > title')); -``` - -Your project should have a title of `Registration Form`. - -```js -const title = document.querySelector('title'); -assert.equal(title.text.toLowerCase(), 'registration form') -``` - -Remember, the casing and spelling matters for the title. - -```js -const title = document.querySelector('title'); -assert.equal(title.text, 'Registration Form'); -``` - -Your code should have a `link` element. - -```js -assert.match(code, //i)); -``` - -Your `link` element should be within your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert.match(code, / - - --fcc-editable-region-- - - - - - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md deleted file mode 100644 index d1f34bbee73b50..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 60f02e7361b68405e27b62a5 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Within the `body`, provide a heading context for the content, by adding an `h1` with the text `Registration Form`. - -# --hints-- - -You should add the `h1` within the `body`. - -```js -assert.exists(document.querySelector('body > h1')); -``` - -You should give the `h1` the text `Registration Form`. - -```js -assert.equal(document.querySelector('body > h1')?.textContent, 'Registration Form'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - ---fcc-editable-region-- - - - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md deleted file mode 100644 index d1a7d4d474a5ac..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60f030d388cb74067cf291c3 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Below the heading, use the following text within a paragraph element to encourage users to register: - -```md -Please fill out this form with the required information -``` - -# --hints-- - -You should add a `p` element within the `body`. - -```js -assert.exists(document.querySelector('body > p')); -``` - -You should add the `p` element below the `h1`. - -```js -assert.exists(document.querySelector('h1 + p')); -``` - -You should give the `p` element a text of `Please fill out this form with the required information`. - -```js -assert.equal(document.querySelector('p')?.innerText, 'Please fill out this form with the required information'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - ---fcc-editable-region-- - -

Registration Form

- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md deleted file mode 100644 index 87edd92fa66fd8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60f1922fcbd2410527b3bd89 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -To spruce the project up, let us add some CSS. Begin by giving the `body` a `width` of `100%`, and a `height` of `100vh`. - -# --hints-- - -You should use the `body` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); -``` - -You should give the `body` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%'); -``` - -You should give the `body` a `height` of `100vh`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md deleted file mode 100644 index 6bb0a8d3337cb7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60f1a5e2d2c23707a4f9a660 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now, get rid of the horizontal scroll-bar, by setting the `body` default `margin` added by some browsers to `0`. - -# --hints-- - -You should add `margin` within the `body` element selector. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.margin); -``` - -You should give the `margin` a value of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

- - -``` - -```css ---fcc-editable-region-- -body { - width: 100%; - height: 100vh; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md deleted file mode 100644 index d40b0a39fcdf72..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 60f1a9cbd23023082e149fee -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -That is better. Now, make the background easy on the eyes, by changing the `body` `background-color` to `#1b1b32`. Then, to see the text, change the `color` to `#f5f6f7`. - -# --hints-- - -You should add the `background-color` within the `body` element selector. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor); -``` - -You should give the `background-color` a value of `#1b1b32`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor, 'rgb(27, 27, 50)'); -``` - -You should add the `color` within the `body` element selector. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.color); -``` - -You should give the `color` a value of `#f5f6f7`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.color, 'rgb(245, 246, 247)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

- - -``` - -```css ---fcc-editable-region-- -body { - width: 100%; - height: 100vh; - margin: 0; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md deleted file mode 100644 index ded4d1b929560d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 60f5c3e399ff1a05629964e4 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -As suggested by the title, you are creating a form. So, after the `p` element, insert a `form` with an `action` attribute targeting `https://register-demo.freecodecamp.org`. - -# --hints-- - -You should add a `form` element adjacent the `p` element. - -```js -assert.exists(document.querySelector('p + form')); -``` - -You should give the `form` an `action` attribute. - -```js -// Default action points to window location -assert.notEqual(document.querySelector('form')?.action, window?.location?.href); -``` - -You should give the `action` a value of `https://register-demo.freecodecamp.org`. - -```js -assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - ---fcc-editable-region-- - -

Registration Form

-

Please fill out this form with the required information

- - ---fcc-editable-region-- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md deleted file mode 100644 index 71474f9d117627..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60f5cb8875ab6a0610f05071 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Seeing as we plan on having three distinct sections to the form, add three `fieldset` elements within the `form`. - -# --hints-- - -You should add three `fieldset` elements. - -```js -assert.equal(document.querySelectorAll('fieldset')?.length, 3); -``` - -The three `fieldset` elements should be within the `form`. - -```js -assert.equal(document.querySelectorAll('form > fieldset')?.length, 3); -``` - -The three `fieldset` elements should be siblings. - -```js -assert.exists(document.querySelector('fieldset + fieldset + fieldset')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - ---fcc-editable-region-- - -

Registration Form

-

Please fill out this form with the required information

-
- -
- ---fcc-editable-region-- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md deleted file mode 100644 index 3d6b55f57d36fd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 60f5d2776c854e069560fbe6 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -The first `fieldset` will hold name, email, and password fields. Start by adding four `label` elements to the first `fieldset`. - -# --hints-- - -You should add four `label` elements. - -```js -assert.equal(document.querySelectorAll('label')?.length, 4); -``` - -You should add the `label` elements to the first `fieldset`. - -```js -assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

---fcc-editable-region-- -
-
- -
-
-
-
---fcc-editable-region-- - - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md deleted file mode 100644 index b5d35fb902a6a8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 60f5dc35c07ac1078f140916 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Add the following text to the `label` elements: - -- `Enter Your First Name:` -- `Enter Your Last Name:` -- `Enter Your Email:` -- `Create a New Password:` - -# --hints-- - -The first `label` should have the text `Enter Your First Name:`. - -```js -assert.match(document.querySelector('label')?.innerHTML, /Enter Your First Name:/i); -``` - -The second `label` should have the text `Enter Your Last Name:`. - -```js -assert.match(document.querySelector('fieldset > label:nth-child(2)')?.innerHTML, /Enter Your Last Name:/i); -``` - -The third `label` should have the text `Enter Your Email:`. - -```js -assert.match(document.querySelector('fieldset > label:nth-child(3)')?.innerHTML, /Enter Your Email:/i); -``` - -The fourth `label` should have the text `Create a New Password:`. - -```js -assert.match(document.querySelector('fieldset > label:nth-child(4)')?.innerHTML, /Create a New Password:/i); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md deleted file mode 100644 index 6f4dd287a04ccb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: 60f803d5241e6a0433a523a1 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -As `label` elements are `inline` by default, they appear on the same line as the text they are labelling. To make them appear on separate lines, add `display: block` to the `label` element, and add a `margin` of `0.5rem 0`, to separate them from each other. - -# --hints-- - -You should use the `label` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('label')); -``` - -You should add a `display` property of value `block`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.display, 'block'); -``` - -You should add a `margin` property of value `0.5rem 0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.margin, '0.5rem 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
-
-
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md deleted file mode 100644 index 555b0cd32046f0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 60f805f813eaf2049bc2ceea -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Nest an `input` element within each `label`. Be sure to add each `input` after the `label` text, and include a space after the colon. - -# --hints-- - -You should add four `input` elements to the `fieldset` element. - -```js -assert.equal(document.querySelectorAll('fieldset input')?.length, 4); -``` - -You should nest the `input` elements within the `label` elements. - -```js -assert.equal(document.querySelectorAll('label input')?.length, 4); -``` - -You should add the first `input` after the `label` text `Enter Your First Name:`, and include a space after the colon. - -```js -assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML, 'Enter Your First Name: '); -``` - -You should add the second `input` after the `label` text `Enter Your Last Name:`, and include a space after the colon. - -```js -assert.equal(document.querySelectorAll('label')?.[1]?.innerHTML, 'Enter Your Last Name: '); -``` - -You should add the third `input` after the `label` text `Enter Your Email:`, and include a space after the colon. - -```js -assert.equal(document.querySelectorAll('label')?.[2]?.innerHTML, 'Enter Your Email: '); -``` - -You should add the fourth `input` after the `label` text `Create a New Password:`, and include a space after the colon. - -```js -assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML, 'Create a New Password: '); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
- --fcc-editable-region-- -
- - - - -
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md deleted file mode 100644 index 4fbba2c8b18dd3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 60f80e0081e0f2052ae5b505 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Specifying the `type` attribute of a form element is important for the browser to know what kind of data it should expect. If the `type` is not specified, the browser will default to `text`. - -Give the first two `input` elements a `type` attribute of `text`, the third a `type` attribute of `email`, and the fourth a `type` attribute of `password`. - -The `email` type only allows emails with a `@` and a `.` in the domain. -The `password` type obscures the input, and warns if the site does not use HTTPS. - -# --hints-- - -You should give the first `input` element a `type` attribute of `text`. - -```js -assert.equal(document.querySelector('input')?.type, 'text'); -``` - -You should give the second `input` element a `type` attribute of `text`. - -```js -assert.equal(document.querySelectorAll('input')?.[1]?.type, 'text'); -``` - -You should give the third `input` element a `type` attribute of `email`. - -```js -assert.equal(document.querySelectorAll('input')?.[2]?.type, 'email'); -``` - -You should give the fourth `input` element a `type` attribute of `password`. - -```js -assert.equal(document.querySelectorAll('input')?.[3]?.type, 'password'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md deleted file mode 100644 index c28d9dd6642de4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60f81167d0d4910809f88945 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -The first `input` element with a `type` of `submit` is automatically set to submit its nearest parent `form` element. - -To handle the form submission, after the last `fieldset` element add an `input` element with the `type` attribute set to `submit` and the `value` attribute set to `Submit`. - -# --hints-- - -You should add the `input` element after the last `fieldset` element. - -```js -assert.exists(document.querySelectorAll('fieldset')?.[2]?.nextElementSibling?.tagName, 'input'); -``` - -You should give the `input` element a `type` attribute of `submit`. - -```js -assert.exists(document.querySelector('fieldset + input[type="submit"]')); -``` - -You should give the `input` element a `value` attribute of `Submit`. - -```js -assert.exists(document.querySelector('fieldset + input[value="Submit"]')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
-
-
- ---fcc-editable-region-- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md deleted file mode 100644 index 39f41b112f2932..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60f81616cff80508badf9ad5 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -At this point, you should be able to submit the form. However, you might notice not much happens. - -To make the form more interactive, add the `required` attribute to the `input` elements in the first `fieldset`. - -Now, if you try to submit the form without filling in the required fields, you will see an error message. - -# --hints-- - -You should give the first `input` element a `required` attribute. - -```js -assert.equal(document.querySelector('input')?.required, true); -``` - -You should give the second `input` element a `required` attribute. - -```js -assert.equal(document.querySelectorAll('input')?.[1]?.required, true); -``` - -You should give the third `input` element a `required` attribute. - -```js -assert.equal(document.querySelectorAll('input')?.[2]?.required, true); -``` - -You should give the fourth `input` element a `required` attribute. - -```js -assert.equal(document.querySelectorAll('input')?.[3]?.required, true); -``` - -You should not give the `submit` `input` a `required` attribute. - -```js -assert.equal(document.querySelector('input[type="submit"]')?.required, false); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
-
-
- ---fcc-editable-region-- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md deleted file mode 100644 index 21ebdab5c3464d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 60f83e7bfc09900959f41e20 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Certain `type` attribute values come with built-in form validation. For example, `type="email"` requires that the value be a valid email address. - -Add custom validation to the password `input` element, by adding a `minlength` attribute with a value of `8`. Doing so prevents inputs of less than 8 characters being submitted. - -# --hints-- - -You should give the password `input` element a `minlength` attribute. - -```js -assert.notEqual(document.querySelector('input[type="password"]')?.minLength, -1); -``` - -You should give the `minlength` attribute a value of `8`. - -```js -assert.equal(document.querySelector('input[type="password"]')?.minLength, 8); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- -
-
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md deleted file mode 100644 index 35e24ad2bbe726..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 60f84ec41116b209c280ba91 -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -With `type="password"` you can use the `pattern` attribute to define a regular expression that the password must match to be considered valid. - -Add a `pattern` attribute to the password `input` element to require the input match: `[a-z0-5]{8,}` - -The above is a regular expression which matches eight or more lowercase letters or the digits `0` to `5`. Then, remove the `minlength` attribute, and try it out. - -# --hints-- - -You should give the password `input` element a `pattern` attribute. - -```js -assert.isNotEmpty(document.querySelector('input[type="password"]')?.pattern); -``` - -You should give the `pattern` attribute a value of `[a-z0-5]{8,}`. - -```js -assert.equal(document.querySelector('input[type="password"]')?.pattern, '[a-z0-5]{8,}'); -``` - -You should remove the `minlength` attribute from the password `input` element. - -```js -assert.equal(document.querySelector('input[type="password"]')?.minLength, -1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- -
-
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md deleted file mode 100644 index f1257e9a7d5e5d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 60f852f645b5310a8264f555 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Let us go to the next part of the registration form. This section will ask for the type of account the user is opening, and will confirm the user has read the terms and conditions. - -Start by adding three `label` elements to the second `fieldset`. - -# --hints-- - -You should add three `label` elements to the second `fieldset`. - -```js -assert.equal(document.querySelectorAll('fieldset')?.[1]?.querySelectorAll('label')?.length, 3); -``` - -The `label` elements should be siblings. - -```js -assert.exists(document.querySelector('fieldset:nth-child(2)')?.querySelector('label + label + label')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- -
---fcc-editable-region-- -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md deleted file mode 100644 index 3d5acfd9320ccb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60f85a62fb30c80bcea0cedb -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Users will be allowed to chose either a `Personal Account` or `Business Account`. - -To do this, within each of the first two `label` elements, add one `input` element with `type="radio"`. - -# --hints-- - -You should add two `input` elements. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(2) input')?.length, 2); -``` - -You should add one `input` to each of the first two `label` elements. - -```js -assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(1) > input')); -assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(2) > input')); -``` - -You should give both `input` elements a `type` of `radio`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(2) input[type="radio"]')?.length, 2); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md deleted file mode 100644 index 49b94672f91149..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 60f8604682407e0d017bbf7f -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -For the terms and conditions, add an `input` with a `type` of `checkbox` to the third `label` element. Also, as we do not want users to sign up, without having read the terms and conditions, make it `required`. - -# --hints-- - -You should add an `input` to the third `label` element. - -```js -assert.exists(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')); -``` - -You should add a `type` attribute of value `checkbox` to the `input` element. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.type, 'checkbox'); -``` - -You should add a `required` attribute to the `input` element. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.required, true); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md deleted file mode 100644 index 1ebbd3fa5773ac..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60f8618d191b940d62038513 -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Within each corresponding `label` element, and immediately after the `input` element, add a space and add the following text: - -```md -Personal Account -Business Account -I accept the terms and conditions -``` - -# --hints-- - -You should give the first `label` the text `Personal Account`. - -```js -assert.include(document.querySelector('fieldset:nth-child(2) > label')?.innerText, 'Personal Account'); -``` - -You should give the second `label` the text `Business Account`. - -```js -assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText, 'Business Account'); -``` - -You should give the third `label` the text `I accept the terms and conditions`. - -```js -assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText, 'I accept the terms and conditions'); -``` - -You should give the first `label` text one space at the front. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) > label')?.innerText?.[0], ' '); -``` - -You should give the second `label` text one space at the front. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText?.[0], ' '); -``` - -You should give the third `label` text one space at the front. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText?.[0], ' '); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md deleted file mode 100644 index 1c792996eabbaf..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: 60fab4a123ce4b04526b082b -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -You only want one radio input to be selectable at a time. However, the form does not know the radio inputs are related. - -To relate the radio inputs, give them the same `name` attribute with a value of `account-type`. Now, it is not possible to select both radio inputs at the same time. - -# --hints-- - -You should give the first radio input the `name` attribute with a value of `account-type`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type'); -``` - -You should give the second radio input the `name` attribute with a value of `account-type`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type'); -``` - -You should not give the `checkbox` the `name` attribute. - -```js -assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input[type="checkbox"]')?.name); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md deleted file mode 100644 index 32b59890c9da04..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 60fab8367d35de04e5cb7929 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -To finish this `fieldset` off, link the text `terms and conditions` to the following location: - -```md -https://www.freecodecamp.org/news/terms-of-service/ -``` - -# --hints-- - -You should use an `a` element to link to the terms and conditions. - -```js -assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')); -``` - -You should give the `a` element an `href` of `https://www.freecodecamp.org/news/terms-of-service/`. - -```js -assert.match(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.href, /https:\/\/www\.freecodecamp\.org\/news\/terms-of-service\/?/); -``` - -You should only wrap the `a` element around the text `terms and conditions`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.textContent, 'terms and conditions'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md deleted file mode 100644 index dc84c9c45f236d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60fab9f17fa294054b74228c -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Moving on to the final `fieldset`. What if you wanted to allow a user to upload a profile picture? - -Well, the `input` type `file` allows just that. Add a `label` with the text `Upload a profile picture: `, and add an `input` accepting a file upload. - -# --hints-- - -You should add a `label` with the text `Upload a profile picture: `. - -```js -assert.match(document.querySelector('fieldset:nth-child(3) > label')?.innerText, /Upload a profile picture:/i); -``` - -You should nest an `input` element inside the `label` element. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > label > input')); -``` - -You should give the `input` element a `type` of `file`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.type, 'file'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md deleted file mode 100644 index 5c021ff6cdfb54..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60fabf0dd4959805dbae09e6 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Add another `label` after the first, with the text `Input your age (years): `. Then, nest an `input` with the `type` of `number`. - -As we do not want users under the age of 13 to register, add a `min` attribute to the `input` with a value of `13`. Also, we can probably assume users over the age of 120 will not register; add a `max` attribute with a value of `120`. - -Now, if someone tries to submit the form with values outside of the range, a warning will appear, and the form will not submit. Give it a try. - -# --hints-- - -You should add a `label` to the third `fieldset`, after the existing `label`. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > label + label')); -``` - -You should give the `label` the text `Input your age (years): `. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent?.trim(), 'Input your age (years):'); -``` - -You should give the `label` an `input` with `type` of `number`. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')); -``` - -You should give the `input` a `min` attribute with a value of `13`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.min, '13'); -``` - -You should give the `input` a `max` attribute with a value of `120`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.max, '120'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md deleted file mode 100644 index df2945e746c62f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60fac4095512d3066053d73c -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Adding a dropdown to the form is easy with the `select` element. The `select` element is a container for a group of `option` elements, and the `option` element acts as a label for each dropdown option. Both elements require closing tags. - -Start, by adding a `select` element below the two `label` elements. Then, nest 5 `option` elements within the `select` element. - -# --hints-- - -You should add a `select` element to the third `fieldset`. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > select')); -``` - -You should nest 5 `option` elements inside the `select` element. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option')?.length, 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md deleted file mode 100644 index f8c610ba4ee022..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 60fac56271087806def55b33 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Nest the `select` element within a `label` element with the text `How did you hear about us?`. The text should come before the `select` element. - -# --hints-- - -You should nest only the `select` element within a `label` element. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(3) > select')); -``` - -You should give the `label` element the text `How did you hear about us?`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerText?.trim(), 'How did you hear about us?'); -``` - -You should place the text before the `select` element. - -```js -assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerHTML?.replace(/[\t\n]+/g, ''), /^How did you hear about us\?/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md deleted file mode 100644 index 4c728f107c4d3e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60fac8d7fdfaee0796934f20 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -The dropdown options are currently empty. To give them content, add the following text to each subsequent `option` element: - -```md -(select one) -freeCodeCamp News -freeCodeCamp YouTube Channel -freeCodeCamp Forum -Other -``` - -# --hints-- - -You should give the first `option` element the text `(select one)`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.textContent, '(select one)'); -``` - -You should give the second `option` element the text `freeCodeCamp News`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.textContent, 'freeCodeCamp News'); -``` - -You should give the third `option` element the text `freeCodeCamp YouTube Channel`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube Channel'); -``` - -You should give the fourth `option` element the text `freeCodeCamp Forum`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.textContent, 'freeCodeCamp Forum'); -``` - -You should give the fifth `option` element the text `Other`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.textContent, 'Other'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md deleted file mode 100644 index 29aab109d2e65a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 60faca286cb48b07f6482970 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Submitting the form with an option selected would not send a useful value to the server. As such, each `option` needs to be given a `value` attribute. Without which, the text content of the `option` will be submitted to the server. - -Give the first `option` a `value` of `""`, and the subsequent `option` elements `value` attributes from `1` to `4`. - -# --hints-- - -You should give the first `option` a `value` of `""`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.value, ''); -``` - -You should give the second `option` a `value` of `1`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.value, '1'); -``` - -You should give the third `option` a `value` of `2`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.value, '2'); -``` - -You should give the fourth `option` a `value` of `3`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.value, '3'); -``` - -You should give the fifth `option` a `value` of `4`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.value, '4'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md deleted file mode 100644 index 180b4cced2f204..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60facde2d0dc61085b41063f -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -The `textarea` element acts like an `input` element of type `text`, but comes with the added benefit of being able to receive multi-line text, and an initial number of text rows and columns. - -To allow users to register with a bio, add a `label` with the text `Provide a bio:` followed by a `textarea` element, which requires a closing tag. - -# --hints-- - -You should add a `label` element within the third `fieldset`, after the existing `label` elements. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')); -``` - -You should give the `label` a text of `Provide a bio:`. - -```js -assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')?.innerText, /Provide a bio/); -``` - -You should nest a `textarea` element within the `label`. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')); -``` - -You should give the `textarea` element opening and closing tags. - -```js -assert.match(code, /[\s\S]*<\/textarea\s*>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md deleted file mode 100644 index 6e1501b65f7f9b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 60facf914c7b9b08d7510c2c -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -The `textarea` appears too small. To give it an initial size, you can add the `rows` and `cols` attributes. - -Add an initial size of `3` rows and `30` columns. - -# --hints-- - -You should give the `textarea` a `rows` attribute with value `3`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.rows, 3); -``` - -You should give the `textarea` a `cols` attribute with value `30`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.cols, 30); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md deleted file mode 100644 index 2e076a4b303905..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 60fad0a812d9890938524f50 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -To give Campers an idea of what to put in their bio, the `placeholder` attribute is used. The `placeholder` accepts a text value, which is displayed until the user starts typing. - -Give the `textarea` a `placeholder` of `I like coding on the beach...`. - -# --hints-- - -You should give the `textarea` a `placeholder` attribute. - -```js -assert.isNotEmpty(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder); -``` - -You should give the `placeholder` a value of `I like coding on the beach...`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder, 'I like coding on the beach...'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md deleted file mode 100644 index 3c6006efab8339..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -id: 60fad1cafcde010995e15306 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -With form submissions, it is useful, and good practice, to provide each submittable element with a `name` attribute. This attribute is used to identify the element in the form submission. - -Go ahead, and give each submittable element a unique `name` attribute of your choosing. _Except for the two `radio` inputs._ - -# --hints-- - -You should give the `input` expecting a first name a `name` attribtute. _PS I would have chosen `first-name`_ - -```js -assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name); -``` - -You should give the `input` expecting a last name a `name` attribute. _PS I would have chosen `last-name`_ - -```js -assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(2) > input')?.name); -``` - -You should give the `email` a `name` attribute. _PS I would have chosen `email`_ - -```js -assert.isNotEmpty(document.querySelector('input[type="email"]')?.name); -``` - -You should give the `password` a `name` attribute. _PS I would have chosen `password`_ - -```js -assert.isNotEmpty(document.querySelector('input[type="password"]')?.name); -``` - -You should give the `checkbox` a `name` attribute. _PS I would have chosen `terms`_ - -```js -assert.isNotEmpty(document.querySelector('input[type="checkbox"]')?.name); -``` - -You should give the `file` a `name` attribute. _PS I would have chosen `file`_ - -```js -assert.isNotEmpty(document.querySelector('input[type="file"]')?.name); -``` - -You should give the `number` a `name` attribute. _PS I would have chosen `age`_ - -```js -assert.isNotEmpty(document.querySelector('input[type="number"]')?.name); -``` - -You should give the `select` element a `name` attribute. _PS I would have chosen `referrer`_ - -```js -assert.isNotEmpty(document.querySelector('select')?.name); -``` - -You should give the `textarea` element a `name` attribute. _PS I would have chosen `bio`_ - -```js -assert.isNotEmpty(document.querySelector('textarea')?.name); -``` - -You should not give any of the `option` elements a `name` attribute. - -```js -[...document.querySelectorAll('option')]?.forEach(option => assert.isUndefined(option?.name)); -``` - -You should not give any of the `label` elements a `name` attribute. - -```js -[...document.querySelectorAll('label')]?.forEach(label => assert.isUndefined(label?.name)); -``` - -You should not give any of the `fieldset` elements a `name` attribute. - -```js -[...document.querySelectorAll('fieldset')]?.forEach(fieldset => assert.isEmpty(fieldset?.name)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
-
- - - -
-
- - - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md deleted file mode 100644 index 89e54e5776ec04..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60fad6dfcc0d930a59becf12 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -The HTML for the registration form is finished. Now, you can spruce it up a bit. - -Start by changing the font to `Tahoma`, and the font size to `16px` in the `body`. - -# --hints-- - -You should use the `font-family` property to change the font. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily); -``` - -You should set the `font-family` property to `Tahoma`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily, 'Tahoma'); -``` - -You should set the `font-size` property to `16px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css ---fcc-editable-region-- -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - -} ---fcc-editable-region-- - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md deleted file mode 100644 index d48bc1cc62444f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 60fad8e6148f310bba7890b1 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Center the `h1` and `p` elements by giving them a `margin` of `1em auto`. Then, center align the text as well. - -# --hints-- - -You should use a comma-separated element selector to style the `h1` and `p` elements. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('h1, p')); -``` - -You should use a `margin` of `1em auto` to center the `h1` and `p` elements. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.margin, '1em auto'); -``` - -You should use a `text-align` of `center` to center the `h1` and `p` text. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md deleted file mode 100644 index 55678ea615221c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 60fad99e09f9d30c1657e790 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Center the `form` element, by giving it a `margin` of `0 auto`. Then, fix its size to a maximum `width` of `500px`, and a minimum width of `300px`. In between that range, allow it to have a `width` of `60vw`. - -# --hints-- - -You should use a `form` selector to style the `form` element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('form')); -``` - -You should give the `form` a `margin` of `0 auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.margin, '0px auto'); -``` - -You should give the `form` a `max-width` of `500px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.maxWidth, '500px'); -``` - -You should give the `form` a `min-width` of `300px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.minWidth, '300px'); -``` - -You should give the `form` a `width` of `60vw`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md deleted file mode 100644 index 6105e05157b40d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 60fadb18058e950c73925279 -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -During development, it is useful to see the `fieldset` default borders. However, they make the content appear too separated. - -Remove the `border`, and add `2rem` of padding only to the top and bottom of each `fieldset`. Be sure to remove the `padding` from the left and right. - -# --hints-- - -You can use either a value of `none` or `0` to remove the `border`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle('fieldset')?.border, /(none)|(0px)/); -``` - -You should add `padding` of `2rem` to the top and bottom of each `fieldset`. - -```js -const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset') -assert.equal(fieldset?.paddingTop, '2rem'); -assert.equal(fieldset?.paddingBottom, '2rem'); -``` - -You should remove the `padding` from the left and right of each `fieldset`. - -```js -const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset') -assert.equal(fieldset?.paddingLeft, '0px'); -assert.equal(fieldset?.paddingRight, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md deleted file mode 100644 index 3ca4ad5a90c71f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60fadce90f85c50d0bb0dd4f -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -To give the `fieldset` elements a bit of separation, select all but the last `fieldset` element, and give them a `border-bottom` of `3px solid #3b3b4f`. - -# --hints-- - -You can use the `:not(:last-of-type)` pseudo-class to select all but the last element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')); -``` - -You should give the `fieldset` elements a `border-bottom` of `3px solid #3b3b4f`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')?.borderBottom, '3px solid rgb(59, 59, 79)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md deleted file mode 100644 index f9ef288c9507a5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 60fadd972e6ffe0d6858fa2d -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -It would be nicer to have the `label` text appear above the form elements. - -Select all `input`, `textarea`, and `select` elements, and make them take up the full width of their parent elements. - -Also, add `10px` of `margin` to the top of the selected elements. Set the other margins to `0`. - -# --hints-- - -You should use a comma separated element selector to select the `input`, `textarea`, and `select` elements. - -```js -assert.isTrue(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].some(selector => new __helpers.CSSHelp(document).getStyle(selector))); -``` - -You should set the `width` property to `100%`. - -```js -const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.width, '100%'); -``` - -You should set the `margin-top` property to `10px`. - -```js -const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginTop, '10px'); -``` - -You should set the `margin-bottom` property to `0`. - -```js -const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginBottom, '0px'); -``` - -You should set the `margin-left` property to `0`. - -```js -const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginLeft, '0px'); -``` - -You should set the `margin-right` property to `0`. - -```js -const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginRight, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md deleted file mode 100644 index 68ae9b93ac4b3f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 60fadfa2b540b70dcfa8b771 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -For the second `fieldset`, you want the `input` and `label` text to appear on the same line. - -Start, by giving the `input` elements in the second `fieldset` a class of `inline`. - -# --hints-- - -You should give the first `input` a class of `inline`. - -```js -assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[0]?.classList?.contains('inline')); -``` - -You should give the second `input` a class of `inline`. - -```js -assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[1]?.classList?.contains('inline')); -``` - -You should give the third `input` a class of `inline`. - -```js -assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?.contains('inline')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- -
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md deleted file mode 100644 index 56967b2387737d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60fc219d333e37046f474a6e -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Select only the `.inline` elements, and give them `width` of `unset`. This will remove the earlier rule which set all the `input` elements to `width: 100%`. - -# --hints-- - -You should use the `.inline` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.inline')); -``` - -You should give the `.inline` elements a `width` of `unset`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md deleted file mode 100644 index e672b9bb36610a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 60fc22d1e64d1b04cdd4e602 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Add some space between the `.inline` elements and the `label` text, by giving a right `margin` of `0.5em`. Also, set all the other margin to `0`. - -# --hints-- - -You should give the `.inline` elements a `margin-right` of `0.5em`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginRight, '0.5em'); -``` - -You should give the `.inline` elements a `margin-bottom` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginBottom, '0px'); -``` - -You should give the `.inline` elements a `margin-top` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginTop, '0px'); -``` - -You should give the `.inline` elements a `margin-left` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - ---fcc-editable-region-- -.inline { - width: unset; - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md deleted file mode 100644 index 885dbd65185757..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60fc236dc04532052926fdac -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -If you look close enough, you will notice the `.inline` elements are too high on the line. - -To combat this, set the `vertical-align` property to `middle`. - -# --hints-- - -You should set the `vertical-align` property to `middle` for all `.inline` elements. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign, 'middle'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - ---fcc-editable-region-- -.inline { - width: unset; - margin: 0 0.5em 0 0; - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md deleted file mode 100644 index 0880d4809197f6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60ffe1bc30415f042faea936 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -To make the `input` and `textarea` elements blend in with the background theme, set their `background-color` to `#0a0a23`. Then, give them a `1px`, `solid` border with a color of `#0a0a23`. - -# --hints-- - -You should use a comma separated element selector to select the `input` and `textarea` elements. - -```js -const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); -assert.isTrue(['input, textarea', 'textarea, input'].some(selFunc)); -``` - -You should give the `input` and `textarea` elements a `background-color` of `#0a0a23`. - -```js -const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.backgroundColor, 'rgb(10, 10, 35)'); -``` - -You should give the `input` and `textarea` elements a `1px`, `solid` border with a color of `#0a0a23`. - -```js -const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderWidth, '1px'); -assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderStyle, 'solid'); -assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderColor, 'rgb(10, 10, 35)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md deleted file mode 100644 index b318c799b86b18..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 60ffe3936796ac04959285a9 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Currently, if you type in the `input` or `textarea` elements, you will not be able to see the text. Also, their height is too small to be easy to use. - -Fix this, by setting the `color` to `#ffffff`, and setting their `min-height` to `2em`. - -# --hints-- - -You should set the `color` to `#ffffff`. - -```js -const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.color, 'rgb(255, 255, 255)'); -``` - -You should set the `min-height` to `2em`. - -```js -const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minHeight, '2em'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - ---fcc-editable-region-- -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - -} ---fcc-editable-region-- - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md deleted file mode 100644 index c2c81179ef88a4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60ffe4f4ec18cd04dc470c56 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -You want the `select` element to remain with a white background, but now it is not getting the same `min-height` as the `input` and `textarea` elements. - -Move the `min-height` property and value so that all three element types have the same `min-height` value, and the `select` element still has a white background. - -# --hints-- - -You should move the `min-height` property and value to the `input, textarea, select` selector. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight); -``` - -You should give the `input, textarea, select` selector a `min-height` of `2em`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight, '2em'); -``` - -You should remove the `min-height` declaration from the `input, textarea` selector. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minHeight); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css ---fcc-editable-region-- -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; - min-height: 2em; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md deleted file mode 100644 index 1291d7625960f1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -id: 60ffe69ee377c6055e192a46 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -To style the submit button, you can use an _attribute_ selector, which selects an element based on the given attribute value. Here is an example: - -```css -input[name="password"] -``` - -The above selects `input` elements with a `name` attribute value of `password`. - -Now, use the attribute selector to style the submit button with a `display` of `block`, and a `width` of `60%`. - -# --hints-- - -You should use an attribute selector of `input[type="submit"]` to style the submit button. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')); -``` - -You should give the submit button a `display` of `block`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.display, 'block'); -``` - -You should give the submit button a `width` of `60%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; - min-height: 2em; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md deleted file mode 100644 index bb6914a26f9d63..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -id: 60ffe7d8aae62c05bcc9e7eb -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -With a `display` of `block` the submit button sits flush against the left edge of its parent. - -Use the same technique used to center the `form` to center the submit button. - -# --hints-- - -You should give the submit button a `margin` of `0 auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '0px auto'); -``` - -You should not give the submit button a `min-width` or `max-width`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth); -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.maxWidth); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; - min-height: 2em; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - ---fcc-editable-region-- -input[type="submit"] { - display: block; - width: 60%; - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md deleted file mode 100644 index 8f16fbf6753bc0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 60ffe8a5ceb0e90618db06d9 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -To make the submit button look more in line with the rest of the form, give it the same `height` as the other fields (`2em`). Also, increase the `font-size` to `1.1rem`. - -# --hints-- - -You should give the submit button a `height` of `2em`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.height, '2em'); -``` - -You should give the submit button a `font-size` of `1.1rem`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.fontSize, '1.1rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; - min-height: 2em; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - ---fcc-editable-region-- -input[type="submit"] { - display: block; - width: 60%; - margin: 0 auto; - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md deleted file mode 100644 index 57533a264371f2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -id: 60ffe947a868ec068f7850f6 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -To make the submit button appear more distinct, give it a `background-color` of `#3b3b4f`, and a `border-color` of `white`. - -# --hints-- - -You should give the submit button a `background-color` of `#3b3b4f`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.backgroundColor, 'rgb(59, 59, 79)'); -``` - -You should give the submit button a `border-color` of `white`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.borderColor, 'white'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; - min-height: 2em; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - ---fcc-editable-region-- -input[type="submit"] { - display: block; - width: 60%; - margin: 0 auto; - height: 2em; - font-size: 1.1rem; - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md deleted file mode 100644 index d128e7ee0c49ca..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 60ffe9cb47809106eda2f2c9 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Lastly, for the submit button, you want to separate it from the `fieldset` above, and adjust its width to never be below `300px`. - -Change the `margin` property to include `1em` on the top and bottom, and set the width as described above. - -# --hints-- - -You should not change the `width` property. Use the `min-width` property. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%'); -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth); -``` - -You should use the existing `margin` property to include `1em` on the top and bottom. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '1em auto'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; - min-height: 2em; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - ---fcc-editable-region-- -input[type="submit"] { - display: block; - width: 60%; - margin: 0 auto; - height: 2em; - font-size: 1.1rem; - background-color: #3b3b4f; - border-color: white; - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md deleted file mode 100644 index fab1f7c57ab52d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 60ffec2825da1007509ddd06 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Most browsers inject their own default CSS properties and values for different elements. If you look closely, you might be able to notice the file `input` is smaller than the other text `input` elements. By default, a `padding` of `1px 2px` is given to `input` elements you can type in. - -Using another attribute selector, style the `input` with a `type` of `file` to be the same padding as the other `input` elements. - -# --hints-- - -You should use an attribute selector to style the `input` element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="file"]')); -``` - -You should give the `input[type="file"]` a `padding` of `1px 2px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.padding, '1px 2px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; - min-height: 2em; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - -input[type="submit"] { - display: block; - width: 60%; - margin: 1em auto; - height: 2em; - font-size: 1.1rem; - background-color: #3b3b4f; - border-color: white; - min-width: 300px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md deleted file mode 100644 index e6421291d8d0d1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -id: 60ffecefac971607ae73c60f -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Speaking of `padding`, the submit button is sitting at the bottom of the `form` element. Add `2em` of `padding` only to the bottom of the `form`. - -# --hints-- - -You should use the `padding-bottom` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom); -``` - -You should give the `padding-bottom` a value of `2em`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2em'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - ---fcc-editable-region-- -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; - -} ---fcc-editable-region-- - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; - min-height: 2em; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - -input[type="submit"] { - display: block; - width: 60%; - margin: 1em auto; - height: 2em; - font-size: 1.1rem; - background-color: #3b3b4f; - border-color: white; - min-width: 300px; -} - -input[type="file"] { - padding: 1px 2px; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md deleted file mode 100644 index a80d95e23e04e4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md +++ /dev/null @@ -1,284 +0,0 @@ ---- -id: 60ffefd6479a3d084fb77cbc -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Last, but not least, change the text color of the `terms and conditions` link to `#dfdfe2`. - -Well done! You have completed the final part of the _Registration Form_ practice project. - -# --hints-- - -You should use an `a` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('a')); -``` - -You should give the `a` element a `color` of `#dfdfe2`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; - padding-bottom: 2em; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; - min-height: 2em; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - -input[type="submit"] { - display: block; - width: 60%; - margin: 1em auto; - height: 2em; - font-size: 1.1rem; - background-color: #3b3b4f; - border-color: white; - min-width: 300px; -} - -input[type="file"] { - padding: 1px 2px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - Registration Form - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; - padding-bottom: 2em; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; - min-height: 2em; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - -input[type="submit"] { - display: block; - width: 60%; - margin: 1em auto; - height: 2em; - font-size: 1.1rem; - background-color: #3b3b4f; - border-color: white; - min-width: 300px; -} - -input[type="file"] { - padding: 1px 2px; -} - -a { - color: #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md deleted file mode 100644 index 2c2494158b86b6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Start by setting up your HTML structure. Add a `` declaration and an `html` element. Within the `html` element, add a `head` element and a `body` element. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(/html\s*>/gi)); -``` - -Your `DOCTYPE` declaration should be at the beginning of your HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -Your `html` element should have an opening tag. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -You should have an opening `head` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `head` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `body` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `body` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -The `head` and `body` elements should be siblings. - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -The `head` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -The `body` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md deleted file mode 100644 index 55d7b0a3e2d8c1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51579 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Within your `head` element, add a `meta` tag with the `charset` attribute set to `utf-8`. Also add a `title` element with the text `Picasso Painting`. - -# --hints-- - -You should add exactly one `meta` element. - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -Your `meta` element should have a `charset` attribute. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')); -``` - -Your `charset` attribute should be set to `utf-8`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset') === 'utf-8'); -``` - -You should add exactly one `title` element. - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -Your `title` element should have the text `Picasso Painting`. Note that spelling and casing matter. - -```js -assert(document.querySelector('title')?.innerText === 'Picasso Painting'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md deleted file mode 100644 index 91295269f83afc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157a -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -FontAwesome is a library of SVG-powered icons, many of which are freely available to use. You will be using some of these icons in this project, so you will need to link the external stylesheet to your HTML. - -Add a `link` element with a `rel` of `stylesheet` and an `href` of `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -# --hints-- - -You should add another `link` element. - -```js -// We set this to 1 because the CSS link is stripped from the code by our parser. -assert(document.querySelectorAll('link').length === 1); -``` - -Your `link` element should have a `rel` of `stylesheet`. - -```js -assert(document.querySelector('link')?.getAttribute('rel') === 'stylesheet'); -``` - -Your `link` element should have an `href` of -`https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -```js -assert(document.querySelectorAll('link')?.[0]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md deleted file mode 100644 index ccc5eb33759d98..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -To get your painting started, give your `body` element a `background-color` of `rgb(184, 132, 46)`. - -# --hints-- - -You should use the `body` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -Your `body` element should have the `background-color` property set to `rgb (184, 132, 46)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md deleted file mode 100644 index 68d84a86cb9d53..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Within your body tag, add a `div` element. Give it an `id` of `back-wall`. - -# --hints-- - -You should add exactly 1 `div` element. - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -Your `div` element should have the `id` value of `back-wall`. - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md deleted file mode 100644 index b41019e6447cf0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Use an id selector to give the `back-wall` element a `background-color` of `#8B4513`. - -# --hints-- - -You should use a `#back-wall` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -Your `#back-wall` selector should have a `background-color` of `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md deleted file mode 100644 index e3fade65fef04a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Give the `back-wall` element a `width` of `100%` and a `height` of `60%`. - -# --hints-- - -You should set the `width` of the `#back-wall` selector to `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -You should set the `height` of the `#back-wall` selector to `60%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md deleted file mode 100644 index 39970a5e02cf48..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Typically, HTML is rendered in a top-down manner. Elements at the top of the code are positioned at the top of the page. However, many times you may want to move the elements to different positions. You can do this with the `position` attribute. - -Set the `position` attribute for the `back-wall` element to `absolute`. An `absolute` position takes the element out of that top-down document flow and allows you to adjust it relative to its container. - -When an element is manually positioned, you can shift its layout with `top`, `left`, `right`, and `bottom`. Set the `back-wall` to have a `top` value of `0`, and a `left` value of `0`. - - -# --hints-- - -Your `#back-wall` selector should have the `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -Your `#back-wall` selector should have the `top` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -Your `#back-wall` selector should have the `left` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md deleted file mode 100644 index b8a2efb230f592..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -The `z-index` property is used to create "layers" for your HTML elements. If you are familiar with image editing tools, you may have worked with layers before. This is a similar concept. - -Elements with a higher `z-index` value will appear to be layered on top of elements with a lower `z-index` value. This can be combined with the positioning in the previous lesson to create unique effects. - -Since the `back-wall` element will need to appear "behind" the other elements you will be creating, give the `back-wall` element a `z-index` of `-1`. - -# --hints-- - -Your `#back-wall` selector should have the `z-index` property set to `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md deleted file mode 100644 index dc1621c5eaf7a9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Below your `back-wall` element, create a `div` with a `class` of `characters`. This is where you will be creating your painting's characters. - -# --hints-- - -You should only add one new `div` element. - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -Your new `div` element should come after your `#back-wall` element. - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -Your new `div` element should have the `class` set to `characters`. - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
- --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md deleted file mode 100644 index 17137a95e3d7b0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Inside that `characters` element, create another `div` with an `id` of `offwhite-character`. - -# --hints-- - -You should only create 1 additional `div` element. - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -Your new `div` element should be nested in your `.characters` element. - -```js -assert(document.querySelector('.characters div')); -``` - -Your new `div` element should have an `id` of `offwhite-character`. - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md deleted file mode 100644 index ce246f4cc8e4d8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Create four `div` elements inside your `offwhite-character` element. Give those `div` elements the following `id` values, in order: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. - -# --hints-- - -You should add four `div` elements within your `.offwhite-character` element. - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -Your first new `div` element should have the `id` of `white-hat`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -Your second new `div` element should have the `id` of `black-mask`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -Your third new `div` element should have the `id` of `gray-instrument`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -Your fourth new `div` element should have the `id` of `tan-table`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md deleted file mode 100644 index ee55e2f69be2bb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -This character needs eyes. Create two `div` elements in the `black-mask` element. Give them the classes `eyes left` and `eyes right`, in that order. - -# --hints-- - -You should create 2 `div` elements within your `#black-mask` element. - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -Your first new `div` should have the classes `eyes` and `left`. - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -Your second new `div` should have the classes `eyes` and `right`. - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md deleted file mode 100644 index 8bf16e74e07008..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Create some "dots" for the instrument. Add five `div` elements within your `gray-instrument` element. Set the `class` of each to `black-dot`. - -# --hints-- - -You should have five new `div` elements within your `#gray-instrument` element. - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -Your five `div` elements should all have the class `black-dot`. - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md deleted file mode 100644 index e9e0ac1ec8e1d2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Using an `id` selector, create a rule for your `offwhite-character` element. Give it a `width` of `300px`, a `height` of `550px`, and a `background-color` of `GhostWhite`. - -# --hints-- - -You should use the `#offwhite-character` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -Your `#offwhite-character` should have a `width` property set to `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -Your `#offwhite-character` should have a `height` property set to `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -Your `#offwhite-character` should have a `background-color` property set to `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md deleted file mode 100644 index 5db936805c1863..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Move the `offwhite-character` into place by giving it a `position` of `absolute`, a `top` value of `20%`, and a `left` value of `17.5%`. - -# --hints-- - -Your `#offwhite-character` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -Your `#offwhite-character` selector should have a `top` property set to `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -Your `#offwhite-character` selector should have a `left` property set to `17.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md deleted file mode 100644 index f63613b9cf9d31..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Using an `id` selector, style your `white-hat` element. Give it a `width` and `height` of `0`, and a `border-style` of `solid`. - -# --hints-- - -You should use a `#white-hat` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -Your `#white-hat` selector should have a `width` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -Your `#white-hat` selector should have a `height` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -Your `#white-hat` selector should have a `border-style` property set to `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md deleted file mode 100644 index c0e3af83307c0f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -That does not look quite right. Set a `border-width` of `0 120px 140px 180px` to size the hat properly. - -# --hints-- - -Your `#white-hat` selector should have a `border-width` property set to `0 120px 140px 180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md deleted file mode 100644 index 1ca1213abbb0f5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Now you have a large box. Give it a `border-top-color`, `border-right-color`, and `border-left-color` of `transparent`. Set the `border-bottom-color` to `GhostWhite`. This will make it look more like a hat. - -# --hints-- - -Your `#white-hat` selector should have a `border-top-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -Your `#white-hat` selector should have a `border-right-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -Your `#white-hat` selector should have a `border-left-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -Your `#white-hat` selector should have a `border-bottom-color` property set to `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md deleted file mode 100644 index bead4697825b97..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Give the hat a `position` of `absolute`, a `top` value of `-140px`, and a `left` value of `0`. - -# --hints-- - -Your `#white-hat` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -Your `#white-hat` selector should have a `top` property set to `-140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -Your `#white-hat` selector should have a `left` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md deleted file mode 100644 index 5c5c74f64a20c8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Using an `id` selector, create a rule for your `black-mask` element. Give it a `width` of `100%`, a `height` of `50px`, and a `background-color` of `rgb(45, 31, 19)`. - -# --hints-- - -You should have a `#black-mask` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -Your `#black-mask` selector should have a `width` property set to `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -Your `#black-mask` selector should have a `height` property set to `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -Your `#black-mask` selector should have a `background-color` property set to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md deleted file mode 100644 index b273157bdb7a21..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Give the mask a `position` of `absolute`, and a `top` and `left` value of `0`. - -# --hints-- - -Your `#black-mask` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -Your `#black-mask` selector should have a `top` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -Your `#black-mask` selector should have a `left` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md deleted file mode 100644 index c3e0e38be1b3fa..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -To ensure you can see the mask, give it a `z-index` of `1`. - -# --hints-- - -Your `#black-mask` selector should have a `z-index` property set to `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md deleted file mode 100644 index fc0fae2e7a9044..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Using an `id` selector, give your `gray-instrument` element a `width` of `15%`, a `height` of `40%`, and a `background-color` of `rgb(167, 162, 117)`. - -# --hints-- - -You should have a `#gray-instrument` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -Your `#gray-instrument` selector should have a `width` property set to `15%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -Your `#gray-instrument` selector should have a `height` property set to `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -Your `#gray-instrument` selector should have a `background-color` property set to `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md deleted file mode 100644 index a7cbed1d57b168..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Now move it into place with a `position` of `absolute`, a `top` value of `50px`, and a `left` value of `125px`. - -# --hints-- - -Your `#gray-instrument` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -Your `#gray-instrument` selector should have a `top` value set to `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -Your `#gray-instrument` selector should have a `left` value set to `125px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md deleted file mode 100644 index 5d6ef9fbde837d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Set the `z-index` to `1`. - -# --hints-- - -Your `#gray-instrument` selector should have a `z-index` property set to `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md deleted file mode 100644 index b10e323676844e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Use a class selector to create a rule for the `black-dot` elements. Set the `width` to `10px`, the `height` to `10px`, and the `background-color` to `rgb(45, 31, 19)`. - -# --hints-- - -You should have a `.black-dot` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -Your `.black-dot` selector should have a `width` property set to `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -Your `.black-dot` selector should have a `height` property set to `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -Your `.black-dot` selector should have a `background-color` property set to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md deleted file mode 100644 index 22348e36dba01e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -These dots are just a little too square. Give the `black-dot` class a `border-radius` of `50%` to fix it. - -# --hints-- - -Your `.black-dot` selector should have a `border-radius` property set to `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md deleted file mode 100644 index dbfebcb75381c3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Move the dots into place by setting the `display` to `block`, the `margin` to `auto`, and the `margin-top` to `65%`. - -# --hints-- - -Your `.black-dot` selector should have a `display` property set to `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -Your `.black-dot` selector should have a `margin` property set to `auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -Your `.black-dot` selector should have a `margin-top` property set to `65%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md deleted file mode 100644 index f56993c187a85a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Use an id selector to style your `tan-table` element. Give it a `width` of `450px`, a `height` of `140px`, and a `background-color` of `#D2691E`. - -# --hints-- - -You should have a `#tan-table` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -Your `#tan-table` selector should have a `width` property set to `450px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -Your `#tan-table` selector should have a `height` property set to `140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -Your `#tan-table` selector should have a `background-color` property set to `#D2691E`. - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md deleted file mode 100644 index 27ff5626f51292..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Move the table into place by giving it a `position` of `absolute`, a `top` value of `275px`, and a `left` value of `15px`. - -# --hints-- - -Your `#tan-table` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -Your `#tan-table` selector should have a `top` property set to `275px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -Your `#tan-table` selector should have a `left` property set to `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md deleted file mode 100644 index ac81ebf4ae2308..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Give the table a `z-index` of `1`. - -# --hints-- - -Your `#tan-table` selector should have a `z-index` property set to `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md deleted file mode 100644 index 6a179c25d3fa27..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -After your `div#offwhite-character` element, add a `div` with the `id` of `black-character`. - -# --hints-- - -You should add a new `div` element within the `.characters` element. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -Your new `div` element should have the `id` set to `black-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md deleted file mode 100644 index 5d21944a5724fd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Within your new `black-character` element, add three `div` elements with the following `id` values, in order: `black-hat`, `gray-mask`, `white-paper`. - -# --hints-- - -You should have three `div` elements within your `#black-character` element. - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -Your first new `div` element should have the `id` set to `black-hat`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -Your second new `div` element should have the `id` set to `gray-mask`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -Your third new `div` element should have the `id` set to `white-paper`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md deleted file mode 100644 index b2366247374ba5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -The mask needs eyes. Within your `gray-mask` element, add two `div` elements. The first should have the `class` set to `eyes left`, and the second should have the `class` set to `eyes right`. - -# --hints-- - -You should have two `div` elements within your `#gray-mask` element. - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -Your first new `div` element should have the `class` set to `eyes left`. - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -Your second new `div` element should have the `class` set to `eyes right`. - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md deleted file mode 100644 index b98a9cf0d51d79..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Time to use some FontAwesome icons. - -The `i` element is used for idiomatic text, or text that is separate from the "normal" text content. This could be for _italic_ text, such as scientific terms, or for icons like those provided by FontAwesome. - -Within your `white-paper` element, add four `i` elements. Give them all a `class` value of `fas fa-music`. - -This special class is how FontAwesome determines which icon to load. `fas` indicates the category of icons (FontAwesome Solid, here), while `fa-music` selects the specific icon. - -# --hints-- - -You should have four new `i` elements within your `#white-paper` element. - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -All of your `i` elements should have the `class` set to `fas fa-music`. - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md deleted file mode 100644 index 242c3caa6c0b3d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Use an `id` selector to create a rule for your `black-character` element. Set the `width` to `300px`, the `height` to `500px`, and the `background-color` to `rgb(45, 31, 19)`. - -# --hints-- - -You should use a `#black-character` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -Your `#black-character` selector should have a `width` property set to `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -Your `#black-character` selector should have a `height` property set to `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -Your `#black-character` selector should have a `background-color` property to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md deleted file mode 100644 index 3d874506421a85..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Move the `black-character` element into place by setting the `position` to `absolute`, the `top` to `30%`, and the `left` to `59%`. - -# --hints-- - -Your `#black-character` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -Your `#black-character` selector should have a `top` property set to `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -Your `#black-character` selector should have a `left` property set to `59%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md deleted file mode 100644 index c664c139b70f9d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Use an `id` selector to create a rule for your `black-hat` element. Give it a `width` of `0`, a `height` of `0`, and a `border-style` of `solid`. - -# --hints-- - -You should have a `#black-hat` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -Your `#black-hat` selector should have a `width` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -Your `#black-hat` selector should have a `height` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -Your `#black-hat` selector should have a `border-style` property set to `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md deleted file mode 100644 index 4ec131261bbb16..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Just like with your `white-hat`, you should style the border for the `black-hat` element. Give it a `border-top-color`, `border-right-color`, and `border-bottom-color` of `transparent`. Set the `border-left-color` to `rgb(45, 31, 19)`. - -# --hints-- - -Your `#black-hat` selector should have a `border-top-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -Your `#black-hat` selector should have a `border-right-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -Your `#black-hat` selector should have a `border-bottom-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -Your `#black-hat` selector should have a `border-left-color` property set to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md deleted file mode 100644 index 9d9ea3a43af0b5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Now position the `black-hat` element. Give it a `position` of `absolute`, with a `top` of `-150px` and a `left` of `0`. - -# --hints-- - -Your `#black-hat` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -Your `#black-hat` selector should have a `top` property set to `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -Your `#black-hat` selector should have a `left` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md deleted file mode 100644 index 9ab114b49bebfc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Using an `id` selector, style the `gray-mask` element. Give it a `width` of `150px`, a `height` of `150px`, and a `background-color` of `rgb(167, 162, 117)`. - -# --hints-- - -You should have a `#gray-mask` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -Your `#gray-mask` selector should have a `width` property set to `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -Your `#gray-mask` selector should have a `height` property set to `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -Your `#gray-mask` selector should have a `background-color` property set to `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md deleted file mode 100644 index d4a4c61f5f1818..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Position the `gray-mask` by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`. - -# --hints-- - -Your `#gray-mask` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -Your `#gray-mask` selector should have a `top` property set to `-10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -Your `#gray-mask` selector should have a `left` property set to `70px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md deleted file mode 100644 index f2cd5cabe3b386..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Using an `id` selector, create a rule for the `white-paper` element. Set the `width` to `400px`, the `height` to `100px`, and the `background-color` to `GhostWhite`. - -# --hints-- - -You should have a `#white-paper` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -Your `#white-paper` selector should have a `width` property set to `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -Your `#white-paper` selector should have a `height` property set to `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -Your `#white-paper` selector should have a `background-color` property set to `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md deleted file mode 100644 index 09fb494c5cb59b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Give the `white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place. - -# --hints-- - -Your `#white-paper` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -Your `#white-paper` selector should have a `top` property set to `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -Your `#white-paper` selector should have a `left` property set to `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md deleted file mode 100644 index 84cf6626a6ad7a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Set the `z-index` of the `white-paper` to `1`. - -# --hints-- - -Your `#white-paper` selector should have a `z-index` property set to `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md deleted file mode 100644 index a710c91f66bd6a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -FontAwesome icons come with their own styling to define the icon. However, you can still set the styling yourself as well, to change things like the color and size. For now, use a `class` selector to target your `fa-music` icons. Set the `display` to `inline-block`, the `margin-top` to `8%`, and the `margin-left` to `13%`. - -# --hints-- - -You should have a `.fa-music` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -Your `.fa-music` selector should have a `display` property set to `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -Your `.fa-music` selector should have a `margin-top` property set to `8%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -Your `.fa-music` selector should have a `margin-left` property set to `13%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md deleted file mode 100644 index 69ca38a023520c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Below your `black-character` element, add two new `div` elements. These will be the shawl. Give both of them a `class` of `blue`. Then give the first one an `id` of `blue-left`, and the second an `id` of `blue-right`. - -# --hints-- - -You should have two new `div` elements within your `.characters` element. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -Your two new `div` elemnts should have the `class` set to `blue`. - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -Your first new `div` should have an `id` of `blue-left`. - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -Your second new `div` should have an `id` of `blue-right`. - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md deleted file mode 100644 index d9b322e0482a8e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Use a `class` selector to target your new `blue` elements. Set the `background-color` to `#1E90FF`. - -# --hints-- - -You should have a `.blue` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -Your `.blue` selector should have a `background-color` property set to `#1E90FF`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md deleted file mode 100644 index ae9e6cfc3be391..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Select the `blue-left` element with an `id` selector. Give it a `width` of `500px` and a `height` of `300px`. - -# --hints-- - -You should have a `#blue-left` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -Your `#blue-left` selector should have a `width` property set to `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -Your `#blue-left` selector should have a `height` property set to `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md deleted file mode 100644 index 89ddb101527750..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Now set the `position` to `absolute`, the `top` to `20%`, and the `left` to `20%`. - -# --hints-- - -Your `#blue-left` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -Your `#blue-left` selector should have a `top` property set to `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -Your `#blue-left` selector should have a `left` property set to `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md deleted file mode 100644 index 8778c7dcc57bcd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Next, target your `blue-right` element with an `id` selector. Set the `width` to `400px` and the `height` to `300px`. - -# --hints-- - -You should have a `#blue-right` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -Your `#blue-right` selector should have a `width` property set to `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -Your `#blue-right` selector should have a `height` property set to `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md deleted file mode 100644 index 07ff223f6367cb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Give the `blue-right` the correct positioning with `position` set to `absolute`, `top` set to `50%`, and `left` set to `40%`. - -# --hints-- - -Your `#blue-right` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -Your `#blue-right` selector should have a `top` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -Your `#blue-right` selector should have a `left` property set to `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md deleted file mode 100644 index 637a48480f7c48..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Below your `blue` elements, add another `div`. Give it the `id` value of `orange-character`. - -# --hints-- - -You should have a new `div` element within your `characters` element. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -Your new `div` element should have the `id` set to `orange-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md deleted file mode 100644 index c1c59b688a308f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Within that `orange-character` element, add four `div` elements. Give them the `id` values of `black-round-hat`, `eyes-div`, `triangles`, and `guitar`, in order. - -# --hints-- - -You should have four new `div` elements within your `orange-character` element. - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -Your first new `div` element should have an `id` set to `black-round-hat`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -Your second new `div` element should have an `id` set to `eyes-div`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -Your third new `div` element should have an `id` set to `triangles`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -Your fourth new `div` element should have an `id` set to `guitar`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md deleted file mode 100644 index 05b0be2b25522e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -The `eyes-div` element should hold some eyes. Add two `div` elements inside. Give the first a `class` of `eyes left`, and give the second a `class` of `eyes right`. - -# --hints-- - -You should have two `div` elements nested in your `eyes-div`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -The first new `div` should have the `class` set to `eyes left`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -The second new `div` should have the `class` set to `eyes right`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md deleted file mode 100644 index ca5c36c7e978c7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Within the `triangles` div, you will need to add the elements that will become your triangles. Create thirty `div` elements and give each of them the class `triangle`. - -# --hints-- - -You should have 30 `div` elements within your `triangles` element. - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -All 30 of your new `div` elements should have the `class` set to `triangle`. - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md deleted file mode 100644 index d3cebcda48e45a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Within the `guitar` element, create three `div` elements. Give the first two a `class` value of `guitar`. Then give the first an `id` of `guitar-left`, and the second an `id` of `guitar-right`. Add an `id` to the third `div` with the value `guitar-neck`. - -The third `div` should not have the `guitar` class. - -# --hints-- - -You should have three new `div` elements within your `guitar` element. - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -Your first new `div` should have a `class` set to `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -Your first new `div` should have an `id` set to `guitar-left`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -Your second new `div` should have a `class` set to `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -Your second new `div` should have an `id` set to `guitar-right`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -Your third new `div` should have an `id` set to `guitar-neck`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -You should not give the third new `div` a `class` of `guitar`. - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md deleted file mode 100644 index dabfe48af95fb7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Use another FontAwesome icon for your `guitar`. Inside both the `guitar-left` and `guitar-right` elements, add an `i` element and give it a `class` of `fas fa-bars`. - -# --hints-- - -Within your `guitar-left` element, you should add an `i` element. - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -Within your `guitar-right` element, you should add an `i` element. - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -Your two new `i` elements should have the `class` set to `fas fa-bars`. - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- -
- -
-
- -
- --fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md deleted file mode 100644 index 9b136991bffaa5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Select your `orange-character` element with an `id` selector. Give it a `width` of `250px`, a `height` of `550px`, and a `background-color` of `rgb(240, 78, 42)`. - -# --hints-- - -You should have an `#orange-character` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -Your `#orange-character` selector should have a `width` property set to `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -Your `#orange-character` selector should have a `height` property set to `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -Your `#orange-character` selector should have a `background-color` property set to `rgb(240, 78, 42)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md deleted file mode 100644 index f92832aef81d9d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Give the `orange-character` a `position` of `absolute`, a `top` of `25%`, and a `left` of `40%`. - -# --hints-- - -Your `#orange-character` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -Your `#orange-character` selector should have a `top` property set to `25%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -Your `#orange-character` selector should have a `left` property set to `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md deleted file mode 100644 index 41a66838da8e70..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Style your `black-round-hat` element with an `id` selector. Set the `width` to `180px`, the `height` to `150px`, and the `background-color` to `rgb(45, 31, 19)`. - -# --hints-- - -You should have a `#black-round-hat` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -Your `#black-round-hat` selector should have a `width` property set to `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -Your `#black-round-hat` selector should have a `height` property set to `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -Your `#black-round-hat` selector should have a `background-color` property set to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md deleted file mode 100644 index bc32b3da8af573..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -The `black-round-hat` should probably be round. Give it a `border-radius` of `50%` to fix this. - -# --hints-- - -Your `#black-round-hat` selector should have a `border-radius` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md deleted file mode 100644 index 684ddb05638b91..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Move the `black-round-hat` into place with a `position` of `absolute`, a `top` of `-100px`, and a `left` of `5px`. - -# --hints-- - -Your `#black-round-hat` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -Your `#black-round-hat` selector should have a `top` property set to `-100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -Your `#black-round-hat` selector should have a `left` property set to `5px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md deleted file mode 100644 index c3a9f1d9ab43e6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Put the `black-round-hat` on the correct layer with a `z-index` of `-1`. - -# --hints-- - -Your `#black-round-hat` selector should have a `z-index` property set to `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md deleted file mode 100644 index 62a066895360fa..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -Use an `id` selector to create a rule for your `eyes-div` element. Set the `width` to `180px` and the `height` to `50px`. - -# --hints-- - -You should create an `#eyes-div` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -Your `#eyes-div` selector should have a `width` property set to `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -Your `#eyes-div` selector should have a `height` property set to `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md deleted file mode 100644 index 6e88b2914acd4d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Now move the `eyes-div` into position with `position` set to `absolute`, `top` set to `-40px`, and `left` set to `20px`. - -# --hints-- - -Your `#eyes-div` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -Your `#eyes-div` selector should have a `top` property set to `-40px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -Your `#eyes-div` selector should have a `left` property set to `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md deleted file mode 100644 index 6bde742748f956..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Give the `eyes-div` a `z-index` of `3`. - -# --hints-- - -Your `#eyes-div` selector should have a `z-index` property set to `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md deleted file mode 100644 index 71aecaf68e695d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -Now use a `class` selector to target `guitar`. This will style the two "halves" of your guitar. Set the `width` to `150px`, the `height` to `120px`, the `background-color` to `Goldenrod`, and the `border-radius` to `50%`. - -# --hints-- - -You should create a `.guitar` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -Your `.guitar` selector should have a `width` property set to `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -Your `.guitar` selector should have a `height` property set to `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -Your `.guitar` selector should have a `background-color` property set to `Goldenrod`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -Your `.guitar` selector should have a `border-radius` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md deleted file mode 100644 index d86af8e1424c0f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Select the `id` with value `guitar-left`, and set the `position` to `absolute` and the `left` to `0px`. - -# --hints-- - -You should create a new `#guitar-left` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -Your `#guitar-left` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md deleted file mode 100644 index 906f2e34894887..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Select the `id` with value `guitar-right`, and also set `position` to `absolute`. This time, set `left` to `100px`. - -# --hints-- - -You should create a new `#guitar-right` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -Your `#guitar-right` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -Your `#guitar-right` selector should have a `left` property set to `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md deleted file mode 100644 index 3cb8fbddd8d96a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Now you need to move the bar icons into place. Create a `class` selector for the `fa-bars` class. Set the `display` to `block`, the `margin-top` to `30%`, and the `margin-left` to `40%`. - -# --hints-- - -You should create a `.fa-bars` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -Your `.fa-bars` selector should have a `display` property set to `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -Your `.fa-bars` selector should have a `margin-top` property set to `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -Your `.fa-bars` selector should have a `margin-left` property set to `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md deleted file mode 100644 index a54bda5ecc9039..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -Use an `id` selector to create a `guitar-neck` rule. Set the `width` to `200px`, the `height` to `30px`, and the `background-color` to `#D2691E`. - -# --hints-- - -You should create a `#guitar-neck` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -Your `#guitar-neck` selector should have a `width` property set to `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -Your `#guitar-neck` selector should have a `height` property set to `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -Your `#guitar-neck` selector should have a `background-color` property set to `#D2691E`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md deleted file mode 100644 index ffed208de97880..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Now move the `guitar-neck` with a `position` of `absolute`, a `top` value of `45px`, and a `left` value of `200px`. - -# --hints-- - -Your `#guitar-neck` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -Your `#guitar-neck` selector should have a `top` property set to `45px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -Your `#guitar-neck` selector should have a `left` property set to `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md deleted file mode 100644 index 8716af059fcd06..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Give the `guitar-neck` a `z-index` of `3`. - -# --hints-- - -Your `#guitar-neck` selector should have a `z-index` property set to `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md deleted file mode 100644 index 571f7988ee9cd6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Time to style your `eyes` elements. Use a `class` selector to set the `width` to `35px`, the `height` to `20px`, the `background-color` to `#8B4513`, and the `border-radius` to `20px 50%`. - -# --hints-- - -You should create a `.eyes` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -Your `.eyes` selector should have a `width` property set to `35px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -Your `.eyes` selector should have a `height` property set to `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -Your `.eyes` selector should have a `background-color` property set to `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -Your `.eyes` selector should have a `border-radius` property set to `20px 50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md deleted file mode 100644 index ae3f6cd2287deb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ /dev/null @@ -1,382 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Target the `class` with value `right` and set the `position` to `absolute`, `top` to `15px`, and `right` to `30px`. - -# --hints-- - -You should create a `.right` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -Your `.right` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -Your `.right` selector should have a `top` property set to `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -Your `.right` selector should have a `right` property set to `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md deleted file mode 100644 index dcbabcdb878b10..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -For the `class` with value `left`, create the selector and set the `position` to `absolute`, the `top` to `15px`, and the `left` to `30px`. - -# --hints-- - -You should create a new `.left` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -Your `.left` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -Your `.left` selector should have a `top` property set to `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -Your `.left` selector should have a `left` property set to `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md deleted file mode 100644 index b561680d5017fc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ /dev/null @@ -1,739 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -One last step. The FontAwesome icons are a little too small. Target all of them with a `class` selector for `fas`, and set the `font-size` to `30px`. - -With that, your Picasso painting is complete! - -# --hints-- - -You should create a `.fas` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -Your `.fas` selector should have a `font-size` property set to `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - -.fas { - font-size: 30px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md deleted file mode 100644 index a5188d3c2b8100..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Go ahead and link your CSS file now, even though you have not written any CSS yet. - -Add a `link` element with a `rel` of `stylesheet`, a `type` of `text/css`, and an `href` of `styles.css`. - -# --hints-- - - -Your code should have a `link` element. - -```js -assert.match(code, //i)); -``` - -Your `link` element should be within your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert.match(code, / - - - - Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md deleted file mode 100644 index 4623a3131c09d2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Adjust the layout of the `triangle` elements with a `display` of `inline-block`. - -# --hints-- - -Your `.triangle` selector should have a `display` property set to `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md deleted file mode 100644 index 8cd02f39d880a9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Give your `triangle` elements the correct color. Set the `border-top-color`, `border-bottom-color`, and `border-left-color` to `transparent`. Set the `border-right-color` to `Gold`. - -# --hints-- - -Your `.triangle` selector should have a `border-top-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -Your `.triangle` selector should have a `border-bottom-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -Your `.triangle` selector should have a `border-left-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -Your `.triangle` selector should have a `border-right-color` property set to `Gold`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md deleted file mode 100644 index 361b2ffc376947..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -Style the border of your `triangle` elements. Set the `border-style` to `solid` and the `border-width` to `42px 45px 45px 0`. - -# --hints-- - -Your `.triangle` selector should have a `border-style` property set to `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -Your `.triangle` selector should have a `border-width` property set to `42px 45px 45px 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md deleted file mode 100644 index f7e92d7fa0d28c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Create a `class` selector for your `triangle` elements. Set the `width` to `0` and the `height` to `0`. - -# --hints-- - -You should create a `.triangle` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -Your `.triangle` selector should have a `width` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -Your `.triangle` selector should have a `height` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md deleted file mode 100644 index 6fc2462a445fb0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Target your `triangles` element with an `id` selector. Set the `width` to `250px` and the `height` to `550px`. - -# --hints-- - -You should add a `#triangles` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -Your `#triangles` selector should have a `width` property set to `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -Your `#triangles` selector should have a `height` property set to `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md deleted file mode 100644 index 658d21853684e3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Now use an `id` selector for `guitar`. Set the `width` to `100%`, and the `height` to `100px`. - -# --hints-- - -You should create a `#guitar` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -Your `#guitar` selector should have a `width` property set to `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -Your `#guitar` selector should have a `height` property set to `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md deleted file mode 100644 index 7abb6047ce00df..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -In the same `#guitar` selector, set the `position` to `absolute`, the `top` to `120px`, and the `left` to `0px`. - -# --hints-- - -Your `#guitar` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -Your `#guitar` selector should have a `top` property set to `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -Your `#guitar` selector should have a `left` property set to `0px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md deleted file mode 100644 index 29f21bbfc0def9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -Give the `#guitar` rule a `z-index` of `3`. - -# --hints-- - -Your `#guitar` selector should have a `z-index` property set to `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md deleted file mode 100644 index 20ecc4ee123477..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Set the `border-width` of the `black-hat` to `150px 0 0 300px`. - -# --hints-- - -Your `#black-hat` selector should have a `border-width` property set to `150px 0 0 300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md deleted file mode 100644 index 2bac65664c8414..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 61fd5a93fd62bb35968adeab -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Set up your HTML with the `DOCTYPE`, `html`, `head`, and `body` elements. Give your `head` element the appropriate `meta` elements for the `charset` and `viewport`, a `title` element with an appropriate title, and a `link` element for your stylesheet. - -# --hints-- - -Your code should have a `` declaration. - -```js -assert(code.match(//i)); -``` - -Your code should have an `html` element. - -```js -assert.equal(document.querySelectorAll('html')?.length, 1); -``` - -Your code should have a `head` element within the `html` element. - -```js -assert.equal(document.querySelectorAll('head')?.length, 1); -``` - -Your code should have a `body` element within the `html` element. - -```js -assert.equal(document.querySelectorAll('body')?.length, 1); -``` - -Your `head` element should come before your `body` element. - -```js -assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD'); -``` - -You should have two `meta` elements. - -```js -const meta = document.querySelectorAll('meta'); -assert.equal(meta?.length, 2); -``` - -One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); -assert.exists(target); -``` - -The other `meta` element should have the `charset` attribute set to `UTF-8`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -assert.exists(target); -``` - -Your code should have a `title` element. - -```js -const title = document.querySelector('title'); -assert.exists(title); -``` - -Your `title` should have some text. - -```js -const title = document.querySelector('title'); -assert.isAtLeast(title?.textContent?.length, 1); -``` - -Your code should have a `link` element. - -```js -assert(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert.match(code, / - - - - - Balance Sheet - - ---fcc-editable-region-- - - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md deleted file mode 100644 index b9b28c13c5a3e9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 61fd66c687e610436494c6f1 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Within your `section` element, add an `h1` element with a nested `span` element. - -# --hints-- - -Your `section` element should have an `h1` element. - -```js -assert(document.querySelector('section')?.children?.[0]?.localName === 'h1'); -``` - -Your `h1` element should have a `span` element. - -```js -assert(document.querySelector('h1')?.children?.[0]?.localName === 'span'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
---fcc-editable-region-- -
-
---fcc-editable-region-- -
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md deleted file mode 100644 index 91114165f62598..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 61fd67a656743144844941cb -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Screen readers announce HTML elements based on the document flow. We will eventually want the balance sheet to have a heading of "Balance Sheet" and a subheading of "AcmeWidgetCorp". However, this order does not make sense if announced by a screen reader. - -Give your existing `span` the `class` attribute set to `flex`, and add two `span` elements within it. Give the first the text `AcmeWidgetCorp`. Give the second the text `Balance Sheet`. You will use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader. - -# --hints-- - -Your existing span element should have the `class` attribute set to `flex`. - -```js -assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex')); -``` - -Your existing `span` element should have two new `span` elements within it. - -```js -assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span'); -assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span'); -``` - -Your new `span` elements should not have a `class` attribute. - -```js -assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length); -assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length); -``` - -Your first new `span` element should have the text `AcmeWidgetCorp`. - -```js -assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp'); -``` - -Your second new `span` element should have the text `Balance Sheet`. - -```js -assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

---fcc-editable-region-- - - ---fcc-editable-region-- -

-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md deleted file mode 100644 index 0c58d222145ad9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 61fd6ab779390f49148773bb -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Below your `h1` element, create a `div` element. Give it an `id` attribute set to `years`. You want this particular element to be hidden from screen readers, so give it the `aria-hidden` attribute set to `true`. - -# --hints-- - -You should create a new `div` element after your `h1` element. - -```js -assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div'); -``` - -Your new `div` element should have an `id` attribute set to `years`. - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'years'); -``` - -Your new `div` element should have the `aria-hidden` attribute set to `true`. - -```js -assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md deleted file mode 100644 index c748a499e57eb5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 61fd6b7c83dbf54a08cf0498 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Within your `div` element, add three `span` elements. Give each of them a `class` attribute set to `year`, and add the following text (in order): `2019`, `2020`, and `2021`. - -# --hints-- - -Your `div` element should have three `span` elements. - -```js -assert(document.querySelector('div')?.children?.length === 3); -``` - -Each `span` element should have a `class` attribute set to `year`. - -```js -const spans = [...document.querySelector('div')?.children]; -spans.forEach(span => assert(span?.classList?.contains('year'))); -``` - -Your first `span` should have the text `2019`. - -```js -assert(document.querySelector('div')?.children?.[0]?.textContent === '2019'); -``` - -Your second `span` should have the text `2020`. - -```js -assert(document.querySelector('div')?.children?.[1]?.textContent === '2020'); -``` - -Your third `span` should have the text `2021`. - -```js -assert(document.querySelector('div')?.children?.[2]?.textContent === '2021'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md deleted file mode 100644 index cef21895c3b400..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 61fd6cc9475a784b7776233e -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Below your existing `div` element, add a new `div` element with a `class` set to `table-wrap`. This will be the container for your tables. - -Within that, add three `table` elements. You will be using CSS to style these into a single table, but using separate tables will help screen readers understand the document flow. - -# --hints-- - -You should create a new `div` element. - -```js -assert(document.querySelectorAll('div')?.length === 2); -``` - -Your new `div` element should have the `class` set to `table-wrap`. - -```js -assert(document.querySelector('.table-wrap')?.localName === 'div'); -``` - -Your `.table-wrap` element should come after your existing `div`. - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap')); -``` - -Your `.table-wrap` element should have three `table` elements. - -```js -const children = [...(document.querySelector('.table-wrap')?.children ?? [])]; -assert(children?.length === 3); -children.forEach(child => assert(child?.localName === 'table')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- ---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd70336ebb3e4f62ee81ba.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd70336ebb3e4f62ee81ba.md deleted file mode 100644 index 2bfa71d3a1936f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd70336ebb3e4f62ee81ba.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 61fd70336ebb3e4f62ee81ba -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -HTML tables use the `caption` element to describe what the table is about. The `caption` element should always be the first child of a `table`, but can be positioned with the `caption-side` CSS property. - -Add a `caption` element to your first `table`, and give it the text `Assets`. - -# --hints-- - -Your first `table` element should have a `caption` element. - -```js -assert(document.querySelector('table')?.children?.[0]?.localName === 'caption'); -``` - -Your `caption` element should have the text `Assets`. - -```js -assert(document.querySelector('caption')?.textContent === 'Assets'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
---fcc-editable-region-- - -
---fcc-editable-region-- - -
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md deleted file mode 100644 index 823c437882781c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: 61fd719788899952e67692b9 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -The `thead` and `tbody` elements are used to indicate which portion of your table is the header, and which portion contains the primary data or content. - -Add a `thead` and `tbody` to your first `table`, below the `caption` element. - -# --hints-- - -Your first `table` element should have a `thead` element. - -```js -assert(document.querySelectorAll('table')?.[0]?.querySelector('thead')); -``` - -Your first `table` element should have a `tbody` element. - -```js -assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody')); -``` - -Your `thead` element should be immediately below your `caption` element. - -```js -assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead'); -``` - -Your `tbody` element should be immediately below your `thead` element. - -```js -assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
---fcc-editable-region-- - - -
Assets
---fcc-editable-region-- - -
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md deleted file mode 100644 index 4fc895fe9c305e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: 61fd71d596e8f253b9408b39 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -The `tr` element is used to indicate a table row. Add a `tr` element within your `thead` element. In your new `tr` element, add a `td` element, followed by three `th` elements. - -The `td` element indicates a data cell, while the `th` element indicates a header cell. - -# --hints-- - -Your `thead` element should have a `tr` element. - -```js -assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr'); -``` - -Your `tr` element should have a `td` element as the first child. - -```js -assert(document.querySelector('tr')?.children?.[0]?.localName === 'td'); -``` - -Your `tr` element should have three `th` elements, after the `td` element. - -```js -assert(document.querySelector('tr')?.children?.[1]?.localName === 'th'); -assert(document.querySelector('tr')?.children?.[2]?.localName === 'th'); -assert(document.querySelector('tr')?.children?.[3]?.localName === 'th'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - ---fcc-editable-region-- - - ---fcc-editable-region-- - - -
Assets
- -
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md deleted file mode 100644 index bbada4c7c96ca4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 61fd75ea7f663457612dba02 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Within each of your new `th` elements, nest a `span` element with the `class` set to `sr-only year`. Give them the following text (in order): `2019`, `2020`, and `2021`. - -Give your third `th` element the `class` attribute set to `current`. - -Leave the `td` element empty. This element exists only to ensure your table has a four-column layout and associate the headers with the correct columns. - -# --hints-- - -Each of your `th` elements should have a `span` element. - -```js -const ths = [...document.querySelectorAll('th')]; -ths?.forEach(th => { - assert(th?.children?.length === 1); - assert(th?.children?.[0]?.localName === 'span'); -}); -``` - -Each of your new `span` elements should have the `class` attribute set to `sr-only year`. - -```js -const ths = [...document.querySelectorAll('th')]; -ths?.forEach(th => { - assert(th?.children?.[0]?.classList?.contains('sr-only')); - assert(th?.children?.[0]?.classList?.contains('year')); -}); -``` - -Your first `span` element should have the text `2019`. - -```js -assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019'); -``` - -Your second `span` element should have the text `2020`. - -```js -assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020'); -``` - -Your third `span` element should have the text `2021`. - -```js -assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021'); -``` - -Your third `th` element should have the `class` set to `current`. - -```js -assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current')); -``` - -Your `td` element should be empty. - -```js -assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === ''); -assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - ---fcc-editable-region-- - - - - - - - - ---fcc-editable-region-- - - -
Assets
- -
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md deleted file mode 100644 index 2d190474a185bb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -id: 61fd7648a7ba2e5882436831 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Within your `tbody` element, add four `tr` elements. Give the first three a `class` attribute set to `data`, and the fourth a `class` attribute set to `total`. - -# --hints-- - -Your `tbody` element should have four `tr` elements. - -```js -const children = [...document.querySelector('tbody')?.children]; -assert(children?.length === 4); -children.forEach(child => assert(child?.localName === 'tr')); -``` - -Your first three `tr` elements should have the `class` attribute set to `data`. - -```js -const children = [...document.querySelector('tbody')?.children]; -children.forEach((child, index) => { - if (index < 3) { - assert(child?.classList?.contains('data')); - } -}); -``` - -Your fourth `tr` element should have the `class` attribute set to `total`. - -```js -const children = [...document.querySelector('tbody')?.children]; -assert(children?.[3]?.classList?.contains('total')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - ---fcc-editable-region-- - - ---fcc-editable-region-- -
Assets
201920202021
- -
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md deleted file mode 100644 index 6a431a6c9cd391..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 61fd778081276b59d59abad6 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -In your first `tr`, add a `th` element with the text `Cash This is the cash we currently have on hand.`. Wrap all of that text except `Cash ` in a `span` element with the `class` set to `description`. - -Following that, add three `td` elements with the following text (in order): `$25`, `$30`, `$28`. Give the third `td` element a `class` attribute set to `current`. - -# --hints-- - -Your first `tr` should have a `th` element. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')); -``` - -Your `th` element should have the text `Cash This is the cash we currently have on hand.`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.'); -``` - -You should wrap the text `This is the cash we currently have on hand.` in a `span` element. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.'); -``` - -Your `span` element should have the `class` attribute set to `description`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description')); -``` - -You should have three `td` elements. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3); -``` - -Your first `td` element should have the text `$25`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25'); -``` - -Your second `td` element should have the text `$30`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30'); -``` - -Your third `td` element should have the text `$28`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28'); -``` - -Your third `td` element should have the `class` set to `current`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - ---fcc-editable-region-- - - ---fcc-editable-region-- - - - - - - - -
Assets
201920202021
- -
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md deleted file mode 100644 index 1bf152cc1b3455..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 61fd77f7ad2aeb5ae34d07d6 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -In your second `tr` element, add a `th` element with the text `Checking Our primary transactional account.`. Wrap that text, except for `Checking `, in a `span` element with the `class` attribute set to `description`. - -Following that, add three `td` elements with the following text (in order): `$54`, `$56`, `$53`. Give the third `td` element a `class` attribute set to `current`. - -# --hints-- - -Your second `tr` should have a `th` element. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')); -``` - -Your `th` element should have the text `Checking Our primary transactional account.`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.'); -``` - -You should wrap the text `Our primary transactional account.` in a `span` element. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.'); -``` - -Your `span` element should have the `class` attribute set to `description`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description')); -``` - -You should have three `td` elements. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3); -``` - -Your first `td` element should have the text `$54`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54'); -``` - -Your second `td` element should have the text `$56`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56'); -``` - -Your third `td` element should have the text `$53`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53'); -``` - -Your third `td` element should have the `class` set to `current`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - ---fcc-editable-region-- - - ---fcc-editable-region-- - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
- -
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md deleted file mode 100644 index 95fe235ac53570..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 61fd78621573aa5e8b512f5e -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -In your third `tr` element, add a `th` element with the text `Savings Funds set aside for emergencies.`. Wrap that text, except for `Savings `, in a `span` element with the `class` attribute set to `description`. - -Following that, add three `td` elements with the following text (in order): `$500`, `$650`, `$728`. Give the third `td` element a `class` attribute set to `current`. - -# --hints-- - -Your third `tr` should have a `th` element. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')); -``` - -Your `th` element should have the text `Savings Funds set aside for emergencies.`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.'); -``` - -You should wrap the text `Funds set aside for emergencies.` in a `span` element. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.'); -``` - -Your `span` element should have the `class` attribute set to `description`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description')); -``` - -You should have three `td` elements. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3); -``` - -Your first `td` element should have the text `$500`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500'); -``` - -Your second `td` element should have the text `$650`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650'); -``` - -Your third `td` element should have the text `$728`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728'); -``` - -Your third `td` element should have the `class` set to `current`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - ---fcc-editable-region-- - - ---fcc-editable-region-- - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
- -
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md deleted file mode 100644 index a0cc86d1820f22..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 61fd7a160ed17960e971f28b -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -In your fourth `tr` element, add a `th` element with the text `Total Assets`. Wrap the text `Assets` in a `span` element with the `class` attribute set to `sr-only`. - -Following that, add three `td` elements with the following text (in order): `$579`, `$736`, `$809`. Give the third `td` element a `class` attribute set to `current`. - -# --hints-- - -Your fourth `tr` should have a `th` element. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')); -``` - -Your `th` element should have the text `Total Assets`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets'); -``` - -You should wrap the text `Assets` in a `span` element. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Assets'); -``` - -Your `span` element should have the `class` attribute set to `sr-only`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only')); -``` - -You should have three `td` elements. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3); -``` - -Your first `td` element should have the text `$579`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579'); -``` - -Your second `td` element should have the text `$736`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736'); -``` - -Your third `td` element should have the text `$809`. - -```js -assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - ---fcc-editable-region-- - - ---fcc-editable-region-- - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
- -
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md deleted file mode 100644 index 5eecaafadd1f2d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -id: 61fd7b3fcaa5406257abc5d1 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Time to move on to your second table. Start by giving it a `caption` element set to `Liabilities`. Then add your `thead` and `tbody`. - -# --hints-- - -Your second `table` element should have a `caption` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption'); -``` - -Your `caption` element should have the text `Liabilities`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities'); -``` - -Your second `table` element should have a `thead` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')); -``` - -Your second `table` element should have a `tbody` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')); -``` - -Your `thead` element should be immediately below your `caption` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.nextElementSibling?.localName === 'thead'); -``` - -Your `tbody` element should be immediately below your `thead` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
---fcc-editable-region-- - -
---fcc-editable-region-- - -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md deleted file mode 100644 index f5f4c5de965707..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 61fd8e491324ce717da97ffe -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements. - -# --hints-- - -Your `thead` element should have a `tr` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr'); -``` - -Your `tr` element should have a `td` element as the first child. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td'); -``` - -Your `tr` element should have three `th` elements, after the `td` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th'); -assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[2]?.localName === 'th'); -assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[3]?.localName === 'th'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
---fcc-editable-region-- - - - - - - -
Liabilities
---fcc-editable-region-- - -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md deleted file mode 100644 index 304c3e45f3de06..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 61fd8fd08af43372f02952d0 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Give each `th` element a `span` element with the class set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`. - -# --hints-- - -Each of your `th` elements should have a `span` element. - -```js -const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')]; -ths?.forEach(th => { - assert(th?.children?.length === 1); - assert(th?.children?.[0]?.localName === 'span'); -}); -``` - -Each of your new `span` elements should have the `class` attribute set to `sr-only`. - -```js -const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')]; -ths?.forEach(th => { - assert(th?.children?.[0]?.classList?.contains('sr-only')); -}); -``` - -Your first `span` element should have the text `2019`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019'); -``` - -Your second `span` element should have the text `2020`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020'); -``` - -Your third `span` element should have the text `2021`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021'); -``` - -Your `td` element should be empty. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.textContent === ''); -assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.children?.length === 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
---fcc-editable-region-- - - - - - - - - - - - - -
Liabilities
---fcc-editable-region-- - -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md deleted file mode 100644 index b76ae6fb42d798..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 61fd9126aa72a474301fc49f -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Within the `tbody` element, add four `tr` elements. Give the first three the `class` attribute set to `data`, and the fourth the `class` attribute set to `total`. - -# --hints-- - -Your `tbody` element should have four `tr` elements. - -```js -const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children]; -assert(children?.length === 4); -children.forEach(child => assert(child?.localName === 'tr')); -``` - -Your first three `tr` elements should have the `class` attribute set to `data`. - -```js -const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children]; -children.forEach((child, index) => { - if (index < 3) { - assert(child?.classList?.contains('data')); - } -}); -``` - -Your fourth `tr` element should have the `class` attribute set to `total`. - -```js -const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children]; -assert(children?.[3]?.classList?.contains('total')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
---fcc-editable-region-- - - - - - - - - - - - - -
Liabilities
201920202021
---fcc-editable-region-- - -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md deleted file mode 100644 index 556edae19cbb89..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 61fd933ba685de776a94997e -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Within the first `tr`, add a `th` element with the text `Loans The outstanding balance on our startup loan.`. Wrap that text, except for `Loans `, within a `span` element with the `class` set to `description`. - -Add three `td` elements below that, and give them the following text, in order: `$500`, `$250`, and `$0`. Give the third `td` element a `class` set to `current`. - -# --hints-- - -Your first `tr` should have a `th` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')); -``` - -Your `th` element should have the text `Loans The outstanding balance on our startup loan.`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.'); -``` - -You should wrap the text `The outstanding balance on our startup loan.` in a `span` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.'); -``` - -Your `span` element should have the `class` attribute set to `description`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description')); -``` - -You should have three `td` elements. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3); -``` - -Your first `td` element should have the text `$500`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$500'); -``` - -Your second `td` element should have the text `$250`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250'); -``` - -Your third `td` element should have the text `$0`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0'); -``` - -Your third `td` element should have the `class` set to `current`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - ---fcc-editable-region-- - - - - - - - - ---fcc-editable-region-- - -
Liabilities
201920202021
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md deleted file mode 100644 index fd5863887492e0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 61fd94056e0355785fbba4d3 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Within the second `tr`, add a `th` element with the text `Expenses Annual anticipated expenses, such as payroll.`. Wrap that text, except for `Expenses `, within a `span` element with the `class` set to `description`. - -Add three `td` elements below that, and give them the following text, in order: `$200`, `$300`, and `$400`. Give the third `td` element a `class` set to `current`. - -# --hints-- - -Your second `tr` should have a `th` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')); -``` - -Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.'); -``` - -You should wrap the text `Annual anticipated expenses, such as payroll.` in a `span` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.'); -``` - -Your `span` element should have the `class` attribute set to `description`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description')); -``` - -You should have three `td` elements. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3); -``` - -Your first `td` element should have the text `$200`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200'); -``` - -Your second `td` element should have the text `$300`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300'); -``` - -Your third `td` element should have the text `$400`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400'); -``` - -Your third `td` element should have the `class` set to `current`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - ---fcc-editable-region-- - - - - - - - - - - - - ---fcc-editable-region-- - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md deleted file mode 100644 index 6b3594e3a35066..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 61fd986ddbcbd47ba8fbc5ec -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Within the third `tr`, add a `th` element with the text `Credit The outstanding balance on our credit card.`. Wrap that text, except for `Credit `, within a `span` element with the `class` set to `description`. - -Add three `td` elements below that, and give them the following text, in order: `$50`, `$50`, and `$75`. Give the third `td` element a `class` set to `current`. - -# --hints-- - -Your third `tr` should have a `th` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')); -``` - -Your `th` element should have the text `Credit The outstanding balance on our credit card.`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.'); -``` - -You should wrap the text `The outstanding balance on our credit card.` in a `span` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.'); -``` - -Your `span` element should have the `class` attribute set to `description`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description')); -``` - -You should have three `td` elements. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3); -``` - -Your first `td` element should have the text `$50`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50'); -``` - -Your second `td` element should have the text `$50`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50'); -``` - -Your third `td` element should have the text `$75`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75'); -``` - -Your third `td` element should have the `class` set to `current`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - ---fcc-editable-region-- - - - - - - - - - - - - - - - - ---fcc-editable-region-- - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md deleted file mode 100644 index 3df95a88b0f872..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 61fd990577d8227dd93fbeeb -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -In your fourth `tr` element, add a `th` element with the text `Total Liabilities`. Wrap the text `Liabilities` in a `span` element with the `class` attribute set to `sr-only`. - -Following that, add three `td` elements with the following text (in order): `$750`, `$600`, `$475`. Give the third `td` element a `class` attribute set to `current`. - -# --hints-- - -Your fourth `tr` should have a `th` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')); -``` - -Your `th` element should have the text `Total Liabilities`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities'); -``` - -You should wrap the text `Liabilities` in a `span` element. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities'); -``` - -Your `span` element should have the `class` attribute set to `sr-only`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only')); -``` - -You should have three `td` elements. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3); -``` - -Your first `td` element should have the text `$750`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750'); -``` - -Your second `td` element should have the text `$600`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600'); -``` - -Your third `td` element should have the text `$475`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475'); -``` - -Your third `td` element should have the `class` set to `current`. - -```js -assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - ---fcc-editable-region-- - - - - - - - - - - - - - - - - - - - - ---fcc-editable-region-- - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
- -
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md deleted file mode 100644 index 7de519d4f93526..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -id: 61fd9a4ff2fc4481b9157bd7 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -For your third table, add a `caption` with the text `Net Worth`, and set up a table header and table body. - -# --hints-- - -Your third `table` element should have a `caption` element. - -```js -assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption'); -``` - -Your `caption` element should have the text `Net Worth`. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth'); -``` - -Your third `table` element should have a `thead` element. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')); -``` - -Your third `table` element should have a `tbody` element. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')); -``` - -Your `thead` element should be immediately below your `caption` element. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.nextElementSibling?.localName === 'thead'); -``` - -Your `tbody` element should be immediately below your `thead` element. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
---fcc-editable-region-- - -
---fcc-editable-region-- -
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md deleted file mode 100644 index 2734201d5ac517..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 61fd9ad665a4a282c8106be3 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`. - -# --hints-- - -Your `thead` element should have a `tr` element. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr'); -``` - -Your `tr` element should have a `td` element as the first child. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td'); -``` - -Your `tr` element should have three `th` elements, after the `td` element. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th'); -assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[2]?.localName === 'th'); -assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th'); -``` - -Each of your `th` elements should have a `span` element. - -```js -const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')]; -ths?.forEach(th => { - assert(th?.children?.length === 1); - assert(th?.children?.[0]?.localName === 'span'); -}); -``` - -Each of your new `span` elements should have the `class` attribute set to `sr-only`. - -```js -const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')]; -ths?.forEach(th => { - assert(th?.children?.[0]?.classList?.contains('sr-only')); -}); -``` - -Your first `span` element should have the text `2019`. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019'); -``` - -Your second `span` element should have the text `2020`. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020'); -``` - -Your third `span` element should have the text `2021`. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021'); -``` - -Your `td` element should be empty. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === ''); -assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.children?.length === 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
---fcc-editable-region-- - - - - - - -
Net Worth
---fcc-editable-region-- -
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md deleted file mode 100644 index 9db70729f4e72c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -id: 61fd9b7285bde783ad5b8aac -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Within the `tbody`, add a `tr` with the `class` set to `total`. In that, add a `th` with the text `Total Net Worth`, and wrap `Net Worth` in a `span` with the `class` set to `sr-only`. - -Then add three `td` elements, giving the third a `class` set to `current`, and giving each the following text: `$-171`, `$136`, `$334`. - -# --hints-- - -Your `tbody` element should have one `tr` element. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1); -``` - -Your `tr` element should have the `class` set to `total`. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total')); -``` - -Your `tr` should have a `th` element. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')); -``` - -Your `th` element should have the text `Total Net Worth`. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth'); -``` - -You should wrap the text `Net Worth` in a `span` element. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth'); -``` - -Your `span` element should have the `class` attribute set to `sr-only`. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only')); -``` - -You should have three `td` elements. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3); -``` - -Your first `td` element should have the text `$-171`. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171'); -``` - -Your second `td` element should have the text `$136`. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136'); -``` - -Your third `td` element should have the text `$334`. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334'); -``` - -Your third `td` element should have the `class` set to `current`. - -```js -assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
---fcc-editable-region-- - - - - - - - - - - - - -
Net Worth
201920202021
---fcc-editable-region-- -
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md deleted file mode 100644 index d6f43946ecb24f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 61fd9d9fbdfe078800317055 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Time to style your table. Start by resetting the box model. Create an `html` selector and give it a `box-sizing` property set to `border-box`. - -# --hints-- - -You should have an `html` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('html')); -``` - -Your `html` selector should have a `box-sizing` property set to `border-box`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md deleted file mode 100644 index ef76a35f2ed8e9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: 61fda307bde0b091cf7d884a -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Create a `body` selector and give it a `font-family` property set to `sans-serif` and a `color` set to `#0a0a23`. - -# --hints-- - -You should have a `body` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -Your `body` selector should have a `font-family` property set to `sans-serif`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family') === 'sans-serif'); -``` - -Your `body` selector should have a `color` property set to `#0a0a23`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color') === 'rgb(10, 10, 35)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md deleted file mode 100644 index 0d32f178f444a2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -id: 61fda339eadcfd92a6812bed -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Before you get too far into your styling, you should make use of the `sr-only` class. You can use CSS to make elements with this class completely hidden from the visual page, but still be announced by screen readers. - -The CSS you are about to write is a common set of properties used to ensure elements are completely hidden visually. - -The `span[class~="sr-only"]` selector will select any `span` element whose `class` *includes* `sr-only`. Create that selector, and give it a `border` property set to `0`. - -# --hints-- - -You should have an `span[class~="sr-only"]` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')); -``` - -Your `span[class~="sr-only"]` selector should have a `border` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md deleted file mode 100644 index c2beaaa7c61ea2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 61fdac1e31692f9a9ad97295 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`. - -The `clip-path` property determines the shape the `clip` property should take. Use both the `clip-path` and `-webkit-clip-path` selectors to set the value to `inset(50%)`, forming the clip-path into a rectangle within the element. - -# --hints-- - -Your `span[class~="sr-only"]` selector should have a `clip` property set to `rect(1px, 1px, 1px, 1px)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)'); -``` - -Your `span[class~="sr-only"] ` selector should have a `clip-path` property set to `inset(50%)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)'); -``` - -Your `span[class~="sr-only"]` selector should have a `-webkit-clip-path` property set to `inset(50%)`. - -```js -assert(/-webkit-clip-path\s*:\s*inset\(\s*50%\s*\)\s*(;|})/.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css ---fcc-editable-region-- -span[class~="sr-only"] { - border: 0; - -} ---fcc-editable-region-- - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md deleted file mode 100644 index b2da77872ddaca..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 61fdaea3999cb19d76ce717b -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Now you need to size these elements down. Give your `span[class~="sr-only"]` selector a `width` and `height` property set to `1px`. - -# --hints-- - -Your `span[class~="sr-only"]` selector should have a `width` property set to `1px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px'); -``` - -Your `span[class~="sr-only"]` selector should have a `height` property set to `1px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css ---fcc-editable-region-- -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - -} ---fcc-editable-region-- - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md deleted file mode 100644 index b82816458231d7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 61fdaf9ff894b6a084ecdc1b -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -To prevent the text content from overflowing, give your `span[class~="sr-only"]` selector an `overflow` property set to `hidden` and a `white-space` property set to `nowrap`. - -# --hints-- - -Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden'); -``` - -Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css ---fcc-editable-region-- -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - -} ---fcc-editable-region-- - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md deleted file mode 100644 index 8284abe755c8af..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 61fdafe6f07fd7a1c6785bc2 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Finally, you need to take these hidden elements out of the document flow. Give the `span[class~="sr-only"]` selector a `position` property set to `absolute`, a `padding` property set to `0`, and a `margin` property set to `-1px`. This will ensure that not only are they no longer visible, but they are not even within the page view. - -# --hints-- - -Your `span[class~="sr-only"]` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute'); -``` - -Your `span[class~="sr-only"]` selector should have a `padding` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px'); -``` - -Your `span[class~="sr-only"]` selector should have a `margin` property set to `-1px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css ---fcc-editable-region-- -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - overflow: hidden; - white-space: nowrap; - -} ---fcc-editable-region-- - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md deleted file mode 100644 index aecbddc1a7a416..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 61fdb04d9939f0a26ca51c2b -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`. - -# --hints-- - -You should have an `h1` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')); -``` - -Your `h1` selector should have a `max-width` property set to `37.25rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem'); -``` - -Your `h1` selector should have a `margin` property set to `0 auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto'); -``` - -Your `h1` selector should have a `padding` property set to `1.5rem 1.25rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - position: absolute; - overflow: hidden; - white-space: nowrap; - padding: 0; - margin: -1px; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md deleted file mode 100644 index 5ec7bcff299878..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 620159cd5431aa34bc6a4c9c -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Target your flex container with an `h1 .flex` selector. Give it a `display` property set to `flex` to enable the flexbox layout. Then set the `flex-direction` property to `column-reverse` - this will display the nested elements from bottom to top. Finally, set the `gap` property to `1rem` to create some space between the elements. - -# --hints-- - -You should have an `h1 .flex` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')); -``` - -Your `h1 .flex` selector should have a `display` property set to `flex`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('display') === 'flex'); -``` - -Your `h1 .flex` selector should have a `flex-direction` property set to `column-reverse`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('flex-direction') === 'column-reverse'); -``` - -Your `h1 .flex` selector should have a `gap` property set to `1rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - position: absolute; - overflow: hidden; - white-space: nowrap; - padding: 0; - margin: -1px; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md deleted file mode 100644 index ab8865eb0d6946..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 62015a5da1c95c358f079ebb -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -The `:first-of-type` pseudo-selector is used to target the first element that matches the selector. Create an `h1 .flex span:first-of-type` selector to target the first `span` element in your `.flex` container. Remember that your `span` elements are reversed, visually, so this will appear to be the second element on the page. - -Give your new selector a `font-size` property of `0.7em` to make it look like a sub-heading. - -# --hints-- - -You should have an `h1 .flex span:first-of-type` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')); -``` - -Your `h1 .flex span:first-of-type` selector should have a `font-size` property set to `0.7em`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.getPropertyValue('font-size') === '0.7em'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - position: absolute; - overflow: hidden; - white-space: nowrap; - padding: 0; - margin: -1px; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md deleted file mode 100644 index 1cea40b76013fc..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 62015cd2654a1139321a89d2 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -The `:last-of-type` pseudo-selector does the exact opposite - it targets the last element that matches the selector. Create an `h1 .flex span:last-of-type` selector to target the last `span` in your flex container, and give it a `font-size` property set to `1.2em` to make it look like a header. - -# --hints-- - -You should have an `h1 .flex span:last-of-type` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')); -``` - -Your `h1 .flex span:last-of-type` selector should have a `font-size` property set to `1.2em`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.getPropertyValue('font-size') === '1.2em'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - position: absolute; - overflow: hidden; - white-space: nowrap; - padding: 0; - margin: -1px; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md deleted file mode 100644 index 85bd4b078771cd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md +++ /dev/null @@ -1,213 +0,0 @@ ---- -id: 62015d8942384c3aed48329e -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -You wrapped your table in a section element - now you can style that to give your table a border. Create a `section` selector, and give it a `max-width` property set to `40rem` for responsive design. Set the `margin` property to `0 auto` to center it, and set the `border` property to `2px solid #d0d0d5`. - -# --hints-- - -You should have a `section` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('section')); -``` - -Your `section` selector should have a `max-width` property set to `40rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem'); -``` - -Your `section` selector should have a `margin` property set to `0 auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto'); -``` - -Your `section` selector should have a `border` property set to `2px solid #d0d0d5`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - position: absolute; - overflow: hidden; - white-space: nowrap; - padding: 0; - margin: -1px; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md deleted file mode 100644 index f5c19d377b7ab6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 620167374bb8b4455cd11125 -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -The last part of your table heading is your years. Create a `#years` selector, and enable flexbox. Justify the content to the end of the flex direction, and make the element sticky. Fix it to the top of its container with `top: 0`. - -# --hints-- - -You should have a `#years` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years')); -``` - -Your `#years` selector should have a `display` property set to `flex`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex'); -``` - -Your `#years` selector should have a `justify-content` property set to `flex-end`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('justify-content') === 'flex-end'); -``` - -Your `#years` selector should have a `position` property set to `sticky`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('position') === 'sticky'); -``` - -Your `#years` selector should have a `top` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - position: absolute; - overflow: hidden; - white-space: nowrap; - padding: 0; - margin: -1px; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md deleted file mode 100644 index cc6bc8d721fc2c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md +++ /dev/null @@ -1,213 +0,0 @@ ---- -id: 620174ed519dd7506c1a4b61 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Now apply some color to your `#years`. Make the text `#fff` and the background `#0a0a23`. - -# --hints-- - -Your `#years` should have a `color` property set to `#fff`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)'); -``` - -Your `#years` should have a `background-color` property set to `#0a0a23`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - position: absolute; - overflow: hidden; - white-space: nowrap; - padding: 0; - margin: -1px; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - ---fcc-editable-region-- -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md deleted file mode 100644 index 428977715645d2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 620175b3710a0951cfa86edf -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -The `calc()` function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element: - -```css -.example { - margin: 10px; - width: calc(100% - 20px); -} -``` - -Ensure your years do not get hidden by setting a `z-index` of `999`. Then, give it a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`. - -# --hints-- - -Your `#years` selector should have a `z-index` property set to `999`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index') === '999'); -``` - -Your `#years` selector should have a `margin` property set to `0 -2px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px'); -``` - -Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`. - -```js -const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding'); -assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - position: absolute; - overflow: hidden; - white-space: nowrap; - padding: 0; - margin: -1px; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - ---fcc-editable-region-- -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md deleted file mode 100644 index 5081a07ca21e6a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md +++ /dev/null @@ -1,233 +0,0 @@ ---- -id: 6201782cc420715562f36271 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Style the text within your `#years` element by creating a `#years span[class]` selector. The `span[class]` syntax will target any `span` element that has a `class` attribute set, regardless of the attribute's value. - -Give your new selector a `bold` font, a width of `4.5rem`, and text aligned to the right. - -# --hints-- - -You should have a `#years span[class]` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')); -``` - -Your `#years span[class]` selector should have a `font-weight` property set to `bold`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold'); -``` - -Your `#years span[class]` selector should have a `width` property set to `4.5rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem'); -``` - -Your `#years span[class]` selector should have a `text-align` property set to `right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - position: absolute; - overflow: hidden; - white-space: nowrap; - padding: 0; - margin: -1px; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md deleted file mode 100644 index 48464e039d7cff..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 620179bc0a6a2358c72b90ad -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -You wrapped your tables in a container with the `table-wrap` class. Create a selector for that class, and give it a `padding` set to `0 0.75rem 1.5rem 0.75rem`. - -# --hints-- - -You should have a `.table-wrap` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')); -``` - -Your `.table-wrap` selector should have a `padding` property set to `0 0.75rem 1.5rem 0.75rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - position: absolute; - overflow: hidden; - white-space: nowrap; - padding: 0; - margin: -1px; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md deleted file mode 100644 index 03e0b25bf20afe..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md +++ /dev/null @@ -1,231 +0,0 @@ ---- -id: 62017b6f47454059bf2d3bd1 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Before you start diving in to the table itself, your `span` elements are currently bolded. Create a `span:not(.sr-only)` selector and give it a `font-weight` property set to `normal`. - -The `:not()` pseudo-selector is used to target all elements that do not match the selector - in this case, any of your `span` elements that do not have the `span[class~="sr-only"]` class. This ensures that your earlier rules for the `sr-only` class are not overwritten. - -# --hints-- - -You should have a `span:not(.sr-only)` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')); -``` - -Your `span:not(.sr-only)` selector should have a `font-weight` property set to `normal`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - position: absolute; - overflow: hidden; - white-space: nowrap; - padding: 0; - margin: -1px; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md deleted file mode 100644 index 46f57aac10630e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md +++ /dev/null @@ -1,299 +0,0 @@ ---- -id: 62017f47c87be96457c49f46 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Rather than having to constantly double-check you are not overwriting your earlier properties, you can use the `!important` keyword to ensure these properties are always applied, regardless of order or specificity. - -Give each property in your `span[class~="sr-only"]` selector an `!important` keyword. Do not change any of the values. - -# --hints-- - -Your `span[class~="sr-only"]` selector should have the `border` property set to `0 !important`. - -```js -// log it -const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; -assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important')); -``` - -Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`. - -```js -const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; -assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;')); -``` - -Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`. - -```js -const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; -assert(text.includes('clip-path: inset(50%) !important;')); -``` - -Your `span[class~="sr-only"]` selector should have the `-webkit-clip-path` property set to `inset(50%) !important`. - -```js -// this one gets removed apparently -assert(code.includes('-webkit-clip-path: inset(50%) !important;')); -``` - -Your `span[class~="sr-only"]` selector should have the `height` property set to `1px !important`. - -```js -const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; -assert(text.includes('height: 1px !important;')); -``` - -Your `span[class~="sr-only"]` selector should have the `width` property set to `1px !important`. - -```js -const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; -assert(text.includes('width: 1px !important;')); -``` - -Your `span[class~="sr-only"]` selector should have the `position` property set to `absolute !important`. - -```js -const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; -assert(text.includes('position: absolute !important;')); -``` - -Your `span[class~="sr-only"]` selector should have the `overflow` property set to `hidden !important`. - -```js -const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; -assert(text.includes('overflow: hidden !important;')); -``` - -Your `span[class~="sr-only"]` selector should have the `white-space` property set to `nowrap !important`. - -```js -const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; -assert(text.includes('white-space: nowrap !important;')); -``` - -Your `span[class~="sr-only"]` selector should have the `padding` property set to `0 !important`. - -```js -const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; -assert(text.includes('padding: 0px !important;')); -``` - -Your `span[class~="sr-only"]` selector should have the `margin` property set to `-1px !important`. - -```js -const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; -assert(text.includes('margin: -1px !important;')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css ---fcc-editable-region-- -span[class~="sr-only"] { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - -webkit-clip-path: inset(50%); - height: 1px; - width: 1px; - position: absolute; - overflow: hidden; - white-space: nowrap; - padding: 0; - margin: -1px; -} ---fcc-editable-region-- - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span:not(.sr-only) { - font-weight: normal; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md deleted file mode 100644 index 4be6f539f22133..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 62017fa5bbef406580ceb44f -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Now that you have added the `!important` keyword, you can remove the `:not(.sr-only)` from your `span` selector. - -# --hints-- - -You should not have a `span:not(.sr-only)` selector. - -```js -assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'))); -``` - -You should have a `span` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span')); -``` - -You should not change the `font-weight`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-weight') === 'normal'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - ---fcc-editable-region-- -span:not(.sr-only) { - font-weight: normal; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md deleted file mode 100644 index 3afc1a25c3260a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 62018243f046a368fab8ffb6 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Create a `table` selector to target your tables. Set the `border-collapse` property to `collapse`, which will allow cell borders to collapse into a single border, instead of a border around each cell. Also set the `border` property to `0` to hide the borders themselves. - -# --hints-- - -You should have a `table` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table')); -``` - -Your `table` selector should have a `border-collapse` property set to `collapse`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-collapse') === 'collapse'); -``` - -Your `table` selector should have a `border` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md deleted file mode 100644 index bf345f1f5bef13..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 6201830cb0c74b69f1b41635 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Ensure your table fills its container with a `width` property set to `100%`, then position it relatively and give it a top margin of `3rem`. - -# --hints-- - -Your `table` selector should have a `width` property set to `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%'); -``` - -Your `table` selector should have a `position` property set to `relative`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('position') === 'relative'); -``` - -Your `table` selector should have a `margin-top` property set to `3rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('margin-top') === '3rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - ---fcc-editable-region-- -table { - border-collapse: collapse; - border: 0; - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md deleted file mode 100644 index c490f4533b6962..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md +++ /dev/null @@ -1,253 +0,0 @@ ---- -id: 620186f4b6b8356d2def576b -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Next you need to style your `caption` elements to look more like headers. Create a `table caption` selector. Set the text to have a color of `#356eaf`, a size of `1.3em`, and a normal weight. - -# --hints-- - -You should have a `table caption` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table caption')); -``` - -Your `table caption` selector should have a `color` property set to `#356eaf`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('color') === 'rgb(53, 110, 175)'); -``` - -Your `table caption` selector should have a `font-size` property set to `1.3em`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-size') === '1.3em'); -``` - -Your `table caption` selector should have a `font-weight` property set to `normal`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-weight') === 'normal'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md deleted file mode 100644 index 520a8d6597fea1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 62018ba1aa263770c953be66 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Now give the captions an absolute position, and shift them `-2.25rem` from the top and `0.5rem` from the left. - -# --hints-- - -Your `table caption` selector should have the `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute'); -``` - -Your `table caption` selector should have the `top` property set to `-2.25rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('top') === '-2.25rem'); -``` - -Your `table caption` selector should have the `left` property set to `0.5rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('left') === '0.5rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - ---fcc-editable-region-- -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md deleted file mode 100644 index 5e51c2b415daef..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 62018c3e94434a71af1d5eaa -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container (because we are using flexbox). - -# --hints-- - -You should have a `tbody td` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tbody td')); -``` - -Your `tbody td` selector should have a `width` property set to `100vw`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('width') === '100vw'); -``` - -Your `tbody td` selector should have a `min-width` property set to `4rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem'); -``` - -Your `tbody td` selector should have a `max-width` property set to `4rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md deleted file mode 100644 index 3a993cd5aa3541..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md +++ /dev/null @@ -1,256 +0,0 @@ ---- -id: 62018ec29b3ae674f40bef31 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Now target the `th` elements within your table body, and give them a width of the entire container, less `12rem`. - -# --hints-- - -You should have a `tbody th` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tbody th')); -``` - -Your `tbody th` selector should have a `width` property set to `calc(100% - 12rem)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('width') === 'calc(100% - 12rem)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md deleted file mode 100644 index 191e7516aa73cd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 62019093fe30e278e797d2f6 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -The `[attribute="value"]` selector targets any element that has an attribute with a specific value. Create a `tr[class="total"]` selector to target specifically your `tr` elements with the `total` class. Give it a bottom border of `4px double #0a0a23` and make the font bold. - -# --hints-- - -You should have a `tr[class="total"]` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')); -``` - -Your `tr[class="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)'); -``` - -Your `tr[class="total"]` selector should have a `font-weight` property set to `bold`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md deleted file mode 100644 index ff5b3982fd0f84..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 620191707bc65579ddd3ce15 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Using the same selector syntax, target the `th` elements within your table rows where the `class` is `total`. Align the text to the left, and give them a padding of `0.5rem 0 0.25rem 0.5rem`. - -# --hints-- - -You should have a `tr[class="total"] th` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')); -``` - -Your `tr[class="total"] th` selector should have a `text-align` property set to `left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left'); -``` - -Your `tr[class="total"] th` selector should have a `padding` property set to `0.5rem 0 0.25rem 0.5rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - -tr[class="total"] { - border-bottom: 4px double #0a0a23; - font-weight: bold; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md deleted file mode 100644 index 6e24c5cd5aa936..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md +++ /dev/null @@ -1,278 +0,0 @@ ---- -id: 620192a767533a7ad19d96d7 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -The key difference between `tr[class="total"]` and `tr.total` is that the first will select `tr` elements where the *only* class is `total`. The second will select `tr` elements where the class *includes* total. - -In your case, `tr.total` will work. You can use this selector to target all `td` elements within your `.total` rows. Align the text to the right, and give them a padding of `0 0.25rem`. - -# --hints-- - -You should have a `tr.total td` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.total td')); -``` - -Your `tr.total td` selector should have a `text-align` property set to `right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right'); -``` - -Your `tr.total td` selector should have a `padding` property set to `0 0.25rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - -tr[class="total"] { - border-bottom: 4px double #0a0a23; - font-weight: bold; -} - -tr[class="total"] th { - text-align: left; - padding: 0.5rem 0 0.25rem 0.5rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md deleted file mode 100644 index b104424cf3c651..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -id: 6201995d9ab88e80f1989dce -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -The `:nth-of-type()` pseudo-selector is used to target specific elements based on their order among siblings of the same type. Use this pseudo-selector to target the third `td` element within your `total` table rows. Give it a right padding of `0.5rem`. - -# --hints-- - -You should have a `tr.total td:nth-of-type(3)` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')); -``` - -Your `tr.total td:nth-of-type(3)` selector should have a `padding-right` property set to `0.5rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - -tr[class="total"] { - border-bottom: 4px double #0a0a23; - font-weight: bold; -} - -tr[class="total"] th { - text-align: left; - padding: 0.5rem 0 0.25rem 0.5rem; -} - -tr.total td { - text-align: right; - padding: 0 0.25rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md deleted file mode 100644 index b740aa86b06e60..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md +++ /dev/null @@ -1,279 +0,0 @@ ---- -id: 620199c7a7a32c81d4db3410 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Give your `tr.total` elements a hover effect that changes the background to `#99c9ff`. - -# --hints-- - -You should have a `tr.total:hover` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')); -``` - -Your `tr.total:hover` selector should have the `background-color` property set to `#99c9ff`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyValue('background-color') === 'rgb(153, 201, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - -tr[class="total"] { - border-bottom: 4px double #0a0a23; - font-weight: bold; -} - -tr[class="total"] th { - text-align: left; - padding: 0.5rem 0 0.25rem 0.5rem; -} - -tr.total td { - text-align: right; - padding: 0 0.25rem; -} - -tr.total td:nth-of-type(3) { - padding-right: 0.5rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md deleted file mode 100644 index be02adf939b5cb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 6201a1a7af32c287bd6b8183 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Select your `td` elements with the `class` value of `current`, and make the font italic. - -# --hints-- - -You should have a `td.current` selector. - -```js -const def = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert(def('td.current') || def('td[class="current"]')); -``` - -Your `td.current` selector should have the `font-style` property set to `italic`. - -```js -const font = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style'); -assert((font('td.current') || font('td[class="current"]')) === 'italic'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - -tr[class="total"] { - border-bottom: 4px double #0a0a23; - font-weight: bold; -} - -tr[class="total"] th { - text-align: left; - padding: 0.5rem 0 0.25rem 0.5rem; -} - -tr.total td { - text-align: right; - padding: 0 0.25rem; -} - -tr.total td:nth-of-type(3) { - padding-right: 0.5rem; -} - -tr.total:hover { - background-color: #99c9ff; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md deleted file mode 100644 index d0d89039b98212..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md +++ /dev/null @@ -1,289 +0,0 @@ ---- -id: 6201a1cc668a34888f5b2f52 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Select the `tr` elements with the `class` set to `data`. Give them a background image of `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`. - -# --hints-- - -You should have a `tr.data` selector. - -```js -const def = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert(def('tr.data') || def('tr[class="data"]')); -``` - -Your `tr.data` selector should have the `background-image` property set to `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`. - -```js -const bg = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('background-image'); -assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - -tr[class="total"] { - border-bottom: 4px double #0a0a23; - font-weight: bold; -} - -tr[class="total"] th { - text-align: left; - padding: 0.5rem 0 0.25rem 0.5rem; -} - -tr.total td { - text-align: right; - padding: 0 0.25rem; -} - -tr.total td:nth-of-type(3) { - padding-right: 0.5rem; -} - -tr.total:hover { - background-color: #99c9ff; -} - -td.current { - font-style: italic; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md deleted file mode 100644 index a112aada317053..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 6201a20d742f5c89736c8cfb -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Select the `th` elements within your `tr.data` elements. Align the text to the left, and give them a top padding of `0.3rem` and a left padding of `0.5rem`. - -# --hints-- - -You should have a `tr.data th` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data th')); -``` - -Your `tr.data th` selector should have a `text-align` property set to `left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('text-align') === 'left'); -``` - -Your `tr.data th` selector should have a `padding-top` property set to `0.3rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-top') === '0.3rem'); -``` - -Your `tr.data th` selector should have a `padding-left` property set to `0.5rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-left') === '0.5rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - -tr[class="total"] { - border-bottom: 4px double #0a0a23; - font-weight: bold; -} - -tr[class="total"] th { - text-align: left; - padding: 0.5rem 0 0.25rem 0.5rem; -} - -tr.total td { - text-align: right; - padding: 0 0.25rem; -} - -tr.total td:nth-of-type(3) { - padding-right: 0.5rem; -} - -tr.total:hover { - background-color: #99c9ff; -} - -td.current { - font-style: italic; -} - -tr.data { - background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md deleted file mode 100644 index 2e4293eb5ac608..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 6201a42e39bf3b95b6a33bf3 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Create a `tr.data th .description` selector to target the elements with the `class` set to `description` that are within your `th` elements in your `.data` table rows. Give them a block display, make the text italic with a normal weight, and position them with a `padding` set to `1rem 0 0.75rem` and a right margin of `-13.5rem`. - -# --hints-- - -You should have a `tr.data th .description` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')); -``` - -Your `tr.data th .description` selector should have a `display` property set to `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block'); -``` - -Your `tr.data th .description` selector should have a `font-style` property set to `italic`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic'); -``` - -Your `tr.data th .description` selector should have a `font-weight` property set to `normal`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal'); -``` - -Your `tr.data th .description` selector should have a `padding` property set to `1rem 0 0.75rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem'); -``` - -Your `tr.data th .description` selector should have a `margin-right` property set to `-13.5rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -span { - font-weight: normal; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - -tr[class="total"] { - border-bottom: 4px double #0a0a23; - font-weight: bold; -} - -tr[class="total"] th { - text-align: left; - padding: 0.5rem 0 0.25rem 0.5rem; -} - -tr.total td { - text-align: right; - padding: 0 0.25rem; -} - -tr.total td:nth-of-type(3) { - padding-right: 0.5rem; -} - -tr.total:hover { - background-color: #99c9ff; -} - -td.current { - font-style: italic; -} - -tr.data { - background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); -} - -tr.data th { - text-align: left; - padding-top: 0.3rem; - padding-left: 0.5rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md deleted file mode 100644 index ed374cf01ba1de..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 6201a4adcc6414968b391592 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Your `span` elements now all have more specific styling, which means you can remove your `span` rule. - -# --hints-- - -You should not have a `span` selector. - -```js -assert(!(new __helpers.CSSHelp(document).getStyle('span'))); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - ---fcc-editable-region-- -span { - font-weight: normal; -} ---fcc-editable-region-- - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - -tr[class="total"] { - border-bottom: 4px double #0a0a23; - font-weight: bold; -} - -tr[class="total"] th { - text-align: left; - padding: 0.5rem 0 0.25rem 0.5rem; -} - -tr.total td { - text-align: right; - padding: 0 0.25rem; -} - -tr.total td:nth-of-type(3) { - padding-right: 0.5rem; -} - -tr.total:hover { - background-color: #99c9ff; -} - -td.current { - font-style: italic; -} - -tr.data { - background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); -} - -tr.data th { - text-align: left; - padding-top: 0.3rem; - padding-left: 0.5rem; -} - -tr.data th .description { - display: block; - font-weight: normal; - font-style: italic; - padding: 1rem 0 0.75rem; - margin-right: -13.5rem; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md deleted file mode 100644 index 72f45fb6dbc15f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md +++ /dev/null @@ -1,313 +0,0 @@ ---- -id: 6201a5258af7b398b030bfaf -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Your dollar amounts are currently misaligned. Create a selector to target the `td` elements within your `tr.data` elements. Vertically align the text to the top, horizontally align the text to the right, and set the padding to `0.3rem 0.25rem 0`. - -# --hints-- - -You should have a `tr.data td` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data td')); -``` - -Your `tr.data td` selector should have a `vertical-align` property set to `top`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('vertical-align') === 'top'); -``` - -Your `tr.data td` selector should have a `text-align` property set to `right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('text-align') === 'right'); -``` - -Your `tr.data td` selector should have a `padding` property set to `0.3rem 0.25rem 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('padding') === '0.3rem 0.25rem 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - -tr[class="total"] { - border-bottom: 4px double #0a0a23; - font-weight: bold; -} - -tr[class="total"] th { - text-align: left; - padding: 0.5rem 0 0.25rem 0.5rem; -} - -tr.total td { - text-align: right; - padding: 0 0.25rem; -} - -tr.total td:nth-of-type(3) { - padding-right: 0.5rem; -} - -tr.total:hover { - background-color: #99c9ff; -} - -td.current { - font-style: italic; -} - -tr.data { - background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); -} - -tr.data th { - text-align: left; - padding-top: 0.3rem; - padding-left: 0.5rem; -} - -tr.data th .description { - display: block; - font-weight: normal; - font-style: italic; - padding: 1rem 0 0.75rem; - margin-right: -13.5rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md deleted file mode 100644 index 6dacc929d481ce..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md +++ /dev/null @@ -1,591 +0,0 @@ ---- -id: 6201a59be346d399c21d10b1 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Create another selector for the `td` elements within your `tr.data` element, but specifically select the last one. Give this a right padding of `0.5rem`. - -With this, your balance sheet is complete! - -# --hints-- - -You should have a `tr.data td:last-of-type` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')); -``` - -Your `tr.data td:last-of-type` selector should have a `padding-right` property set to `0.5rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getPropertyValue('padding-right') === '0.5rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - -tr[class="total"] { - border-bottom: 4px double #0a0a23; - font-weight: bold; -} - -tr[class="total"] th { - text-align: left; - padding: 0.5rem 0 0.25rem 0.5rem; -} - -tr.total td { - text-align: right; - padding: 0 0.25rem; -} - -tr.total td:nth-of-type(3) { - padding-right: 0.5rem; -} - -tr.total:hover { - background-color: #99c9ff; -} - -td.current { - font-style: italic; -} - -tr.data { - background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); -} - -tr.data th { - text-align: left; - padding-top: 0.3rem; - padding-left: 0.5rem; -} - -tr.data th .description { - display: block; - font-weight: normal; - font-style: italic; - padding: 1rem 0 0.75rem; - margin-right: -13.5rem; -} - -tr.data td { - vertical-align: top; - padding: 0.3rem 0.25rem 0; - text-align: right; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - Balance Sheet - - - -
-
-

- - AcmeWidgetCorp - Balance Sheet - -

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
- - - - - - - - - - - - - - - - - - -
Net Worth
201920202021
Total Net Worth$-171$136$334
-
-
-
- - -``` - -```css -span[class~="sr-only"] { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; - -webkit-clip-path: inset(50%) !important; - height: 1px !important; - width: 1px !important; - position: absolute !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - margin: -1px !important; -} - -html { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - color: #0a0a23; -} - -h1 { - max-width: 37.25rem; - margin: 0 auto; - padding: 1.5rem 1.25rem; -} - -h1 .flex { - display: flex; - flex-direction: column-reverse; - gap: 1rem; -} - -h1 .flex span:first-of-type { - font-size: 0.7em; -} - -h1 .flex span:last-of-type { - font-size: 1.2em; -} - -section { - max-width: 40rem; - margin: 0 auto; - border: 2px solid #d0d0d5; -} - -#years { - display: flex; - justify-content: flex-end; - position: sticky; - top: 0; - background: #0a0a23; - color: #fff; - z-index: 999; - padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; - margin: 0 -2px; -} - -#years span[class] { - font-weight: bold; - width: 4.5rem; - text-align: right; -} - -.table-wrap { - padding: 0 0.75rem 1.5rem 0.75rem; -} - -table { - border-collapse: collapse; - border: 0; - width: 100%; - position: relative; - margin-top: 3rem; -} - -table caption { - color: #356eaf; - font-size: 1.3em; - font-weight: normal; - position: absolute; - top: -2.25rem; - left: 0.5rem; -} - -tbody td { - width: 100vw; - min-width: 4rem; - max-width: 4rem; -} - -tbody th { - width: calc(100% - 12rem); -} - -tr[class="total"] { - border-bottom: 4px double #0a0a23; - font-weight: bold; -} - -tr[class="total"] th { - text-align: left; - padding: 0.5rem 0 0.25rem 0.5rem; -} - -tr.total td { - text-align: right; - padding: 0 0.25rem; -} - -tr.total td:nth-of-type(3) { - padding-right: 0.5rem; -} - -tr.total:hover { - background-color: #99c9ff; -} - -td.current { - font-style: italic; -} - -tr.data { - background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); -} - -tr.data th { - text-align: left; - padding-top: 0.3rem; - padding-left: 0.5rem; -} - -tr.data th .description { - display: block; - font-weight: normal; - font-style: italic; - padding: 1rem 0 0.75rem; - margin-right: -13.5rem; -} - -tr.data td { - vertical-align: top; - padding: 0.3rem 0.25rem 0; - text-align: right; -} - -tr.data td:last-of-type { - padding-right: 0.5rem; -} -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md deleted file mode 100644 index 8e72dacba39bb6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 612e6afc009b450a437940a1 -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Begin with the basic HTML structure. Add a `DOCTYPE` declaration and `html`, `head`, `body`, and `title` elements. Set the `title` to `Piano`. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have an opening tag. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Your `DOCTYPE` declaration should be at the beginning of your HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -You should have an opening `head` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `head` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `body` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `body` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -The `head` and `body` elements should be siblings. - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -The `head` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -The `body` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -Your code should have a `title` element. - -```js -const title = document.querySelector('title'); -assert.exists(title); -``` - -Your project should have a title of `Piano`. - -```js -const title = document.querySelector('title'); -assert.equal(title?.text?.trim()?.toLowerCase(), 'piano') -``` - -Remember, the casing and spelling matter for the title. - -```js -const title = document.querySelector('title'); -assert.equal(title?.text?.trim(), 'Piano'); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md deleted file mode 100644 index b5d494349b6e8f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 612e77aba7ca691f598feb02 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Add two `meta` tags, one to optimize your page for mobile devices, and one to specify an accepted `charset` for the page. - -# --hints-- - -You should add two `meta` elements to your page. - -```js -const meta = document.querySelector('meta'); -assert.exists(meta); -``` - -You should have two `meta` elements. - -```js -const meta = document.querySelectorAll('meta'); -assert(meta?.length === 2); -``` - -One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); -assert.exists(target); -``` - -The other `meta` element should have the `charset` attribute set to `UTF-8`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset') === 'UTF-8'); -assert.exists(target); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - Piano - --fcc-editable-region-- - - --fcc-editable-region-- - - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md deleted file mode 100644 index a05d27b6d5a5e2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: 612e78af05201622d4bab8aa -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Time to start working on the piano. Create a `div` element within your `body` element with the `id` set to `piano`. - -# --hints-- - -You should create a new `div` element. - -```js -const div = document.querySelector('div'); -assert.exists(div); -``` - -Your `div` should be within your `body` element. - -```js -const div = document.querySelector('div'); -assert(div?.parentElement?.localName === 'body'); -``` - -Your `div` should have the `id` set to `piano`. - -```js -const div = document.querySelector('div'); -assert(div?.getAttribute('id') === 'piano'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md deleted file mode 100644 index ccee7b24ca3cff..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 612e7d1c29fb872d6384379c -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Nest a second `div` within your existing `div`, and set the `class` to be `keys`. - -# --hints-- - -You should create a second `div` element. - -```js -const divDiv = document.querySelectorAll('div'); -assert(divDiv?.length === 2); -``` - -Your new `div` element should be within your existing `div` element. - -```js -const div = document.querySelector('div'); -assert(div?.children?.length === 1); -assert(div?.children?.[0]?.localName === 'div'); -``` - -Your new `div` element should have the `class` set to `keys`. - -```js -const div = document.querySelector('div'); -assert(div?.children?.[0]?.className === 'keys'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - -
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md deleted file mode 100644 index e705e507f1af3f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 612e804c54d5e7308d7ebe56 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Within your `.keys` element, add seven `div` elements. Give them all the class `key`. - -# --hints-- - -You should create seven new `div` elements. - -```js -const divDivDiv = document.querySelectorAll('div'); -assert(divDivDiv?.length === 9); -``` - -Your seven new `div` elements should be within your `.keys` element. - -```js -const keys = document.querySelector('.keys'); -assert([...keys?.children].length === 7); -assert([...keys?.children].every(child => child?.tagName === 'DIV')); -``` - -Your seven new `div` elements should all have the `class` set to `key`. - -```js -const keys = document.querySelector('.keys'); -assert([...keys?.children].every(child => child?.classList?.contains('key'))); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - --fcc-editable-region-- -
-
-
- --fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md deleted file mode 100644 index 9e5b35d91d22e0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 612e813b3ba67633222cbe54 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Remember that a `class` attribute can have multiple values. To separate your white keys from your black keys, you'll add a second `class` value of `black--key`. Add this to your second, third, fifth, sixth, and seventh `.key` elements. - -# --hints-- - -Your second `.key` element should also have a `class` of `black--key`. - -```js -const key = document.querySelectorAll('.key')?.[1]; -assert(key?.className?.includes('black--key')); -``` - -Your third `.key` should have `black--key` in the `class`. - -```js -const third = document.querySelectorAll('.key')?.[2]; -assert(third?.classList?.contains('black--key')); -``` - -Your fifth `.key` should have `black--key` in the `class`. - -```js -const fifth = document.querySelectorAll('.key')?.[4]; -assert(fifth?.classList?.contains('black--key')); -``` - -Your sixth `.key` should have `black--key` in the `class`. - -```js -const sixth = document.querySelectorAll('.key')?.[5]; -assert(sixth?.classList?.contains('black--key')); -``` - -Your seventh `.key` should have `black--key` in the `class`. - -```js -const seventh = document.querySelectorAll('.key')?.[6]; -assert(seventh?.classList?.contains('black--key')); -``` - -You should have five `.black--key` elements. - -```js -const blackKeys = document.querySelectorAll('.black--key'); -assert(blackKeys?.length === 5); -``` - -You should have seven `.key` elements. - -```js -const keys = document.querySelectorAll('.key'); -assert(keys?.length === 7); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - --fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md deleted file mode 100644 index 30f34f0019a572..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 612e8279827a28352ce83a72 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Now copy the set of seven `.key` elements, and paste two more sets into the `.keys` div. - -# --hints-- - -You should have 21 `.key` elements. - -```js -const keys = document.querySelectorAll('.key'); -assert(keys?.length === 21); -``` - -You should have 15 `.black--key` elements. - -```js -const blackKeys = document.querySelectorAll('.black--key'); -assert(blackKeys?.length === 15); -``` - -All `.key` elements should be within your `.keys` element. - -```js -const keys = document.querySelector('.keys'); -assert(keys?.querySelectorAll('.key')?.length === 21); -``` - -All `.black--key` elements should be within your `.keys` element. - -```js -const keys = document.querySelector('.keys'); -assert(keys?.querySelectorAll('.black--key')?.length === 15); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - --fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md deleted file mode 100644 index 9d8262affc3717..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -id: 612e83ec2eca1e370f830511 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Add a `link` element within your `head` element. For that `link` element, set the `rel` attribute to `stylesheet` and the `href` to `./styles.css`. - -# --hints-- - -Your code should have a `link` element. - -```js -assert.match(code, //i)); -``` - -Your `link` element should be within your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert.match(code, / - - - --fcc-editable-region-- - - Piano - - --fcc-editable-region-- - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md deleted file mode 100644 index d539ea1ac7d8df..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 612e89562043183c86df287c -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Browsers can apply default margin and padding values to specific elements. To make sure your piano looks correct, you need to reset the box model. - -Add an `html` rule selector to your CSS file, and set the `box-sizing` property to `border-box`. - -# --hints-- - -You should have an `html` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('html')); -``` - -Your `html` selector should have the `box-sizing` property set to `border-box`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md deleted file mode 100644 index eaa7f3845165a5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: 612e89d254fe5d3df7d6693d -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Now that you have reset the `html` box model, you need to pass that on to the elements within as well. To do this, you can set the `box-sizing` property to `inherit`, which will tell the targeted elements to use the same value as the parent element. - -You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the `::before` and `::after` pseudo-elements. - -The `::before` selector creates a pseudo-element which is the first child of the selected element, while the `::after` selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project. - -For now, create a CSS selector to target all elements with `*`, and include the pseudo-elements with `::before` and `::after`. Set the `box-sizing` property to `inherit`. - -# --hints-- - -You should have a `*, ::before, ::after` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')); -``` - -Your `*, ::before, ::after` selector should have the `box-sizing` property set to `inherit`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -html { - box-sizing: border-box; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md deleted file mode 100644 index 22689fbd3c2076..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 612e8eebe3a6dc3fcc33a66f -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Now target your `#piano` element with an `id` selector. Set `background-color` property to `#00471b`, the `width` property to `992px` and the `height` property to `290px`. - -# --hints-- - -You should have a `#piano` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')); -``` - -Your `#piano` selector should have the `background-color` property set to `#00471b`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)'); -``` - -Your `#piano` selector should have a `width` property set to `992px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px'); -``` - -Your `#piano` selector should have the `height` set to `290px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md deleted file mode 100644 index 589b568a35c640..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 612e95ef2e4bdf41f69067f9 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Set the `margin` of the `#piano` to `80px auto`. - -# --hints-- - -Your `#piano` selector should have the `margin` property set to `80px auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - ---fcc-editable-region-- -#piano { - background-color: #00471b; - width: 992px; - height: 290px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md deleted file mode 100644 index 98474ac22d0ecd..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 612e96fc87fe8e44f69f7ec5 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Time to style the keys. Below the `#piano` rule, target the `.keys` element with a `class` selector. Give the new rule a `background-color` property of `#040404`, a `width` property of `949px` and a `height` property of `180px`. - -# --hints-- - -You should have a `.keys` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.keys')); -``` - -Your `.keys` selector should have a `background-color` property set to `#040404`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)'); -``` - -Your `.keys` selector should have the `width` property set to `949px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px'); -``` - -Your `.keys` selector should have a `height` property set to `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md deleted file mode 100644 index 626289efbd44b4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 612e98f3245c98475e49cfc6 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Give the `.keys` a `padding-left` of `2px`. - -# --hints-- - -Your `.keys` selector should have a `padding-left` property set to `2px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; -} - ---fcc-editable-region-- -.keys { - background-color: #040404; - width: 949px; - height: 180px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md deleted file mode 100644 index 20cf09d8b8e076..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 612e9a21381a1949327512e6 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Move the keys into position by adjusting the `#piano` selector. Set the `padding` property to `90px 20px 0 20px`. - -# --hints-- - -Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - ---fcc-editable-region-- -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; -} ---fcc-editable-region-- - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md deleted file mode 100644 index cfb6ace0682e34..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 612e9d142affc44a453655db -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`. - -# --hints-- - -You should have a `.key` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')); -``` - -Your `.key` selector should have a `background-color` property set to `#ffffff`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)'); -``` - -Your `.key` selector should have the `position` property set to `relative`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative'); -``` - -Your `.key` selector should have a `width` property set to `41px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px'); -``` - -Your `.key` selector should have a `height` property set to `175px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px'); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md deleted file mode 100644 index 79d798d06bd622..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 612e9f1e7e5ccd4fa9ada0be -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Give the `.key` a `margin` of `2px` and a `float` property set to `left`. - -# --hints-- - -Your `.key` selector should have a `margin` property set to `2px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px'); -``` - -Your `.key` selector should have a `float` property set to `left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - ---fcc-editable-region-- -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md deleted file mode 100644 index 83382588091259..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 612ea4c4993aba52ab4aa32e -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Now it is time to use the pseudo-selectors you prepared for earlier. To create the black keys, add a new `.key.black--key::after` selector. This will target the elements with the class `key black--key`, and select the pseudo-element after these elements in the HTML. - -In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty. - -The `content` property is used to set or override the content of the element. By default, the psuedo-elements created by the `::before` and `::after` pseudo-selectors are empty, and the elements will not be rendered to the page. Setting the `content` property to an empty string `""` will ensure the element is rendered to the page while still being empty. - -If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass. - -# --hints-- - -You should have a `.key.black--key::after` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')); -``` - -Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)'); -``` - -Your `.key.black--key::after` selector should have a `content` property set to `""`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md deleted file mode 100644 index 95cff83e89653f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 612ea97df5742154772f312e -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Give the `.key.black--key::after` a `position` property set to `absolute` and a `left` property set to `-18px`. - -# --hints-- - -Your `.key.black--key::after` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute'); -``` - -Your `.key.black--key::after` selector should have a `left` property set to `-18px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - ---fcc-editable-region-- -.key.black--key::after { - background-color: #1d1e22; - content: ""; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md deleted file mode 100644 index 1a90c13773462c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 612ead8788d28655ef8db056 -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -For the `.key.black--key::after`, set the `width` to `32px` and the `height` to `100px`. - -# --hints-- - -Your `.key.black--key::after` should have a `width` property set to `32px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px'); -``` - -Your `.key.black--key::after` should have a `height` property set to `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - ---fcc-editable-region-- -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md deleted file mode 100644 index a6b261c11affae..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 612eaf56b7ba3257fdbfb0db -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -The piano needs the freeCodeCamp logo to make it official. - -Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`. - -# --hints-- - -You should add a new `img` element. - -```js -assert(document.querySelectorAll('img')?.length === 1); -``` - -Your `img` element should come before your first `.key` element. - -```js -const img = document.querySelector('img'); -assert(img?.nextElementSibling?.className === 'keys'); -assert(img?.previousElementSibling === null); -``` - -Your `img` element should have a `class` set to logo. - -```js -const img = document.querySelector('img'); -assert(img?.className === 'logo'); -``` - -Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. - -```js -const img = document.querySelector('img'); -assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg'); -``` - -Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`. - -```js -assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo'); -``` - -Remember that casing and spelling matter. - -```js -assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - - --fcc-editable-region-- -
-
- --fcc-editable-region-- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md deleted file mode 100644 index b440525a213896..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 612eb4893b63c75bb9251ddf -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Start styling the logo by creating a `.logo` selector. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`. - -# --hints-- - -You should have a `.logo` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.logo')); -``` - -Your `.logo` selector should have a `width` property set to `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px'); -``` - -Your `.logo` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute'); -``` - -Your `.logo` selector should have a `top` property set to `23px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md deleted file mode 100644 index 96cde490be7141..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 612eb75153591b5e3b1ab65e -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`. - -# --hints-- - -Your `#piano` selector should have a `position` property set to `relative`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - ---fcc-editable-region-- -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} ---fcc-editable-region-- - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md deleted file mode 100644 index a366499ca2c30a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 612eb7ca8c275d5f89c73333 -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -To smooth the sharp edges of the piano and keys, start by giving the `#piano` a `border-radius` of `10px`. - -# --hints-- - -Your `#piano` selector should have a `border-radius` property set to `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - ---fcc-editable-region-- -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; -} ---fcc-editable-region-- - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md deleted file mode 100644 index 8fbcc75a72f097..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 612eb8e984cd73677a92b7e9 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Give the `.key` selector a `border-radius` value of `0 0 3px 3px`. - -# --hints-- - -Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - ---fcc-editable-region-- -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} ---fcc-editable-region-- - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md deleted file mode 100644 index 071c5a0daf28d0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -id: 612eb934f64a4d6890a45518 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to match the keys. - -# --hints-- - -Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - ---fcc-editable-region-- -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; -} ---fcc-editable-region-- - -.logo { - width: 200px; - position: absolute; - top: 23px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md deleted file mode 100644 index bc306625f97a63..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 612ebcba99bfa46a15370b11 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Now you need to make it responsive. Add a `@media` query with a `max-width` of `768px`. - -# --hints-- - -You should add a new `@media` query. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1); -``` - -Your `@media` query should have a `max-width` of `768px`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md deleted file mode 100644 index 4ab31ee005a7a8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 612ebe7fe6d07e6b76d1cae2 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Add a new `#piano` selector within your `@media` query, and set the `width` to `358px`. - -# --hints-- - -Your `@media` rule should have a `#piano` selector. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); -const piano = rules?.find(rule => rule.selectorText === '#piano'); -assert(piano); -``` - -Your new `#piano` selector should have a `width` of `358px`. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); -const piano = rules?.find(rule => rule.selectorText === '#piano'); -assert(piano?.style.width === '358px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - ---fcc-editable-region-- -@media (max-width: 768px) { - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md deleted file mode 100644 index 0175c56dae38d5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 612ebedec97e096c8bf64999 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Within the `@media` query, add a `.keys` selector and set the `width` to `318px`. - -# --hints-- - - -Your `@media` rule should have a `.keys` selector. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); -const keys = rules?.find(rule => rule.selectorText === '.keys'); -assert(keys); -``` - -Your new `.keys` selector should have a `width` of `318px`. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); -const keys = rules?.find(rule => rule.selectorText === '.keys'); -assert(keys?.style.width === '318px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - ---fcc-editable-region-- -@media (max-width: 768px) { - #piano { - width: 358px; - } -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md deleted file mode 100644 index 8e90e21a505e2a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 612ebf9a210f2b6d77001e68 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Now add a `.logo` selector to the `@media` query, and set the `width` property to `150px`. - -# --hints-- - -Your `@media` rule should have a `.logo` selector. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); -const logo = rules?.find(rule => rule.selectorText === '.logo'); -assert(logo); -``` - -Your new `.logo` selector should have a `width` of `150px`. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); -const logo = rules?.find(rule => rule.selectorText === '.logo'); -assert(logo?.style.width === '150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - ---fcc-editable-region-- -@media (max-width: 768px) { - #piano { - width: 358px; - } - - .keys { - width: 318px; - } -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md deleted file mode 100644 index e7781588289f4b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 612ec0490ae8626e9adf82e4 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -You might have noticed the keys collapse when the browser window is smaller than `768px`. Set `overflow` to `hidden` in the first `.keys` selector, to take care of this issue. This property will hide any element that is pushed outside the set `width` value of `.keys`. - -# --hints-- - -Your original `.keys` selector should have the `overflow` property set to `hidden`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - ---fcc-editable-region-- -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} ---fcc-editable-region-- - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - -@media (max-width: 768px) { - #piano { - width: 358px; - } - - .keys { - width: 318px; - } - - .logo { - width: 150px; - } -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md deleted file mode 100644 index 86268fada3157c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 612ec19d5268da7074941f84 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Add another `@media` rule to apply if the browser window is bigger than `769px` but smaller than `1199px`. - -# --hints-- - -You should add a new `@media` query. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2); -``` - -Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`. - -```js -const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText; -assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)'); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; - overflow: hidden; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - -@media (max-width: 768px) { - #piano { - width: 358px; - } - - .keys { - width: 318px; - } - - .logo { - width: 150px; - } -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md deleted file mode 100644 index 190d2eca0d36c8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 612ec29c84b9a6718b1f5cec -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`. - -With that, your piano is complete! - -# --hints-- - -Your second `@media` rule should have a `#piano` selector. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); -const piano = rules?.find(rule => rule.selectorText === '#piano'); -assert(piano); -``` - -Your new `#piano` selector should have a `width` of `675px`. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); -const piano = rules?.find(rule => rule.selectorText === '#piano'); -assert(piano?.style.width === '675px'); -``` - -Your second `@media` rule should have a `.keys` selector. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); -const keys = rules?.find(rule => rule.selectorText === '.keys'); -assert(keys); -``` - -Your new `.keys` selector should have a `width` of `633px`. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); -const keys = rules?.find(rule => rule.selectorText === '.keys'); -assert(keys?.style.width === '633px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; - overflow: hidden; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - -@media (max-width: 768px) { - #piano { - width: 358px; - } - - .keys { - width: 318px; - } - - .logo { - width: 150px; - } -} - ---fcc-editable-region-- -@media (max-width: 1199px) and (min-width: 769px) { - -} ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; - overflow: hidden; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - -@media (max-width: 768px) { - #piano { - width: 358px; - } - - .keys { - width: 318px; - } - - .logo { - width: 150px; - } -} - -@media (max-width: 1199px) and (min-width: 769px) { - #piano { - width: 675px; - } - - .keys { - width: 633px; - } -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md deleted file mode 100644 index 0354bd888aadd7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6996a -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -By now, you should be familiar with the basic elements an HTML page should have. - -Set up your code with a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element. - -# --hints-- - -Your code should have a `` declaration. - -```js -assert(code.match(//i)); -``` - -Your code should have an `html` element. - -```js -assert(document.querySelectorAll('html').length === 1); -``` - -Your code should have a `head` element within the `html` element. - -```js -assert(document.querySelectorAll('head').length === 1); -``` - -Your code should have a `body` element within the `html` element. - -```js -assert(document.querySelectorAll('body').length === 1); -``` - -Your `head` element should come before your `body` element. - -```js -assert(document.querySelector('body').previousElementSibling.tagName === 'HEAD'); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md deleted file mode 100644 index 9582c687c7ea2e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6996b -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Within the `head` element, add a `meta` tag which sets the `charset` to `UTF-8`, and a `title` element with the value `Rothko Painting`. - -Within the `body` element, add an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. -# --hints-- - -Your code should have a `meta` tag. - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -The `meta` tag should set the `charset` to `UTF-8`. - -```js -assert(document.querySelector('meta').getAttribute('charset') === 'UTF-8'); -``` - -Your code should have a `title` element. - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -The `title` should be `Rothko Painting`. - -```js -assert(document.querySelector('title').innerText === 'Rothko Painting'); -``` - -Your code should have an `img` element. - -```js -assert(document.querySelectorAll('img').length === 1); -``` - -The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. - -```js -assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md deleted file mode 100644 index 45b81206b357b7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6996c -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -In the CSS box model, every HTML element is treated as a box with four areas. - -Imagine you receive a box from your favorite online retailer -- the content is the item in the box, or in our case, a header, paragraph, or image element. - -Change the `src` attribute in the `` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`. - -# --hints-- - -The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png` - -```js -assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Rothko Painting - - ---fcc-editable-region-- - ---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md deleted file mode 100644 index 765122fc40d12e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6996d -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it. - -Think of the border like the cardboard box your item was shipped in. - -Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` - -# --hints-- - -The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` - -```js -assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Rothko Painting - - ---fcc-editable-region-- - ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md deleted file mode 100644 index df9f52fe8a47ef..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6996e -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Margin is the area outside of the box, and can be used to control the space between other boxes or elements. - -Here the bottom element has a larger top margin, pushing it further down the page. - -Now that you understand the CSS box model, let's get started on the Rothko painting. - -Remove the `` element. - -# --hints-- - -You should not have an `img` element in your code. - -```js -assert(document.querySelector('img') === null); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Rothko Painting - - ---fcc-editable-region-- - ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md deleted file mode 100644 index d5c739abeac89f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6996f -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Add a `div` element in the `body`. - -Set the `class` attribute equal to `canvas`. For example, `
`. - -This will act as the canvas for your painting. - -# --hints-- - -Your code should have a `div` element. - -```js -assert(document.querySelectorAll('div').length === 1) -``` - -The `div` element should have a `class` with the value `canvas`. - -```js -assert(document.querySelector('div').className.split(' ').includes('canvas')) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Rothko Painting - - ---fcc-editable-region-- - ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md deleted file mode 100644 index 0ea1371583c0b8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69970 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Before you can start styling the `div` you added, you need to link your CSS to your HTML. - -Add a `link` element to link your `styles.css` file. Set the `href` to `./styles.css`, and remember to set the `rel` attribute to `stylesheet`. - -# --hints-- - -Your code should have a `link` element. - -```js -assert(//.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Rothko Painting ---fcc-editable-region-- - ---fcc-editable-region-- - - -
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md deleted file mode 100644 index 5692e34e757f21..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69971 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Time for CSS. - -Even though your `
` has no text, it's still treated as a box with content. -Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. -Here's a CSS rule that sets the width of the class `card` to 300 pixels: - -```css -.card { - width: 300px; -} -``` - -# --hints-- - -Your code should have a `.canvas` selector. - -```js -const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas'); -assert(hasCanvas) -``` - -You should set the `width` property to `500px`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px') -assert(hasWidth); -``` - -Your `.canvas` element should have a `width` of `500px`. - -```js -const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width'); -assert(width === '500px'); -``` - -# --seed-- - -## --seed-contents-- - -```css ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```html - - - - - Rothko Painting - - - -
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md deleted file mode 100644 index 65f77ecc018afa..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69972 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Add the `height` property with the value `600px` to your `.canvas` rule. - -# --hints-- - -You should set the `height` property to `600px`. - -```js -const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px'); -assert(hasHeight); -``` - -Your `.canvas` element should have a `height` of `600px`. - -```js -const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height'); -assert(canvasHeight === '600px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md deleted file mode 100644 index 6e38ea0aace5e2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69973 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Change the `background-color` of the canvas to `#4d0f00`. - -# --hints-- - -You should set the `background-color` property to `#4d0f00`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)'); -assert(hasBackground); -``` - -Your `.canvas` element should have a `background-color` of `#4d0f00`. - -```js -const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color'); -assert(canvasBackground === 'rgb(77, 15, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md deleted file mode 100644 index 2af09ce1ff8f28..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69974 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Every painting needs a frame. - -Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class. -# --hints-- - -You should add a new `div` element. - -```js -assert(document.querySelectorAll('div').length === 2) -``` - -Your `.canvas` element should be nested in the new `div` element. - -```js -assert(document.querySelector('.canvas').parentElement.tagName === 'DIV'); -``` - -Your new `div` should have a `class` with the value `frame`. - -```js -assert(document.querySelector('div').className.split(' ').includes('frame')); -``` - -Your new `div` should be within your `body` element. - -```js -assert(document.querySelector('div').parentElement.tagName === 'BODY'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} -``` - -```html - - - - - Rothko Painting - - - ---fcc-editable-region-- - -
-
- ---fcc-editable-region-- - - ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md deleted file mode 100644 index 351e6bf526ecd1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69975 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Write a new rule using the `.frame` class selector. - -Use the `border` shorthand declaration to give the `.frame` element a solid, black border with a width of `50px`. - -# --hints-- - -Your code should have a `.frame` selector. - -```js -const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame'); -assert(hasFrame); -``` - -You should set the `border` property to `50px solid black`. - -```js -const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black'); -assert(hasBorder); -``` - -Your `.frame` element should have a `50px solid black` `border`. - -```js -const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border'); -assert(frameBorder === '50px solid black'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md deleted file mode 100644 index a66a09fe26bfda..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69976 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -The frame is much too wide. - -In `.frame`, set its `width` to 500 pixels. - -# --hints-- - -You should set the `width` property to `500px`. - -```js -const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px'); -assert(widthFilter.length === 2); -``` - -Your `.frame` element should have a `width` of `500px`. - -```js -const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width'); -assert(frameWidth === '500px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md deleted file mode 100644 index fffa032b224934..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69977 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Use padding to adjust the spacing within an element. - -In `.frame`, use the `padding` shorthand property to increase the space between the `.frame` and `.canvas` elements by `50px`. The shorthand will increase space in the top, bottom, left, and right of the element's border and canvas within. - -# --hints-- - -You should set the `padding` property to `50px`. - -```js -const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px'); -assert(hasPadding); -``` - -Your `.frame` element should have a `padding` value of `50px`. - -```js -const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding'); -assert(framePadding === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md deleted file mode 100644 index 34a33d9846d777..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69978 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Use margins to adjust the spacing outside of an element. - -Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page. - -# --hints-- - -You should set the `margin` property to `20px auto`. - -```js -const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto'); -assert(hasMargin); -``` - -Your `.frame` element should have a `margin` value of `20px auto`. - -```js -const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin'); -assert(frameMargin === '20px auto'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md deleted file mode 100644 index 74560ee054158f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69979 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Add a new `div` element inside of your `.canvas` element. - -Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle. - -# --hints-- - -You should create a new `div` element. - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -You should nest the new `div` element within your `.canvas` element. - -```js -assert(document.querySelector('.canvas').children[0].tagName === 'DIV'); -``` - -Your new `div` should have a `class` attribute with a value `one`. - -```js -assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one')); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} -``` - -```html - - - - - Rothko Painting - - - -
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md deleted file mode 100644 index 6490cbccbe01cb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6997a -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Write a new rule that targets `.one` and set its `width` to 425 pixels. - -# --hints-- - -You should have a `.one` selector. - -```js -const hasOne = new __helpers.CSSHelp(document).getStyle('.one'); -assert(hasOne); -``` - -You should set the `width` property to `425px`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px'); -assert(hasWidth); -``` - -Your `.one` element should have a `width` value of `425px`. - -```js -const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width'); -assert(oneWidth === '425px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md deleted file mode 100644 index 4478884a82d7ed..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6997b -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Now set the `height` for `.one` to 150 pixels. - -# --hints-- - -You should set the `height` property to `150px`. - -```js -const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px'); -assert(hasHeight); -``` - -Your `.one` element should have a `height` value of `150px`. - -```js -const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height'); -assert(oneHeight === '150px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md deleted file mode 100644 index bd9e89c942fd7c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6997c -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Set the `background-color` of `.one` to `#efb762`. - -# --hints-- - -You should set the `background-color` property to `#efb762`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)'); -assert(hasBackground) -``` - -Your `.one` element should have a `background-color` value of `#efb762`. - -```js -const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color'); -assert(oneBackground === 'rgb(239, 183, 98)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md deleted file mode 100644 index 11b91323beccf1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6997d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Use margins to position the `.one` element on the canvas. - -Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`. - -# --hints-- - -You should set the `margin` property to `20px auto`. - -```js -const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto'); -assert(marginFilter.length === 2); -``` - -Your `.one` element should have a `margin` value of `20px auto`. - -```js -const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin'); -assert(oneMargin === '20px auto'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md deleted file mode 100644 index 902607455a2ac4..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6997e -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels. - -Add `padding` of `1px` to the `.canvas` element to give the `.one` element something solid to push off of. - -# --hints-- - -You should set the `padding` property to `1px`. - -```js -const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px'); -assert(hasPadding); -``` - -Your `.canvas` element should have a `padding` value of `1px`. - -```js -const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding'); -assert(canvasPadding === '1px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md deleted file mode 100644 index 05297dd3a73d3e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6997f -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels. - -Replace the `padding` property with `overflow` set to `hidden` - changing the canvas back to its original dimensions. - -# --hints-- - -You should remove the `padding` property from the `.canvas` selector. - -```js -const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding'); -assert(!canvasPadding); -``` - -You should set the `overflow` property to `hidden`. - -```js -const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden'); -assert(hasOverflow); -``` - -Your `.canvas` element should have an `overflow` value of `hidden`. - -```js -const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow'); -assert(canvasOverflow === 'hidden') -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; ---fcc-editable-region-- - padding: 1px; ---fcc-editable-region-- -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md deleted file mode 100644 index 94455c3665d2d8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69980 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle. - -# --hints-- - -You should not change the existing `.one` element. - -```js -assert(document.querySelectorAll('.one').length === 1); -``` - -You should have a second `div` element in your `.canvas` element. - -```js -assert(document.querySelector('.canvas').children[1].tagName === 'DIV'); -``` - -Your second `div` element should have a `class` value of `two`. - -```js -assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two')); -``` - -Your `.two` element should come after your `.one` element. - -```js -assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one')); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md deleted file mode 100644 index da0bd2e49db6d3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69981 -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels. - -# --hints-- - -You should have a `.two` selector. - -```js -const hasTwo = new __helpers.CSSHelp(document).getStyle('.two'); -assert(hasTwo); -``` - -You should set the `width` property to `475px`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px'); -assert(hasWidth); -``` - -Your `.two` element should have a `width` value of `475px`. - -```js -const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width'); -assert(twoWidth === '475px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md deleted file mode 100644 index 6a7eb6c6d086f6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69982 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Set the `height` of the `.two` element to 200 pixels. - -# --hints-- - -You should set the `height` property to `200px`. - -```js -const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px'); -assert(hasHeight); -``` - -Your `.two` element should have a `height` value of `200px`. - -```js -const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height'); -assert(twoHeight === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md deleted file mode 100644 index 19608f2692aa5a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69983 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Set the `background-color` of the `.two` element to `#8f0401`. - -# --hints-- - -You should set the `background-color` property to `#8f0401`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)'); -assert(hasBackground); -``` - -Your `.two` element should have a `background-color` value of `#8f0401`. - -```js -const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color'); -assert(twoBackground === 'rgb(143, 4, 1)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md deleted file mode 100644 index 2def25b262fcca..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69984 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Center the `.two` element by setting its `margin` to `auto`. - -# --hints-- - -You should set the `margin` property to `auto`. - -```js -const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto'); -assert(hasMargin); -``` - -Your `.two` element should have a `margin` value of `auto`. - -```js -const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); -assert(twoMargin === 'auto'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md deleted file mode 100644 index 5994749bd4f2e0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69986 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle. - -# --hints-- - -Your existing `.one` and `.two` elements should not be changed. - -```js -assert(document.querySelectorAll('.one').length === 1); -assert(document.querySelectorAll('.two').length === 1); -``` - -Your new `div` should be nested in your `.canvas` element. - -```js -assert(document.querySelector('.canvas').children[2].tagName === 'DIV'); -``` - -Your new `div` should come after your `.two` element. - -```js -assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV'); -``` - -Your new `div` element should have a `class` with the value `three`. - -```js -assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three')); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: auto; -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md deleted file mode 100644 index 1376ec85ccf07e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69987 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -You don't always have to use pixels when sizing an element. - -Create a new rule, `.three`, and set its `width` to `91%`. - -# --hints-- - -You should use the `.three` selector. - -```js -const hasThree = new __helpers.CSSHelp(document).getStyle('.three'); -assert(hasThree); -``` - -You should set the `width` property to `91%`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%'); -assert(hasWidth); -``` - -Your `.three` element should have a `width` value of `91%`. - -```js -const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width'); -assert(threeWidth === '91%'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md deleted file mode 100644 index c1a860a81826a1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69988 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Set the `height` of `.three` to `28%`. - -# --hints-- - -You should set the `height` property to `28%`. - -```js -const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%'); -assert(hasHeight); -``` - -Your `.three` element should have a `height` value of `28%`. - -```js -const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height'); -assert(threeHeight === '28%'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: auto; -} - -.three { - width: 91%; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md deleted file mode 100644 index b5a40dfd37c1f9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69989 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Change the `background-color` of `.three` to `#b20403`. - -# --hints-- - -You should set the `background-color` property to `#b20403`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)'); -assert(hasBackground); -``` - -Your `.three` element should have a `background-color` value of `#b20403`. - -```js -const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color'); -assert(threeBackground === 'rgb(178, 4, 3)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: auto; -} - -.three { - width: 91%; - height: 28%; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md deleted file mode 100644 index 3ed4e87a89a31c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6998a -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Center the `.three` element on the canvas by setting its `margin` to `auto`. - -# --hints-- - -You should set the `margin` property to `auto`. - -```js -const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto'); -assert(marginFilter.length === 2); -``` - -Your `.three` element should have a `margin` value of `auto`. - -```js -const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin'); -assert(threeMargin === 'auto'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: auto; -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md deleted file mode 100644 index e16dc6aa5136b8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6998b -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -It's helpful to have your margins push in one direction. - -In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels. - -In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels. - -# --hints-- - -You should set the `margin` property to `0 auto 20px`. - -```js -const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px'); -assert(hasMargin); -``` - -Your `.two` element should have a `margin` value of `0 auto 20px`. - -```js -const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); -assert(twoMargin === '0px auto 20px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; ---fcc-editable-region-- - margin: auto; ---fcc-editable-region-- -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md deleted file mode 100644 index 66c06fd0e9c19e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6998c -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -The colors and shapes of your painting are too sharp to pass as a Rothko. - -Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element. - -# --hints-- - -You should set the `filter` property to `blur(2px)`. - -```js -const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)'); -assert(hasFilter); -``` - -Your `.canvas` element should have a `filter` value of `blur(2px)`. - -```js -const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter'); -assert(canvasFilter === 'blur(2px)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md deleted file mode 100644 index 0731cd76597139..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6998d -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel. - -Here's an example of a rule that increases the `blur` of two elements: - -```css -h1, p { - filter: blur(3px); -} -``` - -# --hints-- - -You should have a `.one, .two` selector. - -```js -const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two'); -assert(oneTwo); -``` - -You should set the `filter` property to `blur(1px)`. - -```js -const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)'); -assert(hasFilter) -``` - -Your `.one` element should have a `filter` value of `blur(1px)`. - -```js -const one = document.querySelector('.one'); -const oneFilter = getComputedStyle(one).filter; -assert(oneFilter === 'blur(1px)'); -``` - -Your `.two` element should have a filter value of `blur(1px)`. - -```js -const two = document.querySelector('.two'); -const twoFilter = getComputedStyle(two).filter; -assert(twoFilter === 'blur(1px)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md deleted file mode 100644 index 504855f1620fa7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6998e -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Increase the `blur` of `.three` by 2 pixels. - -# --hints-- - -You should set the `filter` property to `blur(2px)`. - -```js -const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)'); -assert(filterFilter.length === 2); -``` - -Your `.three` element should have a `filter` value of `blur(2px)`. - -```js -const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter'); -assert(threeFilter === 'blur(2px)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md deleted file mode 100644 index 251253face2f6b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6998f -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -The rectangles are too small and their edges don't have the soft quality of a painting. - -Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`. - -# --hints-- - -You should set the `box-shadow` property to `0 0 3px 3px #efb762`. - -```js -const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px'); -assert(hasBoxShadow); -``` - -Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`. - -```js -const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow'); -assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md deleted file mode 100644 index 8ecac547a24951..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69990 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`. - -# --hints-- - -You should set the `box-shadow` property to `0 0 3px 3px #8f0401`. - -```js -const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px'); -assert(hasBoxShadow); -``` - -Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`. - -```js -const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow'); -assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; - box-shadow: 0 0 3px 3px #efb762; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md deleted file mode 100644 index a0e9e6ae11b9a1..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69991 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`. - -# --hints-- - -You should set the `box-shadow` property to `0 0 5px 5px #b20403`. - -```js -const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px'); -assert(hasBoxShadow); -``` - -Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`. - -```js -const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow'); -assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; - box-shadow: 0 0 3px 3px #efb762; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md deleted file mode 100644 index f26f0c94b90599..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69992 -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -The corners of each rectangle are still too sharp. - -Round each corner of the `.one` element by 9 pixels, using the `border-radius` property. - -# --hints-- - -You should set the `border-radius` property to `9px`. - -```js -const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px'); -assert(hasBorderRadius); -``` - -Your `.one` element should have a `border-radius` value of `9px`. - -```js -const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius'); -assert(oneBorderRadius === '9px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; - box-shadow: 0 0 3px 3px #efb762; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md deleted file mode 100644 index e3effb601d3018..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69993 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Use the `border-radius` property on the `.two` selector, to set its top-left and bottom-right radii to `8px`, and top-right and bottom-left radii to `10px`. - -# --hints-- - -You should set the `border-radius` property to `8px 10px`. - -```js -const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px'); -assert(hasBorderRadius); -``` - -Your `.two` element should have a `border-radius` value of `8px 10px`. - -```js -const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius'); -assert(twoBorderRadius === '8px 10px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; - box-shadow: 0 0 3px 3px #efb762; - border-radius: 9px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md deleted file mode 100644 index 6656f427a1bd9d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69994 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners. - -Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels. - -# --hints-- - -You should set the `border-radius` property to `30px 25px 60px 12px`. - -```js -const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px'); -assert(hasBorderRadius); -``` - -Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`. - -```js -const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius'); -assert(threeBorderRadius === '30px 25px 60px 12px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; - box-shadow: 0 0 3px 3px #efb762; - border-radius: 9px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; - border-radius: 8px 10px; -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md deleted file mode 100644 index 14e9bd84d529c2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69995 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Rotate each rectangle to give them more of an imperfect, hand-painted look. - -Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees. - -# --hints-- - -You should set the `transform` property to `rotate(-0.6deg)`. - -```js -const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)'); -assert(hasTransform); -``` - -Your `.one` element should have a `transform` value of `rotate(-0.6deg)`. - -```js -const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform'); -assert(oneTransform === 'rotate(-0.6deg)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; - box-shadow: 0 0 3px 3px #efb762; - border-radius: 9px; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; - border-radius: 8px 10px; -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; - border-radius: 30px 25px 60px 12px; -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md deleted file mode 100644 index ed50b6b0893ad9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69996 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Rotate the `.two` element clockwise by 0.4 degrees. - -# --hints-- - -You should set the `transform` property to `rotate(0.4deg)`. - -```js -const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)'); -assert(hasTransform); -``` - -Your `.two` element should have a `transform` value of `rotate(0.4deg)`. - -```js -const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform'); -assert(twoTransform === 'rotate(0.4deg)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; - box-shadow: 0 0 3px 3px #efb762; - border-radius: 9px; - transform: rotate(-0.6deg); -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; - border-radius: 8px 10px; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; - border-radius: 30px 25px 60px 12px; -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md deleted file mode 100644 index 9bce8c939637cb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69997 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Rotate `.three` counter clockwise by 0.2 degrees. - -With this final step, your Rothko painting is now complete. - -# --hints-- - -You should set the `transform` property to `rotate(-0.2deg)`. - -```js -const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)'); -assert(hasTransform); -``` - -Your `.three` element should have a `transform` value of `rotate(-0.2deg)`. - -```js -const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform'); -assert(threeTransform === 'rotate(-0.2deg)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; - box-shadow: 0 0 3px 3px #efb762; - border-radius: 9px; - transform: rotate(-0.6deg); -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; - border-radius: 8px 10px; - transform: rotate(0.4deg); -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; - border-radius: 30px 25px 60px 12px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` - -## --solutions-- - -```html - - - - - Rothko Painting - - - -
-
-
-
-
-
-
- - -``` - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; - box-shadow: 0 0 3px 3px #efb762; - border-radius: 9px; - transform: rotate(-0.6deg); -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; - border-radius: 8px 10px; - transform: rotate(0.4deg); -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; - border-radius: 30px 25px 60px 12px; - transform: rotate(-0.2deg); -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md deleted file mode 100644 index 4526afe38b14f0..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 615f2abbe7d18d49a1e0e1c8 -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -We've provided a basic HTML boilerplate for you. - -Create an `h1` element within your `body` element and give it the text `Nutrition Facts`. - -# --hints-- - -You should add a new `h1` element. - -```js -assert.exists(document.querySelector('h1')); -``` - -Your `h1` element should be within your `body` element. - -```js -assert(document.querySelector('h1')?.parentElement?.localName === 'body'); -``` - -Your `h1` element should have the text `Nutrition Facts`. - -```js -assert(document.querySelector('h1')?.innerText === 'Nutrition Facts'); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - - - - - Nutrition Label - - - - - ---fcc-editable-region-- -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md deleted file mode 100644 index 11b8188cc989fb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 615f2d4150fe0d4cbd0f2628 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Below your `h1` element, add a `p` element with the text `8 servings per container`. - -# --hints-- - -You should add a new `p` element. - -```js -assert.exists(document.querySelector('p')); -``` - -Your `p` element should be within your `body` element. - -```js -assert(document.querySelector('p')?.parentElement?.localName === 'body'); -``` - -Your `p` element should come after your `h1` element. - -```js -assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1'); -``` - -Your `p` element should have the text `8 servings per container`. - -```js -assert(document.querySelector('p')?.innerText === '8 servings per container'); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - - - - - Nutrition Label - - -

Nutrition Facts

- - - ---fcc-editable-region-- -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md deleted file mode 100644 index 94213e09246518..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 615f34948891834dd77655a6 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Add a second `p` element with the text `Serving size 2/3 cup (55g)`. - -# --hints-- - -You should have a second `p` element. - -```js -assert(document.querySelectorAll('p')?.length === 2); -``` - -Your second `p` element should be within your `body` element. - -```js -assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body'); -``` - -Your second `p` element should come after your existing `p` element. - -```js -assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p'); -``` - -Your second `p` element should have the text `Serving size 2/3 cup (55g)`. - -```js -assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)'); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - - - - - Nutrition Label - - -

Nutrition Facts

-

8 servings per container

- - - ---fcc-editable-region-- -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md deleted file mode 100644 index ebed308079d62c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: 615f34ecc1091b4fd5a8a484 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`. - -This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`. - -Also add a `link` element to link your `styles.css` file. - -# --hints-- - -You should have two `link` elements. - -```js -assert(code.match(/ link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800')); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - - - - - Nutrition Label - - - -

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

- - ---fcc-editable-region-- -``` - -```css - -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md deleted file mode 100644 index ad1b189bed05b6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 615f357957e370510f21ea16 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Create a `body` selector and give it a `font-family` set to `Open Sans` with a fallback of `sans-serif`. - -Remember that fonts with spaces in the name must be wrapped in quotes for CSS. - -# --hints-- - -You should have a `body` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -Your `body` selector should have a `font-family` property set to `"Open Sans", sans-serif`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open Sans", sans-serif'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md deleted file mode 100644 index 52a336e05226bb..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 615f378014c2da526a109c81 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -The font is a bit small. Create an `html` selector and set the font to have a size of `16px`. - -# --hints-- - -You should have an `html` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('html')); -``` - -Your `html` selector should have a `font-size` property set to `16px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- - -body { - font-family: 'Open Sans', sans-serif; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md deleted file mode 100644 index 96e33cc1a34914..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 615f38279e5c3d53692ea441 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Wrap your `h1` and `p` elements in a `div` element. Give that `div` a `class` attribute set to `label`. - -# --hints-- - -You should create a new `div` element. - -```js -assert(document.querySelector('div')); -``` - -Your new `div` element should have the `class` attribute set to `label`. - -```js -assert(document.querySelector('div')?.classList?.contains('label')); -``` - -Your `h1` and `p` elements should be within your new `.label` element. - -```js -const children = [...document.querySelectorAll('h1'), ...document.querySelectorAll('p')]; -assert(children?.every(child => child?.parentElement?.classList?.contains('label'))); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - ---fcc-editable-region-- - -

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

- ---fcc-editable-region-- - -``` - -```css -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md deleted file mode 100644 index 13f5f2593b836e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 615f38cabc64e3556f98cc1a -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Borders can be used to group and prioritize content. - -Create a `.label` selector and give it a `border` set to `2px solid black`. - -# --hints-- - -You should have a `.label` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.label')); -``` - -Your `.label` selector should have a `border` property set to `2px solid black`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid black'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

-
- - -``` - -```css -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md deleted file mode 100644 index 9f08de011e61f9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 615f3949f58e12577dcefb00 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Good use of white space can bring focus to the important elements of your page, and help guide your user's eyes through your text. - -Give your `.label` selector a `width` property set to `270px`. - -# --hints-- - -Your `.label` selector should have a `width` property set to `270px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

-
- - -``` - -```css -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - ---fcc-editable-region-- -.label { - border: 2px solid black; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md deleted file mode 100644 index f273bf9a263c32..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 615f39d7da41b15851fa3fb9 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Give your `.label` selector a `margin` property set to `20px auto`, and a `padding` property set to `0 7px`. - -# --hints-- - -Your `.label` selector should have a `margin` property set to `20px auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.label')?.margin === '20px auto'); -``` - -Your `.label` selector should have a `padding` property set to `0 7px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

-
- - -``` - -```css -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - ---fcc-editable-region-- -.label { - border: 2px solid black; - width: 270px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md deleted file mode 100644 index 63304b702e4a6f..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 615f3b091162165948e1cb33 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -If you inspect your `.label` element with your browser's developer tools, you may notice that it's actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element's size. - -To solve this, reset the box model by creating a `*` selector and giving it a `box-sizing` property of `border-box`. - -# --hints-- - -You should create a `*` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('*')); -``` - -Your `*` selector should have a `box-sizing` property set to `border-box`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

-
- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md deleted file mode 100644 index cb116abcc953ae..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 615f3cafd794015aa9547a6d -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Remember that the use of `h1`, `h2`, and similar tags determine the semantic structure of your HTML. However, you can adjust the CSS of these elements to control the visual flow and hierarchy. - -Create an `h1` rule and set the `font-weight` property to `800`. This will make your `h1` text bolder. - -# --hints-- - -You should create an `h1` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')); -``` - -Your `h1` selector should have a `font-weight` property set to `800`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md deleted file mode 100644 index 43f69ec85a5835..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 615f3d9e59db4b5b8e960762 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Give your `h1` selector a `text-align` property of `center`. - -# --hints-- - -Your `h1` selector should have a `text-align` property set to `center`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - ---fcc-editable-region-- -h1 { - font-weight: 800; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md deleted file mode 100644 index a0c09b066dc4d6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 615f3e1b7233ee5c7595771f -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Fine-tune the placement of your `h1` by giving it a top and bottom margin of `-4px` and a left and right margin of `0`. - -# --hints-- - -Your `h1` selector should have a `margin` property set to `-4px 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - ---fcc-editable-region-- -h1 { - font-weight: 800; - text-align: center; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md deleted file mode 100644 index 475d0849491bc6..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 615f3e4af8008c5d494d3afe -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Create a `p` selector and remove all margins. - -# --hints-- - -You should create a `p` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('p')); -``` - -Your `p` selector should have a `margin` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -h1 { - font-weight: 800; - text-align: center; - margin: -4px 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md deleted file mode 100644 index 56ea061528112a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 615f3ed16592445e57941aec -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Lines can help separate and group important content, especially when space is limited. - -Create a `div` element below your `h1` element, and give it a `class` attribute set to `divider`. - -# --hints-- - -You should create a new `div`. - -```js -assert(document.querySelectorAll('div')?.length === 2); -``` - -Your new `div` should have the `class` attribute set to `divider`. - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('divider')); -``` - -Your `.divider` element should be within your `.label` element. - -```js -assert(document.querySelector('.label')?.querySelector('.divider')); -``` - -Your `.divider` element should come after your `h1` element. - -```js -assert(document.querySelector('.divider')?.previousElementSibling?.localName === 'h1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - ---fcc-editable-region-- -
-

Nutrition Facts

-

8 servings per container

-

Serving size 2/3 cup (55g)

-
---fcc-editable-region-- - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -h1 { - font-weight: 800; - text-align: center; - margin: -4px 0; -} - -p { - margin: 0; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md deleted file mode 100644 index 84de4ac6133fb9..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 615f405b89a7ec5f8e2d11f4 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Create a selector for your new `.divider` and set the `border-bottom` property to `1px solid #888989`. Also give it a top and bottom margin of `2px`. It should not have any left or right margin. - -# --hints-- - -You should create a `.divider` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')); -``` - -Your `.divider` selector should have a `border-bottom` property set to `1px solid #888989`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.borderBottom === '1px solid rgb(136, 137, 137)'); -``` - -Your `.divider` selector should have a `margin` property set to `2px 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -h1 { - font-weight: 800; - text-align: center; - margin: -4px 0; -} - -p { - margin: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md deleted file mode 100644 index 79da01c2a7f633..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 615f40b01f680e608d360ed4 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -The `letter-spacing` property can be used to adjust the space between each character of text in an element. - -Give your `h1` selector a `letter-spacing` property set to `0.15px` to space them out a bit more. - -# --hints-- - -Your `h1` selector should have a `letter-spacing` property set to `0.15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - ---fcc-editable-region-- -h1 { - font-weight: 800; - text-align: center; - margin: -4px 0; -} ---fcc-editable-region-- - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md deleted file mode 100644 index 9fea5c17ce0404..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 615f4172e9eec061d6456221 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Nutrition labels have a lot of bold text to draw attention to important information. Rather than targeting each element that needs to be bold, it is more efficient to use a class to apply the bold styling to every element. - -Give your second `p` element a `class` attribute set to `bold`. - -# --hints-- - -Your second `p` element should have a `class` attribute set to `bold`. - -```js -assert(document.querySelectorAll('p')?.[1]?.classList?.contains('bold')); -``` - -Your first `p` element should not have a `class` attribute set to `bold`. - -```js -assert(!document.querySelector('p')?.classList?.contains('bold')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - ---fcc-editable-region-- -
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
---fcc-editable-region-- - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -h1 { - font-weight: 800; - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px; -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md deleted file mode 100644 index 56e13a5ed71998..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 615f41c979787462e76dab90 -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Your new class does not have any styling yet. Create a `.bold` selector and give it a `font-weight` property set to `800` to make the text bold. - -Go ahead and remove the `font-weight` property from your `h1` selector as well. - -# --hints-- - -You should have a `.bold` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.bold')); -``` - -Your `.bold` selector should have a `font-weight` property set to `800`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.bold')?.fontWeight === '800'); -``` - -Your `h1` selector should not have a `font-weight` property. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === ""); -``` - -You should not remove your `h1` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('h1')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - ---fcc-editable-region-- -h1 { - font-weight: 800; - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px; -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md deleted file mode 100644 index de2bc32eb1e10c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 615f423cf65d5864132a0956 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Give your `h1` element a `class` attribute set to `bold`. This will make the text bold again. - -# --hints-- - -Your `h1` element should have a `class` attribute set to `bold`. - -```js -assert(document.querySelector('h1')?.classList?.contains('bold')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - ---fcc-editable-region-- -
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
---fcc-editable-region-- - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md deleted file mode 100644 index 3e1e57a9a4179c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 615f42a021625f656101ef93 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Horizontal spacing between equally important elements can increase the readability of your text. - -Wrap the text `2/3 cup (55g)` in a `span` element, and give it a `class` attribute set to `right`. - -# --hints-- - -You should create a new `span` element. - -```js -assert(document.querySelector('span')); -``` - -Your new `span` element should have the `class` attribute set to `right`. - -```js -assert(document.querySelector('span')?.classList?.contains('right')); -``` - -Your `.right` element should have the text `2/3 cup (55g)`. - -```js -assert(document.querySelector('span')?.textContent === '2/3 cup (55g)'); -``` - -Your `p` element should still have the text `Serving size 2/3 cup (55g)`. - -```js -assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - ---fcc-editable-region-- -
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
---fcc-editable-region-- - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md deleted file mode 100644 index a827ed632ca51b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 615f4bfb9de4a16703b56eb6 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -The `float` property is used to place an element on the left or right of its container, allowing other content (such as text) to wrap around it. - -Create a new `.right` selector and set the `float` property to `right`. - -# --hints-- - -You should create a new `.right` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -Your `.right` selector should have a `float` property set to `right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.float === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md deleted file mode 100644 index c613e7f30f1bd7..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 615f4ce9d877b668417c0c42 -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Wrap everything within the `.label` element in a new `header` element. - -# --hints-- - -You should create a new `header` element. - -```js -assert(document.querySelector('header')); -``` - -Your `header` element should be within your `.label` element. - -```js -assert(document.querySelector('header')?.parentElement?.classList?.contains('label')); -``` - -Your `h1`, `div`, and `p` elements should be within your new `header` element. - -```js -const children = document.querySelector('header')?.children; -assert(children?.[0]?.localName === 'h1'); -assert(children?.[1]?.localName === 'div'); -assert(children?.[2]?.localName === 'p'); -assert(children?.[3]?.localName === 'p'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - ---fcc-editable-region-- -
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
---fcc-editable-region-- - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md deleted file mode 100644 index d7c0c3f1f4150a..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 615f4dde9d72e3694cb9ee3b -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Now update your `h1` selector to be `header h1` to specifically target your `h1` element within your new `header`. - -# --hints-- - -You should have a `header h1` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('header h1')); -``` - -You should not have an `h1` selector. - -```js -assert.isNull(new __helpers.CSSHelp(document).getStyle('h1')); -``` - -You should not change any properties in the selector. - -```js -const style = new __helpers.CSSHelp(document).getStyle('header h1'); -assert(style?.textAlign === 'center'); -assert(style?.margin === '-4px 0px'); -assert(style?.letterSpacing === '0.15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - ---fcc-editable-region-- -h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} ---fcc-editable-region-- - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md deleted file mode 100644 index 2fd85ad3563420..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 615f4ec58334106a4170c2a8 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider lg`. - -# --hints-- - -You should create a new `div` element. - -```js -assert(document.querySelectorAll('div')?.length === 3); -``` - -Your new `div` element should come after your `header` element. - -```js -assert(document.querySelector('.label')?.lastElementChild?.localName === 'div'); -``` - -Your new `div` element should have the `class` attribute set to `divider lg`. - -```js -const div = document.querySelector('.label')?.lastElementChild; -assert(div?.classList?.contains('divider')); -assert(div?.classList?.contains('lg')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md deleted file mode 100644 index 5b5d116e02234c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -id: 615f4f9e4a40566b776a8f38 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Create a new `.lg` selector and give it a `height` property set to `10px`. Also create an `.lg, .md` selector and set the `background-color` property to `black`. - -# --hints-- - -You should have a new `.lg` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.lg')); -``` - -Your `.lg` selector should have a `height` property set to `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.lg')?.height === '10px'); -``` - -You should have a new `.lg, .md` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')); -``` - -Your `.lg, .md` selector should have a `background-color` property set to `black`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.backgroundColor === 'black'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md deleted file mode 100644 index 86fe43af33f635..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -id: 615f50473cc0196c6dd3892a -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -You may notice there is still a small border at the bottom of your `.lg` element. To reset this, give your `.lg, .md` selector a `border` property set to `0`. - -# --hints-- - -Your `.lg, .md` selector should have a `border` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.borderWidth === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - ---fcc-editable-region-- -.lg, .md { - background-color: black; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md deleted file mode 100644 index cc1b6599b46b7b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 615f51257a8a516d80b6c743 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Create a new `div` below your `.lg` element and give it a `class` attribute set to `calories-info`. - -# --hints-- - -You should create another `div` element. - -```js -assert(document.querySelectorAll('div')?.length === 4); -``` - -Your new `div` should have a `class` attribute set to `calories-info`. - -```js -assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info')); -``` - -Your new `div` should come after the `.lg` element. - -```js -assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('lg')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md deleted file mode 100644 index b84b3468ee98ee..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 615f51e4e5b24a6e80eccce1 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Within your `.calories-info` element, create a `p` element. Give that `p` element a `class` attribute set to `bold sm-text`, and the text `Amount per serving`. - -# --hints-- - -You should create a new `p` element within your `.calories-info` element. - -```js -assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'p'); -``` - -Your new `p` element should have a `class` attribute set to `bold sm-text`. - -```js -assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('bold')); -assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('sm-text')); -``` - -Your new `p` element should have the text `Amount per serving`. - -```js -assert(document.querySelector('.calories-info')?.children?.[0]?.innerText === 'Amount per serving'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
---fcc-editable-region-- -
- -
---fcc-editable-region-- -
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md deleted file mode 100644 index e1e10c1c30f230..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 615f522dea4f776f64dc3e91 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -The `rem` unit stands for `root em`, and is relative to the font size of the `html` element. - -Create an `.sm-text` selector and set the `font-size` to `0.85rem`, which would calculate to be roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`). - -# --hints-- - -You should have an `.sm-text` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sm-text')); -``` - -Your `.sm-text` selector should have a `font-size` property set to `0.85rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.sm-text')?.fontSize === '0.85rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md deleted file mode 100644 index 17a0c4e20f70d3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 615f5486b8fd4b71633f69b0 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Below your `.sm-text` element, create a new `h1` element with the text `Calories 230`. Wrap the `230` portion of the text in a `span` element with the `class` set to `right`. - -# --hints-- - -You should have a new `h1` element within your `.calories-info` element. - -```js -assert(document.querySelector('.calories-info')?.querySelector('h1')) -``` - -Your `h1` element should come after your `.sm-text` element. - -```js -assert(document.querySelector('.sm-text')?.nextElementSibling?.localName === 'h1'); -``` - -Your `h1` element should have the text `Calories 230`. - -```js -// the float: right property does weird things to the inner text. -assert(document.querySelector('.calories-info')?.lastElementChild?.innerText.match(/Calories[\s|\n]*230/)); -``` - -You should create a `span` element within your new `h1` element. - -```js -assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')); -``` - -Your `span` element should have the `class` set to `right`. - -```js -assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); -``` - -Your `span` element should have the text `230`. - -```js -assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.innerText === '230'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
---fcc-editable-region-- -
-

Amount per serving

-
---fcc-editable-region-- -
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md deleted file mode 100644 index d4458ee3f7e049..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 615f575b50b91e72af079480 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Create a new `.calories-info h1` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. - -# --hints-- - -You should have a new `.calories-info h1` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')); -``` - -Your new `.calories-info h1` selector should have a `margin` property set to `-5px -2px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginTop, '-5px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginBottom, '-5px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginLeft, '-2px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginRight, '-2px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md deleted file mode 100644 index f53ef470cf7516..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 615f5af373a68e744a3c5a76 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Create a `.calories-info span` selector and set the `font-size` to `1.2em`. - -# --hints-- - -You should create a `.calories-info span` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')); -``` - -Your `.calories-info span` selector should have a `font-size` property set to `1.2em`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '1.2em'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md deleted file mode 100644 index cfd6cc33c9e2ad..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 615f5c1cb7575c7551ed8a40 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -The larger font size of the number `230` is causing it to overflow. Give the `.calories-info h1` an `overflow` property set to `hidden` to avoid this. - -# --hints-- - -Your `.calories-info h1` selector should have an `overflow` property set to `hidden`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - ---fcc-editable-region-- -.calories-info h1 { - margin: -5px -2px; -} ---fcc-editable-region-- - -.calories-info span { - font-size: 1.2em; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md deleted file mode 100644 index 9d68b8354d1ced..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 615f5fd85d0062761f288364 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Typography is often more art than science. You may have to tweak things like alignment until it looks correct. - -Give your `.calories-info span` selector a `margin-top` set to `-7px`. This will shift your `230` text into place. - -# --hints-- - -Your `.calories-info span` selector should have a `margin-top` set to `-7px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.marginTop === '-7px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - ---fcc-editable-region-- -.calories-info span { - font-size: 1.2em; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md deleted file mode 100644 index b9b50a67f0be8e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 615f61338c8ca176d6445574 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider md`. - -# --hints-- - -You should create a new `div` within your `.label` element. - -```js -assert(document.querySelectorAll('.label > div')?.length === 3) -``` - -Your new `div` should have the `class` attribute set to `divider md`. This div should be the last element in your `.label` element. - -```js -const div = document.querySelector('.label')?.lastElementChild; -assert(div?.classList?.contains('divider') && div?.classList?.contains('md')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md deleted file mode 100644 index 235c6490c3ac2d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 615f666ac5edea782feb7e75 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Create an `.md` selector and give it a `height` property of `5px`. - -# --hints-- - -You should create an `.md` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.md')); -``` - -Your `.md` selector should have a `height` property set to `5px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.md')?.height === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md deleted file mode 100644 index 62fb6ca61de88d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 615f671b6d1919792745aa5d -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Create a new `div` element below your `.md` element. Give it a `class` attribute set to `daily-value sm-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `right bold`. - -# --hints-- - -You should create a new `div` element after your `.md` element. - -```js -assert(document.querySelector('.label')?.lastElementChild?.localName === 'div'); -assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider')); -assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('md')); -``` - -Your new `div` should have a `class` attribute set to `daily-value sm-text`. - -```js -assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value')); -assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('sm-text')); -``` - -Your new `div` element should have a `p` element. - -```js -assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p'); -``` - -Your new `p` element should have the text `% Daily Value *`. - -```js -assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *'); -``` - -Your new `p` element should have a `class` attribute set to `right bold`. - -```js -assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right')); -assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md deleted file mode 100644 index 80707dcd715e63..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 615f6823d0815b7a991f2a75 -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -The `float` styling is causing the new `p` element to be outside of the label's border. Use your existing `.divider` element as an example to add a new divider after the `p` element. - -# --hints-- - -You should create a new `div` within your `.daily-value.sm-text` element. - -```js -assert(document.querySelectorAll('.daily-value.sm-text > div')?.length === 1) -``` - -Your new `div` should have the `class` attribute set to `divider`. - -```js -assert(document.querySelector('.daily-value.sm-text > div')?.classList?.contains('divider')) -``` - -Your new `div` should come after your `p` element. - -```js -assert(document.querySelector('.daily-value.sm-text > div')?.previousElementSibling?.localName === 'p'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
---fcc-editable-region-- -
-

% Daily Value *

- -
---fcc-editable-region-- -
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md deleted file mode 100644 index 655b881bfe7083..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 615f6a7d4ba8037bc086c2c7 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Give the `.divider` selector a `clear` property set to `right`. This will clear the `float` property, pushing the divider and any following content down below the `float` text. - -# --hints-- - -Your `.divider` selector should have a `clear` property set to `right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - ---fcc-editable-region-- -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} ---fcc-editable-region-- - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md deleted file mode 100644 index 7cb965c2767ab8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -id: 615f6b2d164f81809efd9bdc -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Wrap `Total Fat` in a `span` element with the `class` set to `bold`. Wrap `10%` in another `span` element with the `class` set to `bold right`. - -# --hints-- - -You should create a new `p` element at the end of your `.daily-value` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -``` - -Your new `p` element should have the text `Total Fat 8g 10%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Fat 8g[\s|\n]+10%/)); -``` - -Your `p` element should have two `span` elements. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); -``` - -Your first `span` element should wrap the text `Total Fat`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat'); -``` - -Your first `span` element should have the `class` set to `bold`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.className === 'bold'); -``` - -Your second `span` element should wrap the text `10%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.innerText === '10%'); -``` - -Your second `span` element should have the `class` set to `bold right`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md deleted file mode 100644 index 054289a7759930..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 615f6cc778f7698258467596 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Below your element with the `Total Fat` text, create a new `p` element with the text `Saturated Fat 1g 5%`. Wrap the `5%` in a `span` with the `class` attribute set to `bold right`. - -# --hints-- - -You should create a new `p` element below your element with the `Total Fat` text. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/)); -``` - -Your new `p` element should have the text `Saturated Fat 1g 5%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/)); -``` - -Your new `p` element should have a `span` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.localName === 'span'); -``` - -Your `span` element should have the `class` attribute set to `bold right`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); -``` - -Your `span` element should wrap the `5%` text. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === "5%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-

Total Fat 8g10%

---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md deleted file mode 100644 index 569f99e7715e49..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -id: 615f6fddaac1e083502d3e6a -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -This new `p` element will need to be indented. Give it a `class` set to `indent`. - -# --hints-- - -Your `p` element with the text `Saturated Fat 1g 5%` should have a `class` attribute set to `indent`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('indent')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-

Total Fat 8g10%

---fcc-editable-region-- -

Saturated Fat 1g 5%

---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md deleted file mode 100644 index 592f9c3bd8570b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 615f70077a4ff98424236c1e -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Create a new `.indent` selector and give it a `margin-left` property set to `1em`. - -# --hints-- - -You should have a new `.indent` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.indent')); -``` - -Your new `.indent` selector should have a `margin-left` property set to `1em`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft === '1em'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md deleted file mode 100644 index 1f363003d9324c..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 615f72a872354a850d4f533e -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Create a `.daily-value p` selector to target all of your `p` elements in the `daily-value` section. Give this new selector a `border-bottom` set to `1px solid #888989`. - -# --hints-- - -You should have a new `.daily-value p` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')); -``` - -Your `.daily-value p` selector should have a `border-bottom` property set to `1px solid #888989`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md deleted file mode 100644 index 8adb231760889e..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 615f74a71f1e498619e38ee8 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -The bottom borders under your `% Daily Value *` and `Saturated Fat 1g 5%` elements do not extend the full width of the label. Add `no-divider` to the `class` for these two elements. - -# --hints-- - -Your `p` element with the text `% Daily Value *` should have `no-divider` added to the `class` attribute. Do not remove the existing classes. - -```js -const p = document.querySelector('.daily-value.sm-text')?.firstElementChild; -assert(p?.classList?.contains('no-divider')); -assert(p?.classList?.contains('bold')); -assert(p?.classList?.contains('right')); -``` - -Your `p` element with the text `Saturated Fat 1g 5%` should have `no-divider` added to the `class` attribute. Do not remove the existing classes. - -```js -const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; -assert(p?.classList?.contains('no-divider')); -assert(p?.classList?.contains('indent')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
---fcc-editable-region-- -
-

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
---fcc-editable-region-- -
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.daily-value p { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md deleted file mode 100644 index 008b34a3751495..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 615f7ad94380408d971d14f6 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -The `:not` pseudo-selector can be used to select all elements that do not match the given CSS rule. - -```css -div:not(#example) { - color: red; -} -``` - -The above selects all `div` elements without an `id` of `example`. - -Modify your `.daily-value p` selector to exclude the `.no-divider` elements. - -# --hints-- - -You should have a `.daily-value p:not(.no-divider)` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)')); -``` - -You should not have a `.daily-value p` selector. - -```js -assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p')); -``` - -You should not change the properties in the `.daily-value p:not(.no-divider)` selector. - -```js -const style = new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)'); -assert(style?.borderBottom === '1px solid rgb(136, 137, 137)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - ---fcc-editable-region-- -.daily-value p { - border-bottom: 1px solid #888989; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md deleted file mode 100644 index 048f474b01d8c3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 615f7bc680f7168ea01ebf99 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Now you will have to add separate dividers below your `.no-divider` elements. - -Your first `.no-divider` element has a `.divider` after it. Create another `.divider` after your second `.no-divider` element. - -# --hints-- - -You should create a new `div` at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); -``` - -Your new `div` should have the `class` attribute set to `divider`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md deleted file mode 100644 index c1b73b41197788..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -id: 615f7c71eab8218f846e4503 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -After your last `.divider`, create another `p` element with the text `Trans Fat 0g`. Italicize the word `Trans` by wrapping it in an `i` element. Give the new `p` element the `class` attribute set to `indent no-divider`. - -# --hints-- - -You should create a new `p` element at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -``` - -Your new `p` element should have the text `Trans Fat 0g`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText === 'Trans Fat 0g'); -``` - -Your new `p` element should have the `class` attribute set to `indent no-divider`. - -```js -const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; -assert(p?.classList?.contains('indent')); -assert(p?.classList?.contains('no-divider')); -``` - -Your new `p` element should have an `i` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'i'); -``` - -Your `i` element should wrap the text `Trans`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Trans'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md deleted file mode 100644 index 8540c74155e048..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 615f7d489a581590d1350288 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Create another `.divider` after your last `p` element. - -# --hints-- - -You should create a new `div` element at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); -``` - -Your new `div` element should have the `class` attribute set to `divider`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md deleted file mode 100644 index 405e0647f872c5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 615f7de4487b64919bb4aa5e -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Wrap the text `Cholesterol` in a `span` element, and give that `span` element the `class` attribute set to `bold`. Wrap the text `0%` in another `span` element, with the `class` set to `bold right`. - -# --hints-- - -You should create a new `p` element at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -``` - -Your new `p` element should have the text `Cholesterol 0mg 0%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Cholesterol 0mg[\s|\n]+0%/)); -``` - -Your new `p` element should have two `span` elements. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); -``` - -Your first `span` element should have the `class` attribute set to `bold`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); -``` - -Your first `span` element should wrap the text `Cholesterol`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Cholesterol'); -``` - -Your second `span` element should have the `class` attribute set to `bold right`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); -``` - -Your second `span` element should wrap the text `0%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '0%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md deleted file mode 100644 index 432939d693b865..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md +++ /dev/null @@ -1,179 +0,0 @@ ---- -id: 615f7e7281626a92bbd62da8 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Wrap the text `Sodium` in a `span` element with a `class` attribute set to `bold`. Wrap the `7%` text in another `span` element with the `class` set to `bold right`. - -# --hints-- - -You should create a new `p` element at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -``` - -Your new `p` element should have the text `Sodium 160mg 7%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Sodium 160mg[\s|\n]+7%/)); -``` - -Your new `p` element should have two `span` elements. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); -``` - -Your first `span` element should have the `class` attribute set to `bold`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); -``` - -Your first `span` element should wrap the text `Sodium`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Sodium'); -``` - -Your second `span` element should have the `class` attribute set to `bold right`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); -``` - -Your second `span` element should wrap the text `7%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '7%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md deleted file mode 100644 index 815359307b789b..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: 615f7ecb09de9a938ef94756 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` bold, and the text `13%` bold and right aligned. - -# --hints-- - -You should create a new `p` element at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -``` - -Your new `p` element should have the text `Total Carbohydrate 37g 13%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate 37g[\s|\n]+13%/)); -``` - -Your new `p` element should have two `span` elements. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); -``` - -Your first `span` element should have the `class` attribute set to `bold`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); -``` - -Your first `span` element should wrap the text `Total Carbohydrate`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Total Carbohydrate'); -``` - -Your second `span` element should have the `class` attribute set to `bold right`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); -``` - -Your second `span` element should wrap the text `13%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md deleted file mode 100644 index e4b6b8e2f5715d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 615f7fa959ab75948f96a0d6 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Below your last `p` element, add another `p` element with the text `Dietary Fiber 4g`. Give the `p` element the `class` necessary to indent it and remove the dividing border. Then create a divider below that `p` element. - -# --hints-- - -You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); -``` - -Your new `p` element should have the text `Dietary Fiber 4g`. - -```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/)); -``` - -Your new `p` element should have the `class` attribute set to `indent no-divider`. - -```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); -``` - -Your new `div` should have the `class` attribute set to `divider`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md deleted file mode 100644 index 1bcd018908d5e2..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -id: 615f808d85793195b0f53be9 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Create another `p` element after your last `.divider`, and give it the text `Total Sugars 12g`. Assign that `p` element the `class` values necessary to indent it and remove the bottom border. Then create another `.divider` below your new `p` element. - -# --hints-- - -You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); -``` - -Your new `p` element should have the text `Total Sugars 12g`. - -```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/)); -``` - -Your new `p` element should have the `class` attribute set to `indent no-divider`. - -```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); -``` - -Your new `div` should have the `class` attribute set to `divider`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md deleted file mode 100644 index 4b68bdd6b66f7d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 615f829d07b18f96f6f6684b -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -The advantage to creating these dividers is that you can apply specific classes to style them individually. Add `dbl-indent` to the `class` for your last `.divider`. - -# --hints-- - -Your last `.divider` element should have `dbl-indent` added to the `class`. Do not remove the existing value. - -```js -const last = document.querySelector('.daily-value.sm-text')?.lastElementChild; -assert(last?.classList?.contains('dbl-indent')); -assert(last?.classList?.contains('divider')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
-

Total Sugars 12g

-
---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md deleted file mode 100644 index f120cb64b2f8ed..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 615f83ef928ec9982b785b6a -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Create a `.dbl-indent` selector and give it a left margin of `2em`. - -# --hints-- - -You should have a new `.dbl-indent` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')); -``` - -Your `.dbl-indent` selector should have a `margin-left` property set to `2em`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')?.marginLeft === '2em'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
-

Total Sugars 12g

-
-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md deleted file mode 100644 index 64d06a660a5cf8..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 615f84f246e8ba98e3cd97be -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Below your `.dbl-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned. - -Then create another divider after that `p` element. - -# --hints-- - -You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); -``` - -Your new `p` element should have the text `Includes 10g Added Sugars 20%`. - -```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/)); -``` - -Your new `p` element should have the `class` attribute set to `dbl-indent no-divider`. - -```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('dbl-indent')); -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); -``` - -Your new `p` element should have a `span` element. - -```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.localName === 'span'); -``` - -Your `span` element should have the `class` attribute set to `bold right`. - -```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('bold')); -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('right')); -``` - -Your `span` element should wrap the text `20%`. - -```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type span')?.innerText === '20%'); -``` - -Your new `div` should have the `class` attribute set to `divider`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
-

Total Sugars 12g

-
---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.dbl-indent { - margin-left: 2em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md deleted file mode 100644 index cd8f2458700d09..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 615f887466db4ba14b5342cc -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold. - -Following this element, create a large divider. - -# --hints-- - -You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); -``` - -Your new `p` element should have the text `Protein 3g`. - -```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/)); -``` - -Your new `p` element should have the `class` attribute set to `no-divider`. - -```js -assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); -``` - -Your new `div` should have the `class` attribute set to `divider lg`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('lg')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
-

Total Sugars 12g

-
-

Includes 10g Added Sugars 20% -

---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.dbl-indent { - margin-left: 2em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md deleted file mode 100644 index a2328b173c36e3..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 615f89e055040ba294719d2f -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`. Use a `span` to make the `10%` align to the right, but do not make it bold. - -# --hints-- - -You should create a new `p` element at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -``` - -Your new `p` element should have the text `Vitamin D 2mcg 10%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/)); -``` - -Your new `p` element should have a `span` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); -``` - -Your `span` element should have the `class` set to `right`. Remember you should not make it bold. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); -assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
-

Total Sugars 12g

-
-

Includes 10g Added Sugars 20% -

-

Protein 3g

-
---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.dbl-indent { - margin-left: 2em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md deleted file mode 100644 index 82801b25679fe5..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -id: 615f8bfe0f30a1a3c340356b -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Create another `p` element, give it the text `Calcium 260mg 20%`. Align `20%` to the right. Below that, create a `p` element with the text `Iron 8mg 45%`, aligning the `45%` to the right. - -# --hints-- - -You should create two new `p` elements at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); -``` - -Your first new `p` element should have the text `Calcium 260mg 20%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/)); -``` - -Your first new `p` element should have a `span` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span'); -``` - -Your first `span` element should have the `class` attribute set to `right`. Remember, do not make it bold. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('right')); -assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold')); -``` - -Your first `span` element should wrap the text `20%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%'); -``` - -Your second new `p` element should have the text `Iron 8mg 45%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/)); -``` - -Your second new `p` element should have a `span` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'span'); -``` - -Your second `span` element should have the `class` attribute set to `right`. Remember, do not make it bold. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('right')); -assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
-

Total Sugars 12g

-
-

Includes 10g Added Sugars 20% -

-

Protein 3g

-
-

Vitamin D 2mcg 10%

---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.dbl-indent { - margin-left: 2em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md deleted file mode 100644 index d9873550e4d487..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 615f8f1223601fa546e93f31 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Create the final `p` element for your `.daily-value` section. Give it the text `Potassium 235mg 6%`. Align the `6%` text to the right, and remove the bottom border of the `p` element. - -# --hints-- - -You should create a new `p` element at the end of your `.daily-value.sm-text` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); -``` - -Your new `p` element should have the `class` attribute set to `no-divider`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('no-divider')); -``` - -Your new `p` element should have the text `Potassium 235mg 6%`. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/)); -``` - -Your new `p` element should have a `span` element. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); -``` - -Your `span` element should have the `class` set to `right`. Remember you should not make it bold. - -```js -assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); -assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
---fcc-editable-region-- -

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
-

Total Sugars 12g

-
-

Includes 10g Added Sugars 20% -

-

Protein 3g

-
-

Vitamin D 2mcg 10%

-

Calcium 260mg 20%

-

Iron 8mg 45%

---fcc-editable-region-- -
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.dbl-indent { - margin-left: 2em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md deleted file mode 100644 index 7b132f4d7ae50d..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 615f905fbd1017a65ca224eb -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Add a medium divider after your `.daily-value` element. Below that new divider, create a `p` element with the `class` attribute set to `note`. - -Give the `p` element the following text: - -``` -* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice. -``` - -# --hints-- - -You should create a new `div` after your `.daily-value` element. - -```js -assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div'); -``` - -Your new `div` should have the `class` set to `divider md`. - -```js -assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider')); -assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('md')); -``` - -You should create a `p` element after your new `div` element. - -```js -assert(document.querySelector('.label')?.lastElementChild?.localName === 'p'); -``` - -Your new `p` element should have the `class` set to `note`. - -```js -assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note')); -``` - -Your new `p` element should have the provided text. - -```js -assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-

Total Fat 8g10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
-

Total Sugars 12g

-
-

Includes 10g Added Sugars 20% -

-

Protein 3g

-
-

Vitamin D 2mcg 10%

-

Calcium 260mg 20%

-

Iron 8mg 45%

-

Potassium 235mg 6%

-
---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.dbl-indent { - margin-left: 2em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md deleted file mode 100644 index 7f44865429fdab..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 615f94786869e1a7fec54375 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Create a `.note` selector, and set the size of the font to `0.6rem`. Also set the top and bottom margins to `5px`, removing the left and right margins. - -# --hints-- - -You should have a new `.note` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.note')); -``` - -Your `.note` selector should have a `font-size` property set to `0.6rem`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem'); -``` - -Your `.note` selector should have a `margin` property set to `5px 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-

Total Fat 8g 10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
-

Total Sugars 12g

-
-

Includes 10g Added Sugars 20% -

-

Protein 3g

-
-

Vitamin D 2mcg 10%

-

Calcium 260mg 20%

-

Iron 8mg 45%

-

Potassium 235mg 6%

-
-
-

* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.

-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.dbl-indent { - margin-left: 2em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md deleted file mode 100644 index cecb81aeeb4740..00000000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 615f951dff9317a900ef683f -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Give the `.note` selector a left and right padding of `8px`, removing the top and bottom padding. Also set the `text-indent` property to `-8px`. - -With these last changes, your nutrition label is complete! - -# --hints-- - -Your `.note` selector should have a `padding` property set to `0 8px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px'); -``` - -Your `.note` selector should have a `text-indent` property set to `-8px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-

Total Fat 8g 10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
-

Total Sugars 12g

-
-

Includes 10g Added Sugars 20% -

-

Protein 3g

-
-

Vitamin D 2mcg 10%

-

Calcium 260mg 20%

-

Iron 8mg 45%

-

Potassium 235mg 6%

-
-
-

* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.

-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.dbl-indent { - margin-left: 2em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} - ---fcc-editable-region-- -.note { - font-size: 0.6rem; - margin: 5px 0; -} ---fcc-editable-region-- -``` - -## --solutions-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-

Total Fat 8g 10%

-

Saturated Fat 1g 5%

-
-

Trans Fat 0g

-
-

Cholesterol 0mg 0%

-

Sodium 160mg 7%

-

Total Carbohydrate 37g 13%

-

Dietary Fiber 4g

-
-

Total Sugars 12g

-
-

Includes 10g Added Sugars 20% -

-

Protein 3g

-
-

Vitamin D 2mcg 10%

-

Calcium 260mg 20%

-

Iron 8mg 45%

-

Potassium 235mg 6%

-
-
-

* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.

-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; - clear: right; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} - -.indent { - margin-left: 1em; -} - -.dbl-indent { - margin-left: 2em; -} - -.daily-value p:not(.no-divider) { - border-bottom: 1px solid #888989; -} - -.note { - font-size: 0.6rem; - margin: 5px 0; - padding: 0 8px; - text-indent: -8px; -} -``` From 386867d3ecbb281c6e4784f03b1480cdea6f0014 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Thu, 21 Jul 2022 15:17:00 +0300 Subject: [PATCH 23/36] PROD-2553 fix color for primary button on focus --- client/src/components/layouts/global.css | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css index 6eaf0743ce9a83..1dabb4ee93cee2 100644 --- a/client/src/components/layouts/global.css +++ b/client/src/components/layouts/global.css @@ -304,6 +304,7 @@ input[type='submit']:hover, .btn-primary.focus { background-color: var(--tc-turq-140); outline: 0 none; + color: var(--tc-white); } .btn-tab-primary:focus, From 00093d0732f772e8b1b945bdb676e3246557d329 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Fri, 22 Jul 2022 14:11:39 +0300 Subject: [PATCH 24/36] PROD-2560 - fix issue where hints flash when you resubmit --- .../templates/Challenges/classic/editor.tsx | 14 ++- .../Challenges/classic/lower-jaw.tsx | 97 ++++++++++--------- .../src/templates/Challenges/classic/show.tsx | 6 +- .../Challenges/components/side-panel.tsx | 4 + .../Challenges/components/tool-panel.tsx | 3 + .../Challenges/redux/action-types.js | 1 + .../redux/execute-challenge-saga.js | 5 +- .../src/templates/Challenges/redux/index.js | 7 ++ 8 files changed, 85 insertions(+), 52 deletions(-) diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx index 8a42878fdbf2ea..17455f4133cb37 100644 --- a/client/src/templates/Challenges/classic/editor.tsx +++ b/client/src/templates/Challenges/classic/editor.tsx @@ -55,7 +55,8 @@ import { stopResetting, isProjectPreviewModalOpenSelector, openModal, - isChallengeCompletedSelector + isChallengeCompletedSelector, + testsRunningSelector } from '../redux'; import GreenPass from '../../../assets/icons/green-pass'; import Code from '../../../assets/icons/code'; @@ -107,6 +108,7 @@ interface EditorProps { }) => void; usesMultifileEditor: boolean; isChallengeCompleted: boolean; + testsRunning: boolean; } // TODO: this is grab bag of unrelated properties. There's no need for them to @@ -136,6 +138,7 @@ const mapStateToProps = createSelector( userSelector, challengeTestsSelector, isChallengeCompletedSelector, + testsRunningSelector, ( canFocus: boolean, { challengeType }: { challengeType: number }, @@ -146,7 +149,8 @@ const mapStateToProps = createSelector( isSignedIn: boolean, { theme = Themes.Default }: { theme: Themes }, tests: [{ text: string; testString: string }], - isChallengeCompleted: boolean + isChallengeCompleted: boolean, + testsRunning: boolean ) => ({ canFocus: open ? false : canFocus, challengeType, @@ -156,7 +160,8 @@ const mapStateToProps = createSelector( output, theme, tests, - isChallengeCompleted + isChallengeCompleted, + testsRunning }) ); @@ -584,6 +589,7 @@ const Editor = (props: EditorProps): JSX.Element => { challengeHasErrors={challengeHasErrors()} tryToSubmitChallenge={tryToSubmitChallenge} isEditorInFocus={isEditorInFocus} + isRunningTests={props.testsRunning} />, outputNode, callback @@ -1089,7 +1095,7 @@ const Editor = (props: EditorProps): JSX.Element => { dataRef.current.outputNode = lowerJawElement; updateOutputZone(); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [props.tests]); + }, [props.tests, props.testsRunning]); useEffect(() => { const editor = dataRef.current.editor; diff --git a/client/src/templates/Challenges/classic/lower-jaw.tsx b/client/src/templates/Challenges/classic/lower-jaw.tsx index 05095fd451eedb..d59aa450da2779 100644 --- a/client/src/templates/Challenges/classic/lower-jaw.tsx +++ b/client/src/templates/Challenges/classic/lower-jaw.tsx @@ -1,4 +1,10 @@ -import React, { useState, useEffect } from 'react'; +import React, { + useState, + useEffect, + useMemo, + useCallback, + useRef +} from 'react'; import { useTranslation } from 'react-i18next'; import TestFail from '../../../assets/icons/test-fail'; @@ -16,18 +22,18 @@ interface LowerJawProps { challengeHasErrors?: boolean; testsLength?: number; attemptsNumber?: number; + isRunningTests?: boolean; } const LowerJaw = ({ - openHelpModal, challengeIsCompleted, challengeHasErrors, hint, tryToExecuteChallenge, tryToSubmitChallenge, attemptsNumber, - testsLength, - isEditorInFocus + isEditorInFocus, + isRunningTests }: LowerJawProps): JSX.Element => { const [previousHint, setpreviousHint] = useState(''); const [runningTests, setRunningTests] = useState(false); @@ -37,6 +43,14 @@ const LowerJaw = ({ const { t } = useTranslation(); const submitButtonRef = React.createRef(); const testFeedbackRef = React.createRef(); + const challengeHasBeenCompletedRef = useRef(false); + + // if a challenge was ever completed keep the state as completed + if (challengeIsCompleted) { + challengeHasBeenCompletedRef.current = true; + } + // keep the value of the reference.current as a separate value for convenience + const challengeHasBeenCompleted = challengeHasBeenCompletedRef.current; useEffect(() => { if (attemptsNumber && attemptsNumber > 0) { @@ -67,7 +81,7 @@ const LowerJaw = ({ }, [challengeHasErrors, hint]); useEffect(() => { - if (challengeIsCompleted && submitButtonRef?.current) { + if (challengeHasBeenCompleted && submitButtonRef?.current) { submitButtonRef.current.focus(); setTimeout(() => { setTestBtnariaHidden(true); @@ -75,7 +89,7 @@ const LowerJaw = ({ } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [challengeIsCompleted]); + }, [challengeHasBeenCompleted]); // eslint-disable-next-line react-hooks/exhaustive-deps useEffect(() => { @@ -84,12 +98,23 @@ const LowerJaw = ({ } }); - const renderTestFeedbackContainer = () => { + const sentencePicker = useCallback(() => { + const sentenceArray = [ + 'learn.sorry-try-again', + 'learn.sorry-keep-trying', + 'learn.sorry-getting-there', + 'learn.sorry-hang-in-there', + 'learn.sorry-dont-giveup' + ]; + return attemptsNumber + ? sentenceArray[attemptsNumber % sentenceArray.length] + : sentenceArray[0]; + }, [attemptsNumber]); + + const feedbackContent = useMemo(() => { if (attemptsNumber === 0) { return ''; - } else if (runningTests) { - return ''; - } else if (challengeIsCompleted) { + } else if (challengeHasBeenCompleted) { const submitKeyboardInstructions = isEditorInFocus ? ( {t('aria.submit')} ) : ( @@ -142,69 +167,49 @@ const LowerJaw = ({ ); } - }; - - const sentencePicker = () => { - const sentenceArray = [ - 'learn.sorry-try-again', - 'learn.sorry-keep-trying', - 'learn.sorry-getting-there', - 'learn.sorry-hang-in-there', - 'learn.sorry-dont-giveup' - ]; - return attemptsNumber - ? sentenceArray[attemptsNumber % sentenceArray.length] - : sentenceArray[0]; - }; - - const renderHelpButton = () => { - const isAtteptsLargerThanTest = - attemptsNumber && testsLength && attemptsNumber >= testsLength; - - if (isAtteptsLargerThanTest && !challengeIsCompleted) - return ( - - ); - }; + }, [ + attemptsNumber, + challengeHasBeenCompleted, + hint, + isEditorInFocus, + isFeedbackHidden, + previousHint, + sentencePicker, + t + ]); const renderButtons = () => { return ( <>
- {renderHelpButton()}
); }; - const feedbackContent = renderTestFeedbackContainer(); - return (
- {feedbackContent && ( + {!isRunningTests && feedbackContent && (
void; openModal: (modal: string) => void; setEditorFocusability: (canFocus: boolean) => void; @@ -337,6 +340,7 @@ class ShowClassic extends Component { instructionsPanelRef={this.instructionsPanelRef} showToolPanel={showToolPanel} videoUrl={this.getVideoUrl()} + testsRunning={this.props.testsRunning} /> ); } diff --git a/client/src/templates/Challenges/components/side-panel.tsx b/client/src/templates/Challenges/components/side-panel.tsx index 7c6d8ffabf2443..0379b12cedfa98 100644 --- a/client/src/templates/Challenges/components/side-panel.tsx +++ b/client/src/templates/Challenges/components/side-panel.tsx @@ -27,6 +27,7 @@ interface SidePanelProps { instructionsPanelRef: React.RefObject; showToolPanel: boolean; tests: Test[]; + testsRunning: boolean; videoUrl: string; } @@ -38,6 +39,7 @@ export function SidePanel({ instructionsPanelRef, showToolPanel = false, tests, + testsRunning, videoUrl }: SidePanelProps): JSX.Element { const isChallengeComplete = tests.every(test => test.pass && !test.err); @@ -85,6 +87,7 @@ export function SidePanel({ guideUrl={guideUrl} videoUrl={videoUrl} challengeIsCompleted={isChallengeComplete} + isRunningTests={testsRunning} /> )} @@ -93,6 +96,7 @@ export function SidePanel({ guideUrl={guideUrl} videoUrl={videoUrl} challengeIsCompleted={isChallengeComplete} + isRunningTests={testsRunning} /> )}
diff --git a/client/src/templates/Challenges/components/tool-panel.tsx b/client/src/templates/Challenges/components/tool-panel.tsx index 6b2e8a2e60c5bd..10d406d00b3e1f 100644 --- a/client/src/templates/Challenges/components/tool-panel.tsx +++ b/client/src/templates/Challenges/components/tool-panel.tsx @@ -52,6 +52,7 @@ interface ToolPanelProps { saveChallenge: () => void; isMobile?: boolean; isSignedIn: boolean; + isRunningTests?: boolean; openHelpModal: () => void; openVideoModal: () => void; openResetModal: () => void; @@ -66,6 +67,7 @@ function ToolPanel({ saveChallenge, isMobile, isSignedIn, + isRunningTests, openHelpModal, openVideoModal, openResetModal, @@ -95,6 +97,7 @@ function ToolPanel({ onClick={handleRunTests} > {isMobile ? t('buttons.run') : t('buttons.run-test')} + {isRunningTests && ' ...'} )} {challengeIsCompleted && ( diff --git a/client/src/templates/Challenges/redux/action-types.js b/client/src/templates/Challenges/redux/action-types.js index d7488e90b0239f..ba9889b2ed1925 100644 --- a/client/src/templates/Challenges/redux/action-types.js +++ b/client/src/templates/Challenges/redux/action-types.js @@ -18,6 +18,7 @@ export const actionTypes = createTypes( 'updateTests', 'updateLogs', 'cancelTests', + 'updateTestsRunning', 'logsToConsole', diff --git a/client/src/templates/Challenges/redux/execute-challenge-saga.js b/client/src/templates/Challenges/redux/execute-challenge-saga.js index ff4465feba2512..6eb99c87a32b24 100644 --- a/client/src/templates/Challenges/redux/execute-challenge-saga.js +++ b/client/src/templates/Challenges/redux/execute-challenge-saga.js @@ -47,7 +47,8 @@ import { updateTests, openModal, isBuildEnabledSelector, - disableBuildOnError + disableBuildOnError, + updateTestsRunning } from './'; // How long before bailing out of a preview. @@ -101,6 +102,7 @@ export function* executeChallengeSaga({ payload }) { try { yield put(initLogs()); yield put(initConsole(i18next.t('learn.running-tests'))); + yield put(updateTestsRunning(true)); // reset tests to initial state const tests = (yield select(challengeTestsSelector)).map( ({ text, testString }) => ({ text, testString }) @@ -139,6 +141,7 @@ export function* executeChallengeSaga({ payload }) { } yield put(updateConsole(i18next.t('learn.tests-completed'))); yield put(logsToConsole(i18next.t('learn.console-output'))); + yield put(updateTestsRunning(false)); } catch (e) { yield put(updateConsole(e)); } finally { diff --git a/client/src/templates/Challenges/redux/index.js b/client/src/templates/Challenges/redux/index.js index dbd1eae5cdc616..b9eed0bff13c1b 100644 --- a/client/src/templates/Challenges/redux/index.js +++ b/client/src/templates/Challenges/redux/index.js @@ -36,6 +36,7 @@ const initialState = { isBuildEnabled: true, isResetting: false, logsOut: [], + testsRunning: false, modal: { completion: false, help: false, @@ -80,6 +81,7 @@ export const createQuestion = createAction(actionTypes.createQuestion); export const initTests = createAction(actionTypes.initTests); export const updateTests = createAction(actionTypes.updateTests); export const cancelTests = createAction(actionTypes.cancelTests); +export const updateTestsRunning = createAction(actionTypes.updateTestsRunning); export const initConsole = createAction(actionTypes.initConsole); export const initLogs = createAction(actionTypes.initLogs); @@ -134,6 +136,7 @@ export const challengeFilesSelector = state => state[ns].challengeFiles; export const challengeMetaSelector = state => state[ns].challengeMeta; export const challengeTestsSelector = state => state[ns].challengeTests; export const consoleOutputSelector = state => state[ns].consoleOut; +export const testsRunningSelector = state => state[ns].testsRunning; export const completedChallengesIds = state => completedChallengesSelector(state).map(node => node.id); export const isChallengeCompletedSelector = state => { @@ -261,6 +264,10 @@ export const reducer = handleActions( ...state, consoleOut: state.consoleOut.concat(payload) }), + [actionTypes.updateTestsRunning]: (state, { payload }) => ({ + ...state, + testsRunning: payload + }), [actionTypes.initLogs]: state => ({ ...state, logsOut: [] From 6ecc2e0dfbefae5c07491c6f456a93cd674302fe Mon Sep 17 00:00:00 2001 From: Brooke Date: Fri, 22 Jul 2022 16:19:40 -0700 Subject: [PATCH 25/36] PROD-2456 #comment add original course back; add QA shortened course; #time 4h --- .../middlewares/request-authorization.js | 1 - client/i18n/locales/english/intro.json | 83 +- .../2022/responsive-web-design-qa/index.md | 20 + .../index.md | 9 + .../index.md | 9 + client/src/resources/cert-and-project-map.ts | 20 + client/utils/help-category-map.json | 1 + config/certification-settings.ts | 9 +- curriculum-server/source-curriculum.ts | 12 +- .../meta.json | 15 + .../meta.json | 21 + .../meta.json | 360 ++++++++ .../meta.json | 21 + .../meta.json | 260 ++++++ ...responsive-web-design-certification-qa.yml | 8 + .../build-a-personal-portfolio-webpage-qa.md | 281 ++++++ .../cccccccccccccccccccccccc.md | 61 ++ .../dddddddddddddddddddddddd.md | 43 + .../eeeeeeeeeeeeeeeeeeeeeeee.md | 58 ++ .../ffffffffffffffffffffffff.md | 82 ++ .../build-a-product-landing-page.md | 436 +++++++++ .../build-a-survey-form.md | 518 +++++++++++ .../build-a-technical-documentation-page.md | 529 +++++++++++ .../build-a-tribute-page.md | 325 +++++++ .../613297a923965e0703b64796.md | 56 ++ .../61329b210dac0b08047fd6ab.md | 61 ++ .../61329d52e5010e08d9b9d66b.md | 68 ++ .../6133acc353338c0bba9cb553.md | 63 ++ .../6133d11ef548f51f876149e3.md | 68 ++ .../613e2546d0594208229ada50.md | 93 ++ .../613e275749ebd008e74bb62e.md | 66 ++ .../6140827cff96e906bd38fc2b.md | 93 ++ .../6140883f74224508174794c0.md | 89 ++ .../61408e4ae3e35d08feb260eb.md | 83 ++ .../61408f155e798909b6908712.md | 112 +++ .../614090d5a22b6f0a5a6b464c.md | 102 +++ .../6141fabd6f75610664e908fd.md | 125 +++ .../6141fed65b61320743da5894.md | 111 +++ .../614202874ca576084fca625f.md | 171 ++++ .../614206033d366c090ca7dd42.md | 140 +++ .../61435e3c0679a306c20f1acc.md | 125 +++ .../6143610161323a081b249c19.md | 173 ++++ .../6143639d5eddc7094161648c.md | 195 ++++ .../6143908b6aafb00a659ca189.md | 161 ++++ .../6143920c8eafb00b735746ce.md | 127 +++ .../6143931a113bb80c45546287.md | 139 +++ .../614394fb41985e0d2012a93e.md | 125 +++ .../6143956ed76ed60e012faa51.md | 197 ++++ .../614396f7ae83f20ea6f9f4b3.md | 200 ++++ .../6143cb26f7edff2dc28f7da5.md | 177 ++++ .../6144e818fd5ea704fe56081d.md | 195 ++++ .../6144f8dc6849e405dd8bb829.md | 231 +++++ .../6145e6eeaa66c605eb087fe9.md | 207 +++++ .../6145e8b5080a5f06bb0223d0.md | 287 ++++++ .../6145eb5f08a38a0786c7a80c.md | 224 +++++ .../6145ed1f22caab087630aaad.md | 191 ++++ .../6145ee65e2e1530938cb594d.md | 232 +++++ .../6145f02240ff8f09f7ec913c.md | 215 +++++ .../6145f14f019a4b0adb94b051.md | 250 +++++ .../6145f3a5cd9be60b9459cdd6.md | 222 +++++ .../6145f47393fbe70c4d885f9c.md | 229 +++++ .../6145f59029474c0d3dc1c8b8.md | 217 +++++ .../6145f685797bd30df9784e8c.md | 230 +++++ .../6145f829ac6a920ebf5797d7.md | 215 +++++ .../6145f8f8bcd4370f6509078e.md | 220 +++++ .../6145fb5018cb5b100cb2a88c.md | 229 +++++ .../6145fc3707fc3310c277f5c8.md | 256 ++++++ .../614796cb8086be482d60e0ac.md | 260 ++++++ .../6147a14ef5668b5881ef2297.md | 260 ++++++ .../614878f7a412310647873015.md | 253 ++++++ .../61487b77d4a37707073a64e5.md | 261 ++++++ .../61487da611a65307e78d2c20.md | 275 ++++++ .../61487f703571b60899055cf9.md | 287 ++++++ .../614880dc16070e093e29bc56.md | 259 ++++++ .../614883b6fa720e09fb167de9.md | 280 ++++++ .../614884c1f5d6f30ab3d78cde.md | 364 ++++++++ .../61488ecfd05e290b5712e6da.md | 286 ++++++ .../6148d99cdc7acd0c519862cb.md | 291 ++++++ .../6148da157cc0bd0d06df5c0a.md | 306 +++++++ .../6148dc095264000dce348bf5.md | 323 +++++++ .../6148dcaaf2e8750e6cb4501a.md | 316 +++++++ .../6148dd31d210990f0fb140f8.md | 312 +++++++ .../6148defa9c01520fb9d178a0.md | 315 +++++++ .../6148dfab9b54c110577de165.md | 360 ++++++++ .../6148e0bcc13efd10f7d7a6a9.md | 336 +++++++ .../6148e161ecec9511941f8833.md | 356 ++++++++ .../6148e28706b34912340fd042.md | 359 ++++++++ .../6148e335c1edd512d00e4691.md | 342 +++++++ .../6148e41c728f65138addf9cc.md | 350 +++++++ .../6148e5aeb102e3142de026a2.md | 685 ++++++++++++++ .../614ccc21ea91ef1736b9b578.md | 50 + .../5f331e55dfab7a896e53c3a1.md | 47 + .../5f3326b143638ee1a09ff1e3.md | 54 ++ .../5f33294a6af5e9188dbdb8f3.md | 60 ++ .../5f332a88dc25a0fd25c7687a.md | 62 ++ .../5f332b23c2045fb843337579.md | 59 ++ .../5f33310c1851c6c4da013250.md | 59 ++ .../5f344f9c805cd193c33d829c.md | 71 ++ .../5f344fad8bf01691e71a30eb.md | 57 ++ .../5f344fbc22624a2976425065.md | 70 ++ .../5f344fc1520b6719f2e35605.md | 61 ++ .../5f3477ae34c1239cafe128be.md | 73 ++ .../5f3477ae8466a9a3d2cc953c.md | 67 ++ .../5f3477ae9675db8bb7655b30.md | 87 ++ .../5f3477aefa51bfc29327200b.md | 77 ++ .../5f3477cb2e27333b1ab2b955.md | 89 ++ .../5f3477cb303c5cb61b43aa9b.md | 70 ++ .../5f3477cbcb6ba47918c1da92.md | 72 ++ .../5f34a1fd611d003edeafd681.md | 64 ++ .../5f356ed60785e1f3e9850b6e.md | 74 ++ .../5f356ed60a5decd94ab66986.md | 79 ++ .../5f356ed6199b0cdef1d2be8f.md | 85 ++ .../5f356ed63c7807a4f1e6d054.md | 76 ++ .../5f356ed63e0fa262326eef05.md | 74 ++ .../5f356ed656a336993abd9f7c.md | 83 ++ .../5f356ed69db0a491745e2bb6.md | 75 ++ .../5f356ed6cf6eab5f15f5cfe6.md | 77 ++ .../5f35e5c4321f818cdc4bed30.md | 86 ++ .../5f35e5c44359872a137bd98f.md | 92 ++ .../5f3c866d0fc037f7311b4ac8.md | 107 +++ .../5f3c866d28d7ad0de6470505.md | 100 ++ .../5f3c866d5414453fc2d7b480.md | 128 +++ .../5f3c866daec9a49519871816.md | 88 ++ .../5f3c866dbf362f99b9a0c6d0.md | 117 +++ .../5f3c866dd0d0275f01d4d847.md | 111 +++ .../5f3c866de7a5b784048f94b1.md | 108 +++ .../5f3cade94c6576e7f7b7953f.md | 108 +++ .../5f3cade9993019e26313fa8e.md | 119 +++ .../5f3cade99dda4e6071a85dfd.md | 114 +++ .../5f3cade9fa77275d9f4efe62.md | 103 +++ .../5f3ef6e01f288a026d709587.md | 158 ++++ .../5f3ef6e03d719d5ac4738993.md | 122 +++ .../5f3ef6e04559b939080db057.md | 147 +++ .../5f3ef6e050279c7a4a7101d3.md | 144 +++ .../5f3ef6e05473f91f948724ab.md | 121 +++ .../5f3ef6e056bdde6ae6892ba2.md | 138 +++ .../5f3ef6e06d34faac0447fc44.md | 135 +++ .../5f3ef6e07276f782bb46b93d.md | 149 +++ .../5f3ef6e0819d4f23ca7285e6.md | 111 +++ .../5f3ef6e087d56ed3ffdc36be.md | 134 +++ .../5f3ef6e0a81099d9a697b550.md | 156 ++++ .../5f3ef6e0b431cc215bb16f55.md | 141 +++ .../5f3ef6e0e0c3feaebcf647ad.md | 110 +++ .../5f3ef6e0e9629bad967cd71e.md | 121 +++ .../5f3ef6e0eaa7da26e3d34d78.md | 135 +++ .../5f3ef6e0f8c230bdd2349716.md | 147 +++ .../5f3f26fa39591db45e5cd7a0.md | 156 ++++ .../5f459225127805351a6ad057.md | 148 +++ .../5f459a7ceb8b5c446656d88b.md | 152 ++++ .../5f459cf202c2a3472fae6a9f.md | 153 ++++ .../5f459fd48bdc98491ca6d1a3.md | 150 +++ .../5f45a05977e2fa49d9119437.md | 150 +++ .../5f45a276c093334f0f6e9df4.md | 176 ++++ .../5f45a5a7c49a8251f0bdb527.md | 162 ++++ .../5f45a66d4a2b0453301e5a26.md | 178 ++++ .../5f45b0731d39e15d54df4dfc.md | 175 ++++ .../5f45b25e7ec2405f166b9de1.md | 182 ++++ .../5f45b3c93c027860d9298dbd.md | 186 ++++ .../5f45b45d099f3e621fbbb256.md | 189 ++++ .../5f45b4c81cea7763550e40df.md | 182 ++++ .../5f45b715301bbf667badc04a.md | 184 ++++ .../5f46e270702a8456a664f0df.md | 183 ++++ .../5f46e36e745ead58487aabf2.md | 195 ++++ .../5f46e7a4750dd05b5a673920.md | 191 ++++ .../5f46e8284aae155c83015dee.md | 194 ++++ .../5f46ede1ff8fec5ba656b44c.md | 154 ++++ .../5f46fc57528aa1c4b5ea7c2e.md | 167 ++++ .../5f4701b942c824109626c3d8.md | 157 ++++ .../5f475bb508746c16c9431d42.md | 223 +++++ .../5f475e1c7f71a61d913836c6.md | 199 ++++ .../5f47633757ae3469f2d33d2e.md | 106 +++ .../5f47fe7e31980053a8d4403b.md | 363 ++++++++ .../5f716ad029ee4053c7027a7a.md | 119 +++ .../5f716bee5838c354c728a7c5.md | 145 +++ .../5f7691dafd882520797cd2f0.md | 100 ++ .../5f7692f7c5b3ce22a57788b6.md | 126 +++ .../5f769541be494f25449b292f.md | 105 +++ .../5f76967fad478126d6552b0d.md | 102 +++ .../5f769702e6e33127d14aa120.md | 106 +++ .../5f7b87422a560036fd03ccff.md | 120 +++ .../5f7b88d37b1f98386f04edc0.md | 104 +++ .../6140c7e645d8e905819f1dd4.md | 178 ++++ .../6140c9d35015ae0ba0c250e8.md | 79 ++ .../6140cbeec34e970dfe75e710.md | 74 ++ .../6140cd32d018ed0f600eefce.md | 72 ++ .../6140cdebd39d6a101e747529.md | 85 ++ .../6140cfc08ca9c5128c3e6478.md | 83 ++ .../6140d0069049f5139d78da40.md | 77 ++ .../6140d10d50636e14695013b2.md | 85 ++ .../6140d1a351e88f159ed54fca.md | 126 +++ .../6140d263016325162fd076fe.md | 111 +++ .../6140d2b687a2cd17bac5730c.md | 103 +++ .../6140d36b8b747718b50d4b7a.md | 100 ++ .../6140d3dc359b371b1a21d783.md | 117 +++ .../6140d4bc9db3c81c51a09ab7.md | 199 ++++ .../6140d94b5fab7f1d73c9bedb.md | 137 +++ .../6140dc5e13d0c81e7496f182.md | 139 +++ .../6140dd77e0bc5a1f70bd7466.md | 131 +++ .../6140de31b1f5b420410728ff.md | 146 +++ .../6140df547f09402144e40b92.md | 142 +++ .../6140e0d875ec16262f26432b.md | 144 +++ .../6140f4b5c1555a2960de1e5f.md | 191 ++++ .../614100d7d335bb2a5ff74f1f.md | 149 +++ .../61410126fa3a6d2b3cda502e.md | 151 +++ .../6141019eadec6d2c6c6f007b.md | 148 +++ .../6141026ec9882f2d39dcf2b8.md | 291 ++++++ .../6169ab1aaeb4cd1174def700.md | 154 ++++ .../6169b1357fcb701bb5efc619.md | 164 ++++ .../6169b284950e171d8d0bb16a.md | 304 +++++++ .../617ace7d831f9c16a569b38a.md | 69 ++ .../61695197ac34f0407e339882.md | 66 ++ .../61695ab9f6ffe951c16d03dd.md | 67 ++ .../61695c4aad56f95497c19583.md | 56 ++ .../61695d1fbc003856628bf561.md | 52 ++ .../616965351e74d4689eb6de30.md | 53 ++ .../616968c2c94c8071b349c146.md | 72 ++ .../61696ef7ac756c829f9e4048.md | 74 ++ .../616971b3cd990186b66c99a1.md | 59 ++ .../616d3a67ccf800ad94ec89ae.md | 71 ++ .../616d47bc9eedc4bc7f621bec.md | 66 ++ .../616d4a84b756d9c4b8255093.md | 68 ++ .../616d50b93ba424d6282c99cf.md | 62 ++ .../616d525007b8c5d8b3308b1c.md | 60 ++ .../616d55bd160a95e22453a081.md | 91 ++ .../616d595270d902f0e7086e18.md | 65 ++ .../61764c602bee6974e7790f35.md | 73 ++ .../61764f23ea21477b76f3b80f.md | 61 ++ .../61764f7e5240eb7ccc7f6a0a.md | 68 ++ .../61764fdda535587e1fefb3aa.md | 86 ++ .../6176519636a76b810ab1219a.md | 86 ++ .../617b65579ce424bf5f02ca73.md | 84 ++ .../617b8b38f32bf2080a140675.md | 90 ++ .../617b8e0d93a8d10d9a90e720.md | 98 ++ .../617b92b9de349513466f6156.md | 78 ++ .../617b954d9f4f6217a749380e.md | 84 ++ .../617b97abd9f3f61d1590b815.md | 79 ++ .../617b9ad735109e217284e095.md | 79 ++ .../617bb5624a75e86463b7e638.md | 79 ++ .../617bb77353188166af43f3ac.md | 77 ++ .../617bb9fdef27bc6aa0470ac2.md | 77 ++ .../617bbb6b97a83f6d1f7d6e38.md | 79 ++ .../617bc3386dc7d07d6469bf20.md | 79 ++ .../617bc4824e233180553a8069.md | 77 ++ .../617bd6ec666b1da2587e4e37.md | 95 ++ .../618a00ed1ca871a2b3aca0cb.md | 91 ++ .../618a0927005553b74bfa05ae.md | 87 ++ .../618a0b2befb143baefab632b.md | 87 ++ .../618a1275e873dcc803c2d1aa.md | 84 ++ .../618a132676346ac9f7fd59dd.md | 82 ++ .../618a16873520a8d088ffdf44.md | 79 ++ .../618a16d21bd3dad1bb3aa8ef.md | 87 ++ .../619b72a0db211f1c29afb906.md | 89 ++ .../619b7396e57b771f903be90d.md | 77 ++ .../619b7424f43ec9215e538afe.md | 99 ++ .../619b74fa777a2b2473c94f82.md | 107 +++ .../619b761916dac02643940022.md | 81 ++ .../619b7c3c83de403126b69c1e.md | 85 ++ .../619b7fd56aa2253778bcf5f7.md | 87 ++ .../61a489b8579e87364b2d2cdb.md | 83 ++ .../61a493ead935c148d2b76312.md | 87 ++ .../61a498399534644f59cff05e.md | 79 ++ .../61a49d15bdbb5e57cc6fd280.md | 85 ++ .../61a4a53c4459446dc134a1c6.md | 79 ++ .../61a4a6e908bc34725b4c25ac.md | 77 ++ .../61a4a7877da33a73a1c1723e.md | 79 ++ .../61a4ac092eb21e7dbfe61c33.md | 79 ++ .../61a4acbb5587197f68544d00.md | 79 ++ .../61a4ada3aabeec822b2975d9.md | 79 ++ .../61a4ae5f29eb5584187201c3.md | 79 ++ .../61a5be9833e7dc178de2af10.md | 79 ++ .../61a5bfe091060f1d6a629dd0.md | 81 ++ .../61a5c906ab73313316e342f0.md | 91 ++ .../61a5ca57f50ded36d33eef96.md | 79 ++ .../61a5d594b887335228ee6533.md | 77 ++ .../61a5d6701ee08953ca375243.md | 77 ++ .../61a5d79c858bef560e26c685.md | 77 ++ .../61a5d7ef1cfcf45764df07a2.md | 87 ++ .../61adc60b69cd4b87739d2174.md | 92 ++ .../61adc91467b5d59328b9f781.md | 98 ++ .../61add79e739a5faee9d96080.md | 97 ++ .../61add929e41980b1edbdba7e.md | 100 ++ .../61addaf7e83988b59a7d18ff.md | 123 +++ .../61ade49b2dad60c076cbd32d.md | 97 ++ .../61b092eb9e7fc020b43b1bb2.md | 85 ++ .../61b093179e7fc020b43b1bb3.md | 88 ++ .../61b093219e7fc020b43b1bb4.md | 89 ++ .../61b093329e7fc020b43b1bb5.md | 92 ++ .../61b093429e7fc020b43b1bb6.md | 103 +++ .../61b0934c9e7fc020b43b1bb7.md | 99 ++ .../61b0936d9e7fc020b43b1bb8.md | 104 +++ .../61b095989e7fc020b43b1bb9.md | 79 ++ .../61b095a79e7fc020b43b1bba.md | 79 ++ .../61b095c79e7fc020b43b1bbb.md | 77 ++ .../61b09f739aa6572d2064f9b8.md | 97 ++ .../61b0a1b2af494934b7ec1a72.md | 123 +++ .../61b0a44a6b865738ba49b9fb.md | 109 +++ .../61b306305810f1c9040ce5a2.md | 104 +++ .../61b30995968123ceb6b76167.md | 108 +++ .../61b30a286c228bd0c493c09a.md | 111 +++ .../61b31287fb580ae75a486047.md | 104 +++ .../61b315e76a63b3ecbbb11b75.md | 104 +++ .../61b3183655ec10efd8c0bb07.md | 110 +++ .../61b31a451057fff645ec09be.md | 102 +++ .../61b31cd7b0c76bfc076b4719.md | 184 ++++ .../61537485c4f2a624f18d7794.md | 110 +++ .../61537a8054753e2f1f2a1574.md | 58 ++ .../61537bb9b1a29430ac15ad38.md | 62 ++ .../61537c5f81f0cf325b4a854c.md | 62 ++ .../61537c9eecea6a335db6da79.md | 65 ++ .../61537d86bdc3dd343688fceb.md | 120 +++ .../615380dff67172357fcf0425.md | 63 ++ .../6153893900438b4643590367.md | 78 ++ .../6153897c27f6334716ee5abe.md | 90 ++ .../615389bd81347947ea7ba896.md | 86 ++ .../6153908a366afb4d57185c8d.md | 82 ++ .../615392916d83fa4f02f7e2cf.md | 85 ++ .../6153938dce8b294ff8f5a4e9.md | 84 ++ .../6153947986535e5117e60615.md | 85 ++ .../61539e07e7430b528fbffe21.md | 87 ++ .../61539f32a206bd53ec116465.md | 87 ++ .../6153a04847abee57a3a406ac.md | 94 ++ .../6153a3485f0b20591d26d2a1.md | 88 ++ .../6153a3952facd25a83fe8083.md | 112 +++ .../6153a3ebb4f7f05b8401b716.md | 207 +++++ .../615f171d05def3218035dc85.md | 77 ++ .../61437d575fb98f57fa8f7f36.md | 135 +++ .../614385513d91ae5c251c2052.md | 102 +++ .../6143862a5e54455d262c212e.md | 75 ++ .../6143869bb45bd85e3b1926aa.md | 109 +++ .../614387cbefeeba5f3654a291.md | 152 ++++ .../614389f601bb4f611db98563.md | 134 +++ .../61438b5b66d76a6264430f2a.md | 139 +++ .../61438ec09438696391076d6a.md | 129 +++ .../61439dc084fa5f659cf75d7c.md | 109 +++ .../61439dfc811e12666b04be6f.md | 113 +++ .../61439e33e4fb7967609e0c83.md | 148 +++ .../6143a1a228f7d068ab16a130.md | 130 +++ .../6143a73279ce6369de4b9bcc.md | 128 +++ .../6143a778bffc206ac6b1dbe3.md | 135 +++ .../6143a83fcc32c26bcfae3efa.md | 166 ++++ .../6143b97c06c3306d23d5da47.md | 174 ++++ .../6143b9e1f5035c6e5f2a8231.md | 228 +++++ .../6143bb50e8e48c6f5ef9d8d5.md | 195 ++++ .../6143c2a363865c715f1a3f72.md | 206 +++++ .../6143cd08fe927072ca3a371d.md | 213 +++++ .../6143cdf48b634a747de42104.md | 220 +++++ .../6143d003ad9e9d76766293ec.md | 226 +++++ .../6143d2842b497779bad947de.md | 217 +++++ .../6144d66a5358db0c80628757.md | 226 +++++ .../6144d7dbdd3e580da730ff45.md | 234 +++++ .../6144de308591ec10e27d5383.md | 228 +++++ .../6144e1ba93e435127a7f516d.md | 232 +++++ .../6144ee46a9d6e614c598cc05.md | 241 +++++ .../6144ee790af79815ad15a832.md | 242 +++++ .../6144f1410990ea17187a722b.md | 238 +++++ .../6144f3818bfbc51844152e36.md | 239 +++++ .../6144f42204c8c8195f1f3345.md | 237 +++++ .../6144f47b7c631e1a6f304dd5.md | 250 +++++ .../6148b07081759c2c691166a9.md | 250 +++++ .../6148b0d764e4192e5712ed92.md | 248 +++++ .../6148b185ef37522f688316b0.md | 253 ++++++ .../6148b30464daf630848c21d4.md | 250 +++++ .../6148b4b150434734143db6f2.md | 261 ++++++ .../6148b5623efa8f369f2c3643.md | 255 ++++++ .../6148b59ef318e03875f35c4a.md | 271 ++++++ .../6148bd62bbb8c83a5f1fc1b3.md | 280 ++++++ .../6148be3d605d6b3ca9425d11.md | 286 ++++++ .../6148be82ca63c63daa8cca49.md | 287 ++++++ .../6148bf49fcc7913f05dbf9b7.md | 287 ++++++ .../6148bfc43df3bc40fe0e6405.md | 289 ++++++ .../6148c004ffc8434252940dc3.md | 299 ++++++ .../6148c224ecb157439bc5247c.md | 290 ++++++ .../6148c434bd731d45617a76c6.md | 295 ++++++ .../6148c5036ddad94692a66230.md | 294 ++++++ .../6148c58bace368497fb11bcf.md | 295 ++++++ .../6148c6aa9981d74af202125e.md | 300 ++++++ .../6148c721e74ecd4c619ae51c.md | 298 ++++++ .../6148ceaf5d897d4d8b3554b3.md | 299 ++++++ .../6148cf094b3f2b4e8a032c63.md | 314 +++++++ .../6148d0b863d10d50544ace0e.md | 309 +++++++ .../6148d1bdf39c5b5186f5974b.md | 313 +++++++ .../6148d1f9eb63c252e1f8acc4.md | 311 +++++++ .../6148d2444d01ab541e64a1e4.md | 330 +++++++ .../6148d33e31fccf558696c745.md | 317 +++++++ .../6148d3fff5186b57123d97e2.md | 341 +++++++ .../6148d4d57b965358c9fa38bf.md | 335 +++++++ .../6148d7720f0db36775db868a.md | 335 +++++++ .../6148d94fdf6a5d6899f8ff15.md | 331 +++++++ .../6148d9825b50a3698aeee644.md | 340 +++++++ .../6148e162e255676ae0da6a76.md | 336 +++++++ .../6148e19c3e26436be0155690.md | 345 +++++++ .../6148e246146b646cf4255f0c.md | 349 +++++++ .../6148e2dcdd60306dd77d41cc.md | 355 ++++++++ .../6148e4d6861a486f60681f36.md | 357 ++++++++ .../6148e5a204d99e70343a63e4.md | 353 +++++++ .../6148e62a6f768f71c4f04828.md | 354 +++++++ .../6148e789329dc9736ce59b85.md | 361 ++++++++ .../6148f34ebedc2274bceeb99c.md | 375 ++++++++ .../6148f600cde42b7670c2611f.md | 379 ++++++++ .../6148f693e0728f77c87f3020.md | 404 ++++++++ .../6148f6f7d8914c78e93136ca.md | 780 ++++++++++++++++ .../614e0e503b110f76d3ac2ff6.md | 256 ++++++ .../614e0e588f0e8a772a8a81a6.md | 69 ++ .../6165d3b702a5d92ad970b30c.md | 104 +++ .../6169cd8a558aa8434e0ad7f6.md | 77 ++ .../619665c9abd72906f3ad30f9.md | 125 +++ .../61967e74a8e3690ab6292daa.md | 56 ++ .../61968df2acd5550bf1616c34.md | 53 ++ .../61968e9243a4090cc805531c.md | 51 ++ .../61968f8877c6720d6d61aaf5.md | 64 ++ .../619691693bc14b0e528f5a20.md | 66 ++ .../6196928658b6010f28c39484.md | 58 ++ .../619692ff79f5770fc6d8c0b4.md | 73 ++ .../6196990f966e8f10a40094f6.md | 75 ++ .../619699c10a0f6e11591d73c4.md | 75 ++ .../61969aa6acef5b12200f672e.md | 83 ++ .../61969c487ced6f12db8fef94.md | 89 ++ .../61969d66cfcdba137d021558.md | 76 ++ .../61969e7451455614217e901b.md | 91 ++ .../6196adc17f77a714d51485f2.md | 90 ++ .../6196aead7ac7bf1584b17a7f.md | 86 ++ .../6196ce0415498d2463989e84.md | 92 ++ .../6196cee94c6da1253809dff9.md | 100 ++ .../6196d00a5d7292262bc02f4c.md | 87 ++ .../6196d0cda039d026f7f78d1e.md | 100 ++ .../6196d1ac33c68d27dcda5796.md | 119 +++ .../6196d213d99f16287bff22ae.md | 104 +++ .../6196d2c0f22ca0293107c048.md | 112 +++ .../6196d32d1340d829f0f6f57d.md | 105 +++ .../6196d41d40bf9b2aaea5d520.md | 107 +++ .../6197cff995d03905b0cca8ad.md | 118 +++ .../6197f40a16afea068c7e60c8.md | 125 +++ .../6197f667297bb30a552ce017.md | 65 ++ .../61993b72e874e709b8dfd666.md | 128 +++ .../61993cf26a8e0f0a553db223.md | 122 +++ .../61993dbb35adf30b10d49e38.md | 139 +++ .../61993e9adc9e9a0bb4d28fff.md | 133 +++ .../6199409834ccaf0d10736596.md | 139 +++ .../6199429802b7c10dc79ff871.md | 154 ++++ .../619943285a41720e6370d985.md | 156 ++++ .../619943876b706d0f35c01dbc.md | 146 +++ .../6199442866286d0ff421a4fc.md | 148 +++ .../619bcf239fc15905ecd66fce.md | 145 +++ .../619be73b3c806006ccc00bb0.md | 158 ++++ .../619be7af7b0bf60770f5d2a4.md | 155 ++++ .../619be80062551a080e32c821.md | 160 ++++ .../619be8ce4ea49008c5bfbc30.md | 152 ++++ .../619be946958c6009844f1dee.md | 166 ++++ .../619c155df0063a0a3fec0e32.md | 193 ++++ .../619c16debd0c270b01c5ce38.md | 165 ++++ .../619cfdf2e63ddf05feab86ad.md | 169 ++++ .../619d019488f98c06acbbb71a.md | 171 ++++ .../619d022dc8400c0763829a17.md | 177 ++++ .../619d02c7bc95bf0827a5d296.md | 181 ++++ .../619d033915012509031f309a.md | 184 ++++ .../619d03dadadb6509a16f4f5f.md | 210 +++++ .../619d0503e03a790a4179d463.md | 206 +++++ .../619d05c54dabca0b10058235.md | 197 ++++ .../619d0882f54bf40bdc4671ed.md | 197 ++++ .../619d090cd8d6db0c93dc5087.md | 222 +++++ .../619d0b51ca42ed0d74582186.md | 207 +++++ .../619d0bc9cb05360e1bf549c3.md | 200 ++++ .../619d0c1594c38c0ebae75878.md | 215 +++++ .../619d0d18ca99870f884a7bff.md | 225 +++++ .../619d0daf214542102739b0da.md | 227 +++++ .../619d0e56f9ca9710fcb974e3.md | 226 +++++ .../619d0eec0ac40611b41e2ccc.md | 247 +++++ .../619d0fc9825c271253df28d4.md | 238 +++++ .../619d102d786c3d13124c37c6.md | 231 +++++ .../619d107edf7ddf13cc77106a.md | 246 +++++ .../619d10cc98145f14820399c5.md | 271 ++++++ .../619d115e2adcd71538e82ebb.md | 256 ++++++ .../619d11e6d5ef9515d2a16033.md | 262 ++++++ .../619d129a417d0716a94de913.md | 267 ++++++ .../619d1340361095175f4b5115.md | 267 ++++++ .../619d15797b580c1828b05426.md | 263 ++++++ .../619d15d955d9d418c4487bbc.md | 264 ++++++ .../619d1629a8adc61960ca8b40.md | 278 ++++++ .../619d1c5fc9f8941a400955da.md | 272 ++++++ .../619d1dab9ff3421ae1976991.md | 273 ++++++ .../619d1deb8b04811b8839ffe4.md | 281 ++++++ .../619d1e7a8e81a61c5a819dc4.md | 272 ++++++ .../619d1ed33c9a071cf657a0d6.md | 306 +++++++ .../619d1fb5d244c31db8a7fdb7.md | 295 ++++++ .../619d204bd73ae51e743b8e94.md | 288 ++++++ .../619d20b12996101f430920fb.md | 304 +++++++ .../619d21fe6a3f9b2016be9d9d.md | 304 +++++++ .../619d229b0e542520cd91c685.md | 300 ++++++ .../619d23089e787e216a7043d6.md | 295 ++++++ .../619d237a107c10221ed743fa.md | 328 +++++++ .../619d26b12e651022d80cd017.md | 317 +++++++ .../619d2712853306238f41828e.md | 332 +++++++ .../619d2b7a84e78b246f2d17a2.md | 340 +++++++ .../619d2bd9c1d43c2526e96f1f.md | 325 +++++++ .../619d2d4e80400325ff89664a.md | 320 +++++++ .../619d2ebc81ba81271460850d.md | 321 +++++++ .../619d2f0e9440bc27caee1cec.md | 327 +++++++ .../619d2fd3ff4f772882e3d998.md | 323 +++++++ .../619d30350883802921bfcccc.md | 333 +++++++ .../619d324f5915c929f36ae91d.md | 345 +++++++ .../619d32c7fa21f32aaa91d499.md | 338 +++++++ .../619d333b738e3c2b5d58b095.md | 338 +++++++ .../619d337765b9f02c10e93722.md | 344 +++++++ .../619d33c51140292cc5a21742.md | 357 ++++++++ .../619d3482f505452d861d0f62.md | 347 +++++++ .../619d3561a951bf2e41a24f10.md | 346 +++++++ .../619d36103839c82efa95dd34.md | 357 ++++++++ .../619d3711d04d623000013e9e.md | 670 ++++++++++++++ .../61a8fe15a6a31306e60d1e89.md | 55 ++ .../5d822fd413a79914d39e98c9.md | 53 ++ .../5d822fd413a79914d39e98ca.md | 54 ++ .../5d822fd413a79914d39e98cb.md | 69 ++ .../5d822fd413a79914d39e98cc.md | 100 ++ .../5d822fd413a79914d39e98cd.md | 55 ++ .../5d822fd413a79914d39e98ce.md | 60 ++ .../5d822fd413a79914d39e98cf.md | 68 ++ .../5d822fd413a79914d39e98d0.md | 64 ++ .../5d822fd413a79914d39e98d1.md | 67 ++ .../5d822fd413a79914d39e98d2.md | 82 ++ .../5d822fd413a79914d39e98d3.md | 104 +++ .../5d822fd413a79914d39e98d4.md | 137 +++ .../5d822fd413a79914d39e98d5.md | 111 +++ .../5d822fd413a79914d39e98d6.md | 102 +++ .../5d822fd413a79914d39e98d7.md | 97 ++ .../5d822fd413a79914d39e98d8.md | 123 +++ .../5d822fd413a79914d39e98d9.md | 98 ++ .../5d822fd413a79914d39e98da.md | 132 +++ .../5d822fd413a79914d39e98db.md | 132 +++ .../5d822fd413a79914d39e98dc.md | 126 +++ .../5d822fd413a79914d39e98dd.md | 141 +++ .../5d822fd413a79914d39e98de.md | 139 +++ .../5d822fd413a79914d39e98df.md | 123 +++ .../5d822fd413a79914d39e98e0.md | 141 +++ .../5d822fd413a79914d39e98e1.md | 154 ++++ .../5d822fd413a79914d39e98e2.md | 134 +++ .../5d822fd413a79914d39e98e3.md | 137 +++ .../5d822fd413a79914d39e98e4.md | 146 +++ .../5d822fd413a79914d39e98e5.md | 160 ++++ .../5d822fd413a79914d39e98e6.md | 191 ++++ .../5d822fd413a79914d39e98e7.md | 252 +++++ .../5d822fd413a79914d39e98e8.md | 189 ++++ .../5d822fd413a79914d39e98e9.md | 222 +++++ .../5d822fd413a79914d39e98ea.md | 180 ++++ .../5d822fd413a79914d39e98eb.md | 202 ++++ .../5d822fd413a79914d39e98ec.md | 202 ++++ .../5d822fd413a79914d39e98ed.md | 201 ++++ .../5d822fd413a79914d39e98ee.md | 195 ++++ .../5d822fd413a79914d39e98ef.md | 196 ++++ .../5d822fd413a79914d39e98f0.md | 217 +++++ .../5d822fd413a79914d39e98f1.md | 222 +++++ .../5d822fd413a79914d39e98f2.md | 236 +++++ .../5d822fd413a79914d39e98f3.md | 221 +++++ .../5d822fd413a79914d39e98f4.md | 226 +++++ .../5d822fd413a79914d39e98f5.md | 197 ++++ .../5d822fd413a79914d39e98f6.md | 206 +++++ .../5d822fd413a79914d39e98f7.md | 202 ++++ .../5d822fd413a79914d39e98f8.md | 209 +++++ .../5d822fd413a79914d39e98f9.md | 206 +++++ .../5d822fd413a79914d39e98fa.md | 210 +++++ .../5d822fd413a79914d39e98fb.md | 239 +++++ .../5d822fd413a79914d39e98fc.md | 210 +++++ .../5d822fd413a79914d39e98fd.md | 208 +++++ .../5d822fd413a79914d39e98fe.md | 259 ++++++ .../5d822fd413a79914d39e98ff.md | 237 +++++ .../5d822fd413a79914d39e9900.md | 223 +++++ .../5d822fd413a79914d39e9901.md | 223 +++++ .../5d822fd413a79914d39e9902.md | 226 +++++ .../5d822fd413a79914d39e9903.md | 222 +++++ .../5d822fd413a79914d39e9904.md | 244 +++++ .../5d822fd413a79914d39e9905.md | 222 +++++ .../5d822fd413a79914d39e9906.md | 248 +++++ .../5d822fd413a79914d39e9907.md | 257 ++++++ .../5d822fd413a79914d39e9908.md | 257 ++++++ .../5d822fd413a79914d39e9909.md | 244 +++++ .../5d822fd413a79914d39e990a.md | 276 ++++++ .../5d822fd413a79914d39e990b.md | 253 ++++++ .../5d822fd413a79914d39e990c.md | 252 +++++ .../5d822fd413a79914d39e990d.md | 254 ++++++ .../5d822fd413a79914d39e990e.md | 264 ++++++ .../5d822fd413a79914d39e990f.md | 285 ++++++ .../5d822fd413a79914d39e9910.md | 265 ++++++ .../5d822fd413a79914d39e9911.md | 290 ++++++ .../5d822fd413a79914d39e9912.md | 286 ++++++ .../5d822fd413a79914d39e9913.md | 279 ++++++ .../5d822fd413a79914d39e9914.md | 283 ++++++ .../5d822fd413a79914d39e9915.md | 390 ++++++++ .../5d822fd413a79914d39e9916.md | 296 ++++++ .../5d822fd413a79914d39e9917.md | 306 +++++++ .../5d822fd413a79914d39e9918.md | 297 ++++++ .../5d822fd413a79914d39e9919.md | 300 ++++++ .../5d822fd413a79914d39e991a.md | 311 +++++++ .../5d822fd413a79914d39e991b.md | 313 +++++++ .../5d822fd413a79914d39e991c.md | 316 +++++++ .../5d822fd413a79914d39e991d.md | 314 +++++++ .../5d822fd413a79914d39e991e.md | 325 +++++++ .../5d822fd413a79914d39e991f.md | 323 +++++++ .../5d822fd413a79914d39e9920.md | 329 +++++++ .../5d822fd413a79914d39e9921.md | 347 +++++++ .../5d822fd413a79914d39e9922.md | 346 +++++++ .../5d822fd413a79914d39e9923.md | 347 +++++++ .../5d822fd413a79914d39e9924.md | 339 +++++++ .../5d822fd413a79914d39e9925.md | 345 +++++++ .../5d822fd413a79914d39e9926.md | 354 +++++++ .../5d822fd413a79914d39e9927.md | 349 +++++++ .../5d822fd413a79914d39e9928.md | 348 +++++++ .../5d822fd413a79914d39e9929.md | 361 ++++++++ .../5d822fd413a79914d39e992a.md | 358 ++++++++ .../5d822fd413a79914d39e992b.md | 360 ++++++++ .../5d822fd413a79914d39e992c.md | 363 ++++++++ .../5d822fd413a79914d39e992d.md | 376 ++++++++ .../5d822fd413a79914d39e992e.md | 373 ++++++++ .../5d822fd413a79914d39e992f.md | 376 ++++++++ .../5d822fd413a79914d39e9930.md | 380 ++++++++ .../5d822fd413a79914d39e9931.md | 403 ++++++++ .../5d822fd413a79914d39e9932.md | 395 ++++++++ .../5d822fd413a79914d39e9933.md | 401 ++++++++ .../5d822fd413a79914d39e9934.md | 408 +++++++++ .../5d822fd413a79914d39e9935.md | 408 +++++++++ .../5d822fd413a79914d39e9936.md | 401 ++++++++ .../5d822fd413a79914d39e9937.md | 402 ++++++++ .../5d822fd413a79914d39e9938.md | 420 +++++++++ .../5d822fd413a79914d39e9939.md | 409 +++++++++ .../5d822fd413a79914d39e993a.md | 421 +++++++++ .../5d822fd413a79914d39e993b.md | 423 +++++++++ .../5d822fd413a79914d39e993c.md | 436 +++++++++ .../5d822fd413a79914d39e993d.md | 448 +++++++++ .../5d822fd413a79914d39e993e.md | 860 ++++++++++++++++++ .../5dc17d3bf86c76b9248c6eb4.md | 60 ++ .../5dc17dc8f86c76b9248c6eb5.md | 68 ++ .../5dc2385ff86c76b9248c6eb7.md | 73 ++ .../5dc23991f86c76b9248c6eb8.md | 95 ++ .../5dc23f9bf86c76b9248c6eba.md | 61 ++ .../5dc24073f86c76b9248c6ebb.md | 59 ++ .../5dc24165f86c76b9248c6ebc.md | 57 ++ .../5dc24614f86c76b9248c6ebd.md | 79 ++ .../5ddbd81294d8ddc1510a8e56.md | 57 ++ .../5dfa22d1b521be39a3de7be0.md | 66 ++ .../5dfa2407b521be39a3de7be1.md | 55 ++ .../5dfa30b9eacea3f48c6300ad.md | 88 ++ .../5dfa3589eacea3f48c6300ae.md | 75 ++ .../5dfa371beacea3f48c6300af.md | 82 ++ .../5dfa37b9eacea3f48c6300b0.md | 58 ++ .../5dfb5ecbeacea3f48c6300b1.md | 77 ++ .../5dfb6250eacea3f48c6300b2.md | 88 ++ .../5dfb655eeacea3f48c6300b3.md | 76 ++ .../5dfb6a35eacea3f48c6300b4.md | 106 +++ .../5ef9b03c81a63668521804d0.md | 85 ++ .../5ef9b03c81a63668521804d1.md | 79 ++ .../5ef9b03c81a63668521804d2.md | 92 ++ .../5ef9b03c81a63668521804d3.md | 72 ++ .../5ef9b03c81a63668521804d4.md | 96 ++ .../5ef9b03c81a63668521804d5.md | 103 +++ .../5ef9b03c81a63668521804d6.md | 88 ++ .../5ef9b03c81a63668521804d7.md | 116 +++ .../5ef9b03c81a63668521804d8.md | 109 +++ .../5ef9b03c81a63668521804d9.md | 104 +++ .../5ef9b03c81a63668521804da.md | 93 ++ .../5ef9b03c81a63668521804db.md | 91 ++ .../5ef9b03c81a63668521804dc.md | 135 +++ .../5ef9b03c81a63668521804dd.md | 104 +++ .../5ef9b03c81a63668521804de.md | 98 ++ .../5ef9b03c81a63668521804df.md | 89 ++ .../5ef9b03c81a63668521804e1.md | 100 ++ .../5ef9b03c81a63668521804e2.md | 128 +++ .../5ef9b03c81a63668521804e3.md | 122 +++ .../5ef9b03c81a63668521804e5.md | 117 +++ .../5ef9b03c81a63668521804e7.md | 102 +++ .../5ef9b03c81a63668521804e8.md | 104 +++ .../5ef9b03c81a63668521804e9.md | 118 +++ .../5ef9b03c81a63668521804ea.md | 108 +++ .../5ef9b03c81a63668521804eb.md | 110 +++ .../5ef9b03c81a63668521804ec.md | 105 +++ .../5ef9b03c81a63668521804ee.md | 166 ++++ .../5efada803cbd2bbdab94e332.md | 100 ++ .../5efae0543cbd2bbdab94e333.md | 97 ++ .../5efae16e3cbd2bbdab94e334.md | 123 +++ .../5efb23e70dc218d6c85f89b1.md | 104 +++ .../5efb2c990dc218d6c85f89b2.md | 101 ++ .../5efc4f528d6a74d05e68af74.md | 136 +++ .../5efc518e8d6a74d05e68af75.md | 98 ++ .../5efc54138d6a74d05e68af76.md | 86 ++ .../5efc575c8d6a74d05e68af77.md | 124 +++ .../5f05a1d8e233dff4a68508d8.md | 107 +++ .../5f07be6ef7412fbad0c5626b.md | 63 ++ .../5f07c98cdb9413cbd4b16750.md | 81 ++ .../5f07fb1579dc934717801375.md | 98 ++ .../5f0d48e7b435f13ab6550051.md | 105 +++ .../5f0d4ab1b435f13ab6550052.md | 128 +++ .../5f0d4d04b435f13ab6550053.md | 114 +++ .../5f1a80975fc4bcae0edb3497.md | 101 ++ .../5f1a89f1190aff21ae42105a.md | 106 +++ .../7cf9b03d81a65668421804c3.md | 103 +++ .../60eebd07ea685b0e777b5583.md | 52 ++ .../60f027099a15b00485563dd2.md | 54 ++ .../60f027c87bc98f050395c139.md | 67 ++ .../60f0286404aefb0562a4fdf9.md | 99 ++ .../60f02e7361b68405e27b62a5.md | 43 + .../60f030d388cb74067cf291c3.md | 54 ++ .../60f1922fcbd2410527b3bd89.md | 54 ++ .../60f1a5e2d2c23707a4f9a660.md | 51 ++ .../60f1a9cbd23023082e149fee.md | 64 ++ .../60f5c3e399ff1a05629964e4.md | 62 ++ .../60f5cb8875ab6a0610f05071.md | 63 ++ .../60f5d2776c854e069560fbe6.md | 61 ++ .../60f5dc35c07ac1078f140916.md | 81 ++ .../60f803d5241e6a0433a523a1.md | 72 ++ .../60f805f813eaf2049bc2ceea.md | 94 ++ .../60f80e0081e0f2052ae5b505.md | 87 ++ .../60f81167d0d4910809f88945.md | 79 ++ .../60f81616cff80508badf9ad5.md | 93 ++ .../60f83e7bfc09900959f41e20.md | 73 ++ .../60f84ec41116b209c280ba91.md | 81 ++ .../60f852f645b5310a8264f555.md | 75 ++ .../60f85a62fb30c80bcea0cedb.md | 84 ++ .../60f8604682407e0d017bbf7f.md | 81 ++ .../60f8618d191b940d62038513.md | 105 +++ .../60fab4a123ce4b04526b082b.md | 83 ++ .../60fab8367d35de04e5cb7929.md | 85 ++ .../60fab9f17fa294054b74228c.md | 88 ++ .../60fabf0dd4959805dbae09e6.md | 102 +++ .../60fac4095512d3066053d73c.md | 84 ++ .../60fac56271087806def55b33.md | 94 ++ .../60fac8d7fdfaee0796934f20.md | 116 +++ .../60faca286cb48b07f6482970.md | 110 +++ .../60facde2d0dc61085b41063f.md | 105 +++ .../60facf914c7b9b08d7510c2c.md | 95 ++ .../60fad0a812d9890938524f50.md | 95 ++ .../60fad1cafcde010995e15306.md | 155 ++++ .../60fad6dfcc0d930a59becf12.md | 102 +++ .../60fad8e6148f310bba7890b1.md | 103 +++ .../60fad99e09f9d30c1657e790.md | 120 +++ .../60fadb18058e950c73925279.md | 121 +++ .../60fadce90f85c50d0bb0dd4f.md | 114 +++ .../60fadd972e6ffe0d6858fa2d.md | 151 +++ .../60fadfa2b540b70dcfa8b771.md | 131 +++ .../60fc219d333e37046f474a6e.md | 125 +++ .../60fc22d1e64d1b04cdd4e602.md | 140 +++ .../60fc236dc04532052926fdac.md | 125 +++ .../60ffe1bc30415f042faea936.md | 142 +++ .../60ffe3936796ac04959285a9.md | 139 +++ .../60ffe4f4ec18cd04dc470c56.md | 144 +++ .../60ffe69ee377c6055e192a46.md | 152 ++++ .../60ffe7d8aae62c05bcc9e7eb.md | 145 +++ .../60ffe8a5ceb0e90618db06d9.md | 143 +++ .../60ffe947a868ec068f7850f6.md | 145 +++ .../60ffe9cb47809106eda2f2c9.md | 150 +++ .../60ffec2825da1007509ddd06.md | 151 +++ .../60ffecefac971607ae73c60f.md | 152 ++++ .../60ffefd6479a3d084fb77cbc.md | 284 ++++++ .../60b69a66b6ddb80858c51578.md | 112 +++ .../60b69a66b6ddb80858c51579.md | 63 ++ .../60b69a66b6ddb80858c5157a.md | 58 ++ .../60b69a66b6ddb80858c5157b.md | 50 + .../60b69a66b6ddb80858c5157c.md | 51 ++ .../60b69a66b6ddb80858c5157d.md | 54 ++ .../60b69a66b6ddb80858c5157e.md | 56 ++ .../60b69a66b6ddb80858c5157f.md | 69 ++ .../60b69a66b6ddb80858c51580.md | 59 ++ .../60b69a66b6ddb80858c51581.md | 68 ++ .../60b69a66b6ddb80858c51582.md | 70 ++ .../60b69a66b6ddb80858c51583.md | 84 ++ .../60b69a66b6ddb80858c51584.md | 79 ++ .../60b69a66b6ddb80858c51585.md | 74 ++ .../60b69a66b6ddb80858c51586.md | 93 ++ .../60b69a66b6ddb80858c51587.md | 91 ++ .../60b69a66b6ddb80858c51588.md | 102 +++ .../60b69a66b6ddb80858c51589.md | 88 ++ .../60b69a66b6ddb80858c5158a.md | 107 +++ .../60b69a66b6ddb80858c5158b.md | 105 +++ .../60b69a66b6ddb80858c5158c.md | 116 +++ .../60b69a66b6ddb80858c5158d.md | 114 +++ .../60b69a66b6ddb80858c5158e.md | 105 +++ .../60b69a66b6ddb80858c5158f.md | 126 +++ .../60b69a66b6ddb80858c51590.md | 124 +++ .../60b69a66b6ddb80858c51591.md | 115 +++ .../60b69a66b6ddb80858c51592.md | 136 +++ .../60b69a66b6ddb80858c51593.md | 125 +++ .../60b69a66b6ddb80858c51594.md | 135 +++ .../60b69a66b6ddb80858c51595.md | 146 +++ .../60b69a66b6ddb80858c51596.md | 144 +++ .../60b69a66b6ddb80858c51597.md | 135 +++ .../60b69a66b6ddb80858c51598.md | 142 +++ .../60b69a66b6ddb80858c51599.md | 156 ++++ .../60b69a66b6ddb80858c5159a.md | 158 ++++ .../60b69a66b6ddb80858c5159b.md | 161 ++++ .../60b69a66b6ddb80858c5159c.md | 169 ++++ .../60b69a66b6ddb80858c5159d.md | 167 ++++ .../60b69a66b6ddb80858c5159e.md | 178 ++++ .../60b69a66b6ddb80858c5159f.md | 183 ++++ .../60b69a66b6ddb80858c515a0.md | 181 ++++ .../60b69a66b6ddb80858c515a1.md | 192 ++++ .../60b69a66b6ddb80858c515a2.md | 190 ++++ .../60b69a66b6ddb80858c515a3.md | 201 ++++ .../60b69a66b6ddb80858c515a4.md | 199 ++++ .../60b69a66b6ddb80858c515a5.md | 190 ++++ .../60b69a66b6ddb80858c515a6.md | 211 +++++ .../60b69a66b6ddb80858c515a7.md | 217 +++++ .../60b69a66b6ddb80858c515a8.md | 207 +++++ .../60b69a66b6ddb80858c515a9.md | 217 +++++ .../60b69a66b6ddb80858c515aa.md | 220 +++++ .../60b69a66b6ddb80858c515ab.md | 225 +++++ .../60b69a66b6ddb80858c515ac.md | 228 +++++ .../60b69a66b6ddb80858c515ad.md | 225 +++++ .../60b69a66b6ddb80858c515ae.md | 245 +++++ .../60b69a66b6ddb80858c515af.md | 240 +++++ .../60b69a66b6ddb80858c515b0.md | 238 +++++ .../60b69a66b6ddb80858c515b1.md | 298 ++++++ .../60b69a66b6ddb80858c515b2.md | 281 ++++++ .../60b69a66b6ddb80858c515b3.md | 287 ++++++ .../60b69a66b6ddb80858c515b4.md | 285 ++++++ .../60b69a66b6ddb80858c515b5.md | 296 ++++++ .../60b69a66b6ddb80858c515b6.md | 282 ++++++ .../60b69a66b6ddb80858c515b7.md | 295 ++++++ .../60b69a66b6ddb80858c515b8.md | 286 ++++++ .../60b69a66b6ddb80858c515b9.md | 301 ++++++ .../60b69a66b6ddb80858c515ba.md | 304 +++++++ .../60b69a66b6ddb80858c515bc.md | 295 ++++++ .../60b69a66b6ddb80858c515bd.md | 348 +++++++ .../60b69a66b6ddb80858c515be.md | 337 +++++++ .../60b69a66b6ddb80858c515bf.md | 348 +++++++ .../60b69a66b6ddb80858c515c0.md | 359 ++++++++ .../60b69a66b6ddb80858c515c1.md | 365 ++++++++ .../60b69a66b6ddb80858c515c2.md | 363 ++++++++ .../60b69a66b6ddb80858c515c3.md | 354 +++++++ .../60b69a66b6ddb80858c515c4.md | 381 ++++++++ .../60b69a66b6ddb80858c515c5.md | 382 ++++++++ .../60b69a66b6ddb80858c515c6.md | 388 ++++++++ .../60b69a66b6ddb80858c515c7.md | 739 +++++++++++++++ .../60b80da8676fb3227967a731.md | 74 ++ .../60ba890832b4940f24d1936b.md | 312 +++++++ .../60ba89123a445e0f5c9e4022.md | 326 +++++++ .../60ba8913f1704c0f7a8906b8.md | 312 +++++++ .../60ba89146b25080f99ab54ad.md | 315 +++++++ .../60ba8914bab51f0fb8228e9c.md | 310 +++++++ .../60ba929345ab0714a3743655.md | 327 +++++++ .../60ba9296d4d6b414c1b10995.md | 330 +++++++ .../60ba92987c1e4914dfa7a0b9.md | 321 +++++++ .../60bad32219ebcb4a8810ac6a.md | 164 ++++ .../61fd5a93fd62bb35968adeab.md | 123 +++ .../61fd6343fb42013d99bcd7f3.md | 48 + .../61fd66c687e610436494c6f1.md | 52 ++ .../61fd67a656743144844941cb.md | 78 ++ .../61fd6ab779390f49148773bb.md | 65 ++ .../61fd6b7c83dbf54a08cf0498.md | 79 ++ .../61fd6cc9475a784b7776233e.md | 80 ++ .../61fd70336ebb3e4f62ee81ba.md | 73 ++ .../61fd719788899952e67692b9.md | 86 ++ .../61fd71d596e8f253b9408b39.md | 86 ++ .../61fd75ea7f663457612dba02.md | 125 +++ .../61fd7648a7ba2e5882436831.md | 96 ++ .../61fd778081276b59d59abad6.md | 134 +++ .../61fd77f7ad2aeb5ae34d07d6.md | 138 +++ .../61fd78621573aa5e8b512f5e.md | 142 +++ .../61fd7a160ed17960e971f28b.md | 140 +++ .../61fd7b3fcaa5406257abc5d1.md | 130 +++ .../61fd8e491324ce717da97ffe.md | 119 +++ .../61fd8fd08af43372f02952d0.md | 149 +++ .../61fd9126aa72a474301fc49f.md | 131 +++ .../61fd933ba685de776a94997e.md | 169 ++++ .../61fd94056e0355785fbba4d3.md | 173 ++++ .../61fd986ddbcbd47ba8fbc5ec.md | 177 ++++ .../61fd990577d8227dd93fbeeb.md | 181 ++++ .../61fd9a4ff2fc4481b9157bd7.md | 165 ++++ .../61fd9ad665a4a282c8106be3.md | 198 ++++ .../61fd9b7285bde783ad5b8aac.md | 208 +++++ .../61fd9d9fbdfe078800317055.md | 158 ++++ .../61fda307bde0b091cf7d884a.md | 168 ++++ .../61fda339eadcfd92a6812bed.md | 171 ++++ .../61fdac1e31692f9a9ad97295.md | 178 ++++ .../61fdaea3999cb19d76ce717b.md | 173 ++++ .../61fdaf9ff894b6a084ecdc1b.md | 175 ++++ .../61fdafe6f07fd7a1c6785bc2.md | 183 ++++ .../61fdb04d9939f0a26ca51c2b.md | 193 ++++ .../620159cd5431aa34bc6a4c9c.md | 199 ++++ .../62015a5da1c95c358f079ebb.md | 195 ++++ .../62015cd2654a1139321a89d2.md | 197 ++++ .../62015d8942384c3aed48329e.md | 213 +++++ .../620167374bb8b4455cd11125.md | 225 +++++ .../620174ed519dd7506c1a4b61.md | 213 +++++ .../620175b3710a0951cfa86edf.md | 230 +++++ .../6201782cc420715562f36271.md | 233 +++++ .../620179bc0a6a2358c72b90ad.md | 225 +++++ .../62017b6f47454059bf2d3bd1.md | 231 +++++ .../62017f47c87be96457c49f46.md | 299 ++++++ .../62017fa5bbef406580ceb44f.md | 237 +++++ .../62018243f046a368fab8ffb6.md | 239 +++++ .../6201830cb0c74b69f1b41635.md | 243 +++++ .../620186f4b6b8356d2def576b.md | 253 ++++++ .../62018ba1aa263770c953be66.md | 252 +++++ .../62018c3e94434a71af1d5eaa.md | 262 ++++++ .../62018ec29b3ae674f40bef31.md | 256 ++++++ .../62019093fe30e278e797d2f6.md | 266 ++++++ .../620191707bc65579ddd3ce15.md | 271 ++++++ .../620192a767533a7ad19d96d7.md | 278 ++++++ .../6201995d9ab88e80f1989dce.md | 275 ++++++ .../620199c7a7a32c81d4db3410.md | 279 ++++++ .../6201a1a7af32c287bd6b8183.md | 285 ++++++ .../6201a1cc668a34888f5b2f52.md | 289 ++++++ .../6201a20d742f5c89736c8cfb.md | 303 ++++++ .../6201a42e39bf3b95b6a33bf3.md | 321 +++++++ .../6201a4adcc6414968b391592.md | 297 ++++++ .../6201a5258af7b398b030bfaf.md | 313 +++++++ .../6201a59be346d399c21d10b1.md | 591 ++++++++++++ .../612e6afc009b450a437940a1.md | 131 +++ .../612e77aba7ca691f598feb02.md | 64 ++ .../612e78af05201622d4bab8aa.md | 57 ++ .../612e7d1c29fb872d6384379c.md | 60 ++ .../612e804c54d5e7308d7ebe56.md | 60 ++ .../612e813b3ba67633222cbe54.md | 95 ++ .../612e8279827a28352ce83a72.md | 74 ++ .../612e83ec2eca1e370f830511.md | 99 ++ .../612e89562043183c86df287c.md | 77 ++ .../612e89d254fe5d3df7d6693d.md | 83 ++ .../612e8eebe3a6dc3fcc33a66f.md | 95 ++ .../612e95ef2e4bdf41f69067f9.md | 81 ++ .../612e96fc87fe8e44f69f7ec5.md | 102 +++ .../612e98f3245c98475e49cfc6.md | 88 ++ .../612e9a21381a1949327512e6.md | 89 ++ .../612e9d142affc44a453655db.md | 117 +++ .../612e9f1e7e5ccd4fa9ada0be.md | 103 +++ .../612ea4c4993aba52ab4aa32e.md | 119 +++ .../612ea97df5742154772f312e.md | 110 +++ .../612ead8788d28655ef8db056.md | 112 +++ .../612eaf56b7ba3257fdbfb0db.md | 144 +++ .../612eb4893b63c75bb9251ddf.md | 129 +++ .../612eb75153591b5e3b1ab65e.md | 115 +++ .../612eb7ca8c275d5f89c73333.md | 116 +++ .../612eb8e984cd73677a92b7e9.md | 117 +++ .../612eb934f64a4d6890a45518.md | 118 +++ .../612ebcba99bfa46a15370b11.md | 127 +++ .../612ebe7fe6d07e6b76d1cae2.md | 133 +++ .../612ebedec97e096c8bf64999.md | 136 +++ .../612ebf9a210f2b6d77001e68.md | 139 +++ .../612ec0490ae8626e9adf82e4.md | 133 +++ .../612ec19d5268da7074941f84.md | 144 +++ .../612ec29c84b9a6718b1f5cec.md | 288 ++++++ .../60a3e3396c7b40068ad6996a.md | 55 ++ .../60a3e3396c7b40068ad6996b.md | 65 ++ .../60a3e3396c7b40068ad6996c.md | 42 + .../60a3e3396c7b40068ad6996d.md | 41 + .../60a3e3396c7b40068ad6996e.md | 43 + .../60a3e3396c7b40068ad6996f.md | 47 + .../60a3e3396c7b40068ad69970.md | 59 ++ .../60a3e3396c7b40068ad69971.md | 69 ++ .../60a3e3396c7b40068ad69972.md | 54 ++ .../60a3e3396c7b40068ad69973.md | 55 ++ .../60a3e3396c7b40068ad69974.md | 67 ++ .../60a3e3396c7b40068ad69975.md | 67 ++ .../60a3e3396c7b40068ad69976.md | 64 ++ .../60a3e3396c7b40068ad69977.md | 65 ++ .../60a3e3396c7b40068ad69978.md | 66 ++ .../60a3e3396c7b40068ad69979.md | 71 ++ .../60a3e3396c7b40068ad6997a.md | 74 ++ .../60a3e3396c7b40068ad6997b.md | 70 ++ .../60a3e3396c7b40068ad6997c.md | 71 ++ .../60a3e3396c7b40068ad6997d.md | 74 ++ .../60a3e3396c7b40068ad6997e.md | 75 ++ .../60a3e3396c7b40068ad6997f.md | 82 ++ .../60a3e3396c7b40068ad69980.md | 84 ++ .../60a3e3396c7b40068ad69981.md | 84 ++ .../60a3e3396c7b40068ad69982.md | 79 ++ .../60a3e3396c7b40068ad69983.md | 80 ++ .../60a3e3396c7b40068ad69984.md | 81 ++ .../60a3e3396c7b40068ad69986.md | 93 ++ .../60a3e3396c7b40068ad69987.md | 94 ++ .../60a3e3396c7b40068ad69988.md | 87 ++ .../60a3e3396c7b40068ad69989.md | 88 ++ .../60a3e3396c7b40068ad6998a.md | 89 ++ .../60a3e3396c7b40068ad6998b.md | 93 ++ .../60a3e3396c7b40068ad6998c.md | 92 ++ .../60a3e3396c7b40068ad6998d.md | 116 +++ .../60a3e3396c7b40068ad6998e.md | 95 ++ .../60a3e3396c7b40068ad6998f.md | 98 ++ .../60a3e3396c7b40068ad69990.md | 97 ++ .../60a3e3396c7b40068ad69991.md | 98 ++ .../60a3e3396c7b40068ad69992.md | 101 ++ .../60a3e3396c7b40068ad69993.md | 100 ++ .../60a3e3396c7b40068ad69994.md | 103 +++ .../60a3e3396c7b40068ad69995.md | 104 +++ .../60a3e3396c7b40068ad69996.md | 103 +++ .../60a3e3396c7b40068ad69997.md | 180 ++++ .../615f2abbe7d18d49a1e0e1c8.md | 55 ++ .../615f2d4150fe0d4cbd0f2628.md | 60 ++ .../615f34948891834dd77655a6.md | 61 ++ .../615f34ecc1091b4fd5a8a484.md | 67 ++ .../615f357957e370510f21ea16.md | 53 ++ .../615f378014c2da526a109c81.md | 55 ++ .../615f38279e5c3d53692ea441.md | 64 ++ .../615f38cabc64e3556f98cc1a.md | 63 ++ .../615f3949f58e12577dcefb00.md | 59 ++ .../615f39d7da41b15851fa3fb9.md | 64 ++ .../615f3b091162165948e1cb33.md | 70 ++ .../615f3cafd794015aa9547a6d.md | 74 ++ .../615f3d9e59db4b5b8e960762.md | 68 ++ .../615f3e1b7233ee5c7595771f.md | 69 ++ .../615f3e4af8008c5d494d3afe.md | 78 ++ .../615f3ed16592445e57941aec.md | 94 ++ .../615f405b89a7ec5f8e2d11f4.md | 89 ++ .../615f40b01f680e608d360ed4.md | 82 ++ .../615f4172e9eec061d6456221.md | 89 ++ .../615f41c979787462e76dab90.md | 102 +++ .../615f423cf65d5864132a0956.md | 84 ++ .../615f42a021625f656101ef93.md | 104 +++ .../615f4bfb9de4a16703b56eb6.md | 94 ++ .../615f4ce9d877b668417c0c42.md | 104 +++ .../615f4dde9d72e3694cb9ee3b.md | 105 +++ .../615f4ec58334106a4170c2a8.md | 105 +++ .../615f4f9e4a40566b776a8f38.md | 111 +++ .../615f50473cc0196c6dd3892a.md | 99 ++ .../615f51257a8a516d80b6c743.md | 113 +++ .../615f51e4e5b24a6e80eccce1.md | 116 +++ .../615f522dea4f776f64dc3e91.md | 113 +++ .../615f5486b8fd4b71633f69b0.md | 138 +++ .../615f575b50b91e72af079480.md | 119 +++ .../615f5af373a68e744a3c5a76.md | 120 +++ .../615f5c1cb7575c7551ed8a40.md | 116 +++ .../615f5fd85d0062761f288364.md | 119 +++ .../615f61338c8ca176d6445574.md | 126 +++ .../615f666ac5edea782feb7e75.md | 127 +++ .../615f671b6d1919792745aa5d.md | 153 ++++ .../615f6823d0815b7a991f2a75.md | 139 +++ .../615f6a7d4ba8037bc086c2c7.md | 127 +++ .../615f6b2d164f81809efd9bdc.md | 165 ++++ .../615f6cc778f7698258467596.md | 156 ++++ .../615f6fddaac1e083502d3e6a.md | 130 +++ .../615f70077a4ff98424236c1e.md | 138 +++ .../615f72a872354a850d4f533e.md | 142 +++ .../615f74a71f1e498619e38ee8.md | 149 +++ .../615f7ad94380408d971d14f6.md | 161 ++++ .../615f7bc680f7168ea01ebf99.md | 146 +++ .../615f7c71eab8218f846e4503.md | 165 ++++ .../615f7d489a581590d1350288.md | 146 +++ .../615f7de4487b64919bb4aa5e.md | 178 ++++ .../615f7e7281626a92bbd62da8.md | 179 ++++ .../615f7ecb09de9a938ef94756.md | 180 ++++ .../615f7fa959ab75948f96a0d6.md | 164 ++++ .../615f808d85793195b0f53be9.md | 166 ++++ .../615f829d07b18f96f6f6684b.md | 150 +++ .../615f83ef928ec9982b785b6a.md | 156 ++++ .../615f84f246e8ba98e3cd97be.md | 193 ++++ .../615f887466db4ba14b5342cc.md | 176 ++++ .../615f89e055040ba294719d2f.md | 175 ++++ .../615f8bfe0f30a1a3c340356b.md | 202 ++++ .../615f8f1223601fa546e93f31.md | 184 ++++ .../615f905fbd1017a65ca224eb.md | 192 ++++ .../615f94786869e1a7fec54375.md | 176 ++++ .../615f951dff9317a900ef683f.md | 325 +++++++ curriculum/utils.js | 7 +- .../api/configs/superBlockList.ts | 4 + tools/challenge-helper-scripts/fs-utils.ts | 1 + .../rename-challenge-files.js | 44 +- utils/index.js | 1 + 1052 files changed, 172557 insertions(+), 43 deletions(-) create mode 100644 client/src/pages/learn/2022/responsive-web-design-qa/index.md create mode 100644 client/src/pages/learn/2022/responsive-web-design-qa/learn-basic-css-by-building-a-cafe-menu-qa/index.md create mode 100644 client/src/pages/learn/2022/responsive-web-design-qa/learn-html-by-building-a-cat-photo-app-qa/index.md create mode 100644 curriculum/challenges/_meta/build-a-personal-portfolio-webpage-project-qa/meta.json create mode 100644 curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu-qa/meta.json create mode 100644 curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app-qa/meta.json create mode 100644 curriculum/challenges/english/00-certifications/responsive-web-design-certification-qa/responsive-web-design-certification-qa.yml create mode 100644 curriculum/challenges/english/14-responsive-web-design-22-qa/build-a-personal-portfolio-webpage-project-qa/build-a-personal-portfolio-webpage-qa.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/cccccccccccccccccccccccc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/dddddddddddddddddddddddd.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/eeeeeeeeeeeeeeeeeeeeeeee.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/ffffffffffffffffffffffff.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c9d35015ae0ba0c250e8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d2b687a2cd17bac5730c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d3dc359b371b1a21d783.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d4bc9db3c81c51a09ab7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f23ea21477b76f3b80f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764fdda535587e1fefb3aa.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6343fb42013d99bcd7f3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd70336ebb3e4f62ee81ba.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md create mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md diff --git a/api-server/src/server/middlewares/request-authorization.js b/api-server/src/server/middlewares/request-authorization.js index 4b71c8d56afd23..33d3c0f1f653ab 100644 --- a/api-server/src/server/middlewares/request-authorization.js +++ b/api-server/src/server/middlewares/request-authorization.js @@ -73,7 +73,6 @@ export default function getRequestAuthorisation({ const { origin } = getRedirectParams(req); const { path } = req; if (!isAllowedPath(path)) { - console.log('##### path:', path); const { accessToken, error, jwt } = getAccessTokenFromRequest( req, jwtSecret diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index c139b641fa6ef1..54380f2e67dc41 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -80,31 +80,36 @@ "intro": [ "This is one of the required projects to earn your certification.", "For this project, you will build a tribute page for a subject of your choosing, fictional or real." - ] }, + ] + }, "build-a-personal-portfolio-webpage-project": { "title": "Personal Portfolio Webpage", "intro": [ "This is one of the required projects to earn your certification.", "For this project, you will build your own personal portfolio page." - ] }, + ] + }, "build-a-product-landing-page-project": { "title": "Product Landing Page", "intro": [ "This is one of the required projects to earn your certification.", "For this project, you will build a product landing page to market a product of your choice." - ] }, + ] + }, "build-a-survey-form-project": { "title": "Survey Form", "intro": [ "This is one of the required projects to earn your certification.", "For this project, you will build a survey form to collect data from your users." - ] }, + ] + }, "build-a-technical-documentation-page-project": { "title": "Technical Documentation Page", "intro": [ "This is one of the required projects to earn your certification.", "For this project, you will build a technical documentation page to serve as instruction or reference for a topic." - ] }, + ] + }, "learn-html-by-building-a-cat-photo-app": { "title": "Learn HTML by Building a Cat Photo App", "intro": [ @@ -181,24 +186,66 @@ "In this course, you'll use typography to build a nutrition label webpage. You'll learn how to style text, adjust line height, and position your text using CSS." ] }, - "learn-css-transforms-by-building-a-penguin": { "title": "Learn CSS Transforms by Building a Penguin", "intro": [ - "You can transform HTML elements to create appealing designs that draw your reader's eye. You can use transforms to rotate elements, scale them, and more.", - "In this course, you'll build a penguin. You'll use CSS transforms to position and resize the parts of your penguin, create a background, and animate your work." - ] }, - "learn-css-animation-by-building-a-ferris-wheel": { "title": "Learn CSS Animation by Building a Ferris Wheel", "intro": [ - "You can use CSS animation to draw attention to specific sections of your webpage and make it more engaging.", - "In this course, you'll build a Ferris wheel. You'll learn how to use CSS to animate elements, transform them, and adjust their speed." - ] }, - "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": { "title": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet", "intro": [ - "You can use CSS pseudo selectors to change specific HTML elements.", - "In this course, you'll build a balance sheet using pseudo selectors. You'll learn how to change the style of an element when you hover over it with your mouse, and trigger other events on your webpage." - ] }, + "learn-css-transforms-by-building-a-penguin": { + "title": "Learn CSS Transforms by Building a Penguin", + "intro": [ + "You can transform HTML elements to create appealing designs that draw your reader's eye. You can use transforms to rotate elements, scale them, and more.", + "In this course, you'll build a penguin. You'll use CSS transforms to position and resize the parts of your penguin, create a background, and animate your work." + ] + }, + "learn-css-animation-by-building-a-ferris-wheel": { + "title": "Learn CSS Animation by Building a Ferris Wheel", + "intro": [ + "You can use CSS animation to draw attention to specific sections of your webpage and make it more engaging.", + "In this course, you'll build a Ferris wheel. You'll learn how to use CSS to animate elements, transform them, and adjust their speed." + ] + }, + "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": { + "title": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet", + "intro": [ + "You can use CSS pseudo selectors to change specific HTML elements.", + "In this course, you'll build a balance sheet using pseudo selectors. You'll learn how to change the style of an element when you hover over it with your mouse, and trigger other events on your webpage." + ] + }, "learn-css-colors-by-building-a-set-of-colored-markers": { "title": "Learn CSS Colors by Building a Set of Colored Markers", "intro": [ "Selecting the correct colors for your webpage can greatly improve the aesthetic appeal to your readers.", "In this course, you'll build a set of colored markers. You'll learn different ways to set color values and how to pair colors with each other." - ] } + ] + } + } + }, + "2022/responsive-web-design-qa": { + "title": "(New) Responsive Web Design QA", + "intro": [ + "In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.", + "First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.", + "Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid." + ], + "note": "Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.", + "blocks": { + "build-a-personal-portfolio-webpage-project-qa": { + "title": "Personal Portfolio Webpage QA", + "intro": [ + "This is one of the required projects to earn your certification.", + "For this project, you will build your own personal portfolio page." + ] + }, + "learn-html-by-building-a-cat-photo-app-qa": { + "title": "Learn HTML by Building a Cat Photo App QA", + "intro": [ + "HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.", + "In this course, you'll learn the most common HTML tags by building your own cat photo app." + ] + }, + "learn-basic-css-by-building-a-cafe-menu-qa": { + "title": "Learn Basic CSS by Building a Cafe Menu QA", + "intro": [ + "CSS tells the browser how to display your webpage. You can use CSS to set the color, font, size, and other aspects of HTML elements.", + "In this course, you'll learn CSS by designing a menu page for a cafe webpage." + ] + } } }, "javascript-algorithms-and-data-structures": { diff --git a/client/src/pages/learn/2022/responsive-web-design-qa/index.md b/client/src/pages/learn/2022/responsive-web-design-qa/index.md new file mode 100644 index 00000000000000..353565ea8d686e --- /dev/null +++ b/client/src/pages/learn/2022/responsive-web-design-qa/index.md @@ -0,0 +1,20 @@ +--- +title: Responsive Web Design QA +superBlock: 2022/responsive-web-design-qa +certification: responsive-web-design-qa +--- + +## Introduction to Responsive Web Design + +Welcome to Responsive Web Design! + +Let's first take a look at what is in the scope of Responsive Web Design (and what is not). +The Web part of Responsive Web Design means that the content you are creating is designed to be delivered over the web to users' browsers. To do this, you will need to learn the language that browsers use to describe web pages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design. + +That brings us to design. Web Design focuses on how websites should look and behave to the end user. There are plenty of additional aspects to websites, including how to host a website so people can access it, how to protect your websites and store your users' data, and the ethos behind what should go on a website in the first place. These are somewhat harder to teach, but do require a good understanding of the capabilities of the web in modern contexts. + +And what of the word Responsive? Well, that brings us to the idea of modern contexts. In today's world, websites are expected to be just as accessible on laptops, tablets and phones. If you compare your user experience on a document-editing program on a computer versus a document-editing program on a mobile, the features on mobile are likely to be far more constrained. This applies in some way to websites as well, but developers have found interesting ways to adapt to the mobile experience, not in the least by harnessing powerful features built for flexible (a.k.a responsive) web displays such as CSS `flexbox` and CSS `grid`. + +Ready to learn about good design practices for the web? Let's get started! + +[Begin Course](https://www.freecodecamp.org/learn/responsive-web-design-qa/basic-html-and-html5/) diff --git a/client/src/pages/learn/2022/responsive-web-design-qa/learn-basic-css-by-building-a-cafe-menu-qa/index.md b/client/src/pages/learn/2022/responsive-web-design-qa/learn-basic-css-by-building-a-cafe-menu-qa/index.md new file mode 100644 index 00000000000000..8b7cc2c7e40a34 --- /dev/null +++ b/client/src/pages/learn/2022/responsive-web-design-qa/learn-basic-css-by-building-a-cafe-menu-qa/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Learn Basic CSS by Building a Cafe Menu Project QA +block: Learn Basic CSS by Building a Cafe Menu QA +superBlock: Responsive Web Design QA +--- + +## Introduction to the Learn Basic CSS by Building a Cafe Menu Project + +This is a test for the new project-based curriculum. diff --git a/client/src/pages/learn/2022/responsive-web-design-qa/learn-html-by-building-a-cat-photo-app-qa/index.md b/client/src/pages/learn/2022/responsive-web-design-qa/learn-html-by-building-a-cat-photo-app-qa/index.md new file mode 100644 index 00000000000000..039de683a18452 --- /dev/null +++ b/client/src/pages/learn/2022/responsive-web-design-qa/learn-html-by-building-a-cat-photo-app-qa/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Learn HTML by Building a Cat Photo App Project QA +block: Learn HTML by Building a Cat Photo App QA +superBlock: Responsive Web Design QA +--- + +## Introduction to the Learn HTML by Building a Cat Photo App Project + +This is a test for the new project-based curriculum. diff --git a/client/src/resources/cert-and-project-map.ts b/client/src/resources/cert-and-project-map.ts index 5944dfe0f22eff..822e2e3341caeb 100644 --- a/client/src/resources/cert-and-project-map.ts +++ b/client/src/resources/cert-and-project-map.ts @@ -6,6 +6,7 @@ const { showUpcomingChanges } = config; const responsiveWebBase = '/learn/responsive-web-design/responsive-web-design-projects'; const responsiveWeb22Base = '/learn/2022/responsive-web-design'; +const responsiveWeb22BaseQA = '/learn/2022/responsive-web-design-qa'; const jsAlgoBase = '/learn/javascript-algorithms-and-data-structures/' + 'javascript-algorithms-and-data-structures-projects'; @@ -333,6 +334,21 @@ const certMap = [ ] }, + { + id: 'aaaaaaaaaaaaaaaaaaaaaaaa', + title: 'Responsive Web Design QA', + certSlug: SuperBlocks.RespWebDesignQA, + flag: 'isRespWebDesignQACert', + projects: [ + { + id: 'bbbbbbbbbbbbbbbbbbbbbbbb', + title: 'Build a Personal Portfolio Webpage QA', + link: getResponsiveWebDesignPathQA('build-a-personal-portfolio-webpage-qa'), + certSlug: SuperBlocks.RespWebDesignQA + } + ] + }, + { id: '561abd10cb81ac38a17513bc', title: 'JavaScript Algorithms and Data Structures', @@ -720,6 +736,10 @@ function getResponsiveWebDesignPath(project: string) { return `${responsiveWeb22Base}/${project}-project/${project}`; } +function getResponsiveWebDesignPathQA(project: string) { + return `${responsiveWeb22BaseQA}/${project}-project/${project}`; +} + function getJavaScriptAlgoPath(project: string) { return showUpcomingChanges ? `${jsAlgo22Base}/${project}-project/${project}` diff --git a/client/utils/help-category-map.json b/client/utils/help-category-map.json index 2452d3146bb206..96f4eb69362d28 100644 --- a/client/utils/help-category-map.json +++ b/client/utils/help-category-map.json @@ -87,6 +87,7 @@ "learn-typography-by-building-a-nutrition-label": "HTML-CSS", "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "HTML-CSS", "build-a-personal-portfolio-webpage-project": "HTML-CSS", + "build-a-personal-portfolio-webpage-project-qa": "HTML-CSS", "build-a-product-landing-page-project": "HTML-CSS", "build-a-survey-form-project": "HTML-CSS", "build-a-technical-documentation-page-project": "HTML-CSS", diff --git a/config/certification-settings.ts b/config/certification-settings.ts index 2be22a5eada314..8bc66aeb3504b3 100644 --- a/config/certification-settings.ts +++ b/config/certification-settings.ts @@ -3,6 +3,7 @@ export const certTypes = { backEnd: 'isBackEndCert', dataVis: 'isDataVisCert', respWebDesign: 'isRespWebDesignCert', + respWebDesignQA: 'isRespWebDesignQACert', frontEndDevLibs: 'isFrontEndLibsCert', dataVis2018: 'is2018DataVisCert', jsAlgoDataStruct: 'isJsAlgoDataStructCert', @@ -19,6 +20,7 @@ export const certTypes = { export enum SuperBlocks { RespWebDesignNew = '2022/responsive-web-design', + RespWebDesignQA = '2022/responsive-web-design-qa', RespWebDesign = 'responsive-web-design', JsAlgoDataStruct = 'javascript-algorithms-and-data-structures', JsAlgoDataStructNew = '2022/javascript-algorithms-and-data-structures', @@ -41,6 +43,7 @@ export const certIds = { legacyInfosecQaId: '561add10cb82ac38a17213bc', legacyFullStackId: '561add10cb82ac38a17213bd', respWebDesignId: '561add10cb82ac38a17513bc', + respWebDesignQAId: 'aaaaaaaaaaaaaaaaaaaaaaaa', frontEndDevLibsId: '561acd10cb82ac38a17513bc', dataVis2018Id: '5a553ca864b52e1d8bceea14', jsAlgoDataStructId: '561abd10cb81ac38a17513bc', @@ -60,6 +63,7 @@ export const completionHours = { [certTypes.infosecQa]: 300, [certTypes.fullStack]: 1800, [certTypes.respWebDesign]: 300, + [certTypes.respWebDesignQA]: 1, [certTypes.frontEndDevLibs]: 300, [certTypes.jsAlgoDataStruct]: 300, [certTypes.dataVis2018]: 300, @@ -84,7 +88,7 @@ export const certSlugTypeMap = { // modern [SuperBlocks.RespWebDesign]: certTypes.respWebDesign, - [SuperBlocks.RespWebDesignNew]: certTypes.respWebDesign, + [SuperBlocks.RespWebDesignNew]: certTypes.respWebDesignQA, [SuperBlocks.JsAlgoDataStruct]: certTypes.jsAlgoDataStruct, [SuperBlocks.JsAlgoDataStructNew]: certTypes.jsAlgoDataStruct, [SuperBlocks.FrontEndDevLibs]: certTypes.frontEndDevLibs, @@ -122,6 +126,7 @@ export const superBlockCertTypeMap = { // post-modern // TODO: use enum [SuperBlocks.RespWebDesignNew]: certTypes.respWebDesign, + [SuperBlocks.RespWebDesignQA]: certTypes.respWebDesignQA, [SuperBlocks.JsAlgoDataStructNew]: certTypes.jsAlgoDataStruct }; @@ -132,6 +137,7 @@ export const certTypeIdMap = { [certTypes.infosecQa]: certIds.legacyInfosecQaId, [certTypes.fullStack]: certIds.legacyFullStackId, [certTypes.respWebDesign]: certIds.respWebDesignId, + [certTypes.respWebDesignQA]: certIds.respWebDesignQAId, [certTypes.frontEndDevLibs]: certIds.frontEndDevLibsId, [certTypes.jsAlgoDataStruct]: certIds.jsAlgoDataStructId, [certTypes.dataVis2018]: certIds.dataVis2018Id, @@ -151,6 +157,7 @@ export const certTypeTitleMap = { [certTypes.infosecQa]: 'Legacy Information Security and Quality Assurance', [certTypes.fullStack]: 'Legacy Full Stack', [certTypes.respWebDesign]: 'Responsive Web Design', + [certTypes.respWebDesignQA]: 'Responsive Web Design QA', [certTypes.frontEndDevLibs]: 'Front End Development Libraries', [certTypes.jsAlgoDataStruct]: 'JavaScript Algorithms and Data Structures', [certTypes.dataVis2018]: 'Data Visualization', diff --git a/curriculum-server/source-curriculum.ts b/curriculum-server/source-curriculum.ts index 0fe2400cdf00b6..0912ad62f8e965 100644 --- a/curriculum-server/source-curriculum.ts +++ b/curriculum-server/source-curriculum.ts @@ -6,17 +6,21 @@ interface Curriculum { [key: string]: unknown; } -const curriculumList = Object.keys(curriculum as Curriculum).map(key => { +const curriculumList: Array = Object.keys(curriculum as Curriculum) +.map(key => { if (key === '2022/responsive-web-design') { return { '2022-responsive-web-design': (curriculum as Curriculum)[key] }; + } else if (key === '2022/responsive-web-design-qa') { + return { '2022-responsive-web-design-qa': (curriculum as Curriculum)[key] }; } else { return { [key]: (curriculum as Curriculum)[key] }; } }); -const patchedCurriculum = curriculumList.reduce((prev, curr) => { - return { ...prev, ...curr }; -}, {}); +const patchedCurriculum = curriculumList + .reduce((prev, curr) => { + return { ...prev, ...curr }; + }, {}); void fs .mkdir('data', { recursive: true }) diff --git a/curriculum/challenges/_meta/build-a-personal-portfolio-webpage-project-qa/meta.json b/curriculum/challenges/_meta/build-a-personal-portfolio-webpage-project-qa/meta.json new file mode 100644 index 00000000000000..eb36fb62ab9256 --- /dev/null +++ b/curriculum/challenges/_meta/build-a-personal-portfolio-webpage-project-qa/meta.json @@ -0,0 +1,15 @@ +{ + "name": "Build a Personal Portfolio Webpage Project QA", + "isUpcomingChange": false, + "usesMultifileEditor": true, + "order": 19, + "time": "30 hours", + "template": "", + "required": [], + "superBlock": "2022/responsive-web-design-qa", + "challengeOrder": [ + [ + "bbbbbbbbbbbbbbbbbbbbbbbb", + "Build a Personal Portfolio Webpage QA" + ] + ]} diff --git a/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu-qa/meta.json b/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu-qa/meta.json new file mode 100644 index 00000000000000..7a4cb4074684f7 --- /dev/null +++ b/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu-qa/meta.json @@ -0,0 +1,21 @@ +{ + "name": "Learn Basic CSS by Building a Cafe Menu QA", + "isUpcomingChange": false, + "usesMultifileEditor": true, + "hasEditableBoundaries": true, + "dashedName": "learn-basic-css-by-building-a-cafe-menu-qa", + "order": 1, + "time": "5 hours", + "template": "", + "required": [], + "superBlock": "2022/responsive-web-design-qa", + "challengeOrder": [ + [ + "eeeeeeeeeeeeeeeeeeeeeeee", + "Step 1" + ], + [ + "ffffffffffffffffffffffff", + "Step 2" + ] + ]} diff --git a/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json b/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json index ec6643b1983887..2950df77db6d6e 100644 --- a/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json +++ b/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json @@ -17,5 +17,365 @@ [ "5f3313e74582ad9d063e3a38", "Step 2" + ], + [ + "5f331e55dfab7a896e53c3a1", + "Step 3" + ], + [ + "5f3326b143638ee1a09ff1e3", + "Step 4" + ], + [ + "5f33294a6af5e9188dbdb8f3", + "Step 5" + ], + [ + "5f332a88dc25a0fd25c7687a", + "Step 6" + ], + [ + "5f332b23c2045fb843337579", + "Step 7" + ], + [ + "5f33310c1851c6c4da013250", + "Step 8" + ], + [ + "5f344fc1520b6719f2e35605", + "Step 9" + ], + [ + "5f344fbc22624a2976425065", + "Step 10" + ], + [ + "5f344fad8bf01691e71a30eb", + "Step 11" + ], + [ + "5f344f9c805cd193c33d829c", + "Step 12" + ], + [ + "5f3477ae9675db8bb7655b30", + "Step 13" + ], + [ + "5f3477ae34c1239cafe128be", + "Step 14" + ], + [ + "5f3477aefa51bfc29327200b", + "Step 15" + ], + [ + "5f3477ae8466a9a3d2cc953c", + "Step 16" + ], + [ + "5f3477cb2e27333b1ab2b955", + "Step 17" + ], + [ + "5f3477cbcb6ba47918c1da92", + "Step 18" + ], + [ + "5f3477cb303c5cb61b43aa9b", + "Step 19" + ], + [ + "5f34a1fd611d003edeafd681", + "Step 20" + ], + [ + "5f356ed6cf6eab5f15f5cfe6", + "Step 21" + ], + [ + "5f356ed63c7807a4f1e6d054", + "Step 22" + ], + [ + "5f356ed60a5decd94ab66986", + "Step 23" + ], + [ + "5f356ed63e0fa262326eef05", + "Step 24" + ], + [ + "5f356ed60785e1f3e9850b6e", + "Step 25" + ], + [ + "5f356ed656a336993abd9f7c", + "Step 26" + ], + [ + "5f356ed6199b0cdef1d2be8f", + "Step 27" + ], + [ + "5f356ed69db0a491745e2bb6", + "Step 28" + ], + [ + "5f35e5c44359872a137bd98f", + "Step 29" + ], + [ + "5f35e5c4321f818cdc4bed30", + "Step 30" + ], + [ + "5f3c866daec9a49519871816", + "Step 31" + ], + [ + "5f3c866d5414453fc2d7b480", + "Step 32" + ], + [ + "5f3c866d28d7ad0de6470505", + "Step 33" + ], + [ + "5f769541be494f25449b292f", + "Step 34" + ], + [ + "5f76967fad478126d6552b0d", + "Step 35" + ], + [ + "5f769702e6e33127d14aa120", + "Step 36" + ], + [ + "5f3c866de7a5b784048f94b1", + "Step 37" + ], + [ + "5f3c866dbf362f99b9a0c6d0", + "Step 38" + ], + [ + "5f3c866d0fc037f7311b4ac8", + "Step 39" + ], + [ + "5f3c866dd0d0275f01d4d847", + "Step 40" + ], + [ + "5f3cade9fa77275d9f4efe62", + "Step 41" + ], + [ + "5f3cade94c6576e7f7b7953f", + "Step 42" + ], + [ + "5f3cade9993019e26313fa8e", + "Step 43" + ], + [ + "5f7691dafd882520797cd2f0", + "Step 44" + ], + [ + "5f7692f7c5b3ce22a57788b6", + "Step 45" + ], + [ + "5f47633757ae3469f2d33d2e", + "Step 46" + ], + [ + "5f3cade99dda4e6071a85dfd", + "Step 47" + ], + [ + "5f3ef6e0e0c3feaebcf647ad", + "Step 48" + ], + [ + "5f3ef6e0819d4f23ca7285e6", + "Step 49" + ], + [ + "5f716ad029ee4053c7027a7a", + "Step 50" + ], + [ + "5f7b87422a560036fd03ccff", + "Step 51" + ], + [ + "5f7b88d37b1f98386f04edc0", + "Step 52" + ], + [ + "5f716bee5838c354c728a7c5", + "Step 53" + ], + [ + "5f3ef6e0eaa7da26e3d34d78", + "Step 54" + ], + [ + "5f3ef6e050279c7a4a7101d3", + "Step 55" + ], + [ + "5f3ef6e04559b939080db057", + "Step 56" + ], + [ + "5f3ef6e03d719d5ac4738993", + "Step 57" + ], + [ + "5f3ef6e05473f91f948724ab", + "Step 58" + ], + [ + "5f3ef6e056bdde6ae6892ba2", + "Step 59" + ], + [ + "5f3ef6e0e9629bad967cd71e", + "Step 60" + ], + [ + "5f3ef6e06d34faac0447fc44", + "Step 61" + ], + [ + "5f3ef6e087d56ed3ffdc36be", + "Step 62" + ], + [ + "5f3ef6e0f8c230bdd2349716", + "Step 63" + ], + [ + "5f3ef6e07276f782bb46b93d", + "Step 64" + ], + [ + "5f3ef6e0a81099d9a697b550", + "Step 65" + ], + [ + "5f3ef6e0b431cc215bb16f55", + "Step 66" + ], + [ + "5f3ef6e01f288a026d709587", + "Step 67" + ], + [ + "5f3f26fa39591db45e5cd7a0", + "Step 68" + ], + [ + "5f459225127805351a6ad057", + "Step 69" + ], + [ + "5f459a7ceb8b5c446656d88b", + "Step 70" + ], + [ + "5f459cf202c2a3472fae6a9f", + "Step 71" + ], + [ + "5f459fd48bdc98491ca6d1a3", + "Step 72" + ], + [ + "5f45a05977e2fa49d9119437", + "Step 73" + ], + [ + "5f45a276c093334f0f6e9df4", + "Step 74" + ], + [ + "5f45a5a7c49a8251f0bdb527", + "Step 75" + ], + [ + "5f46fc57528aa1c4b5ea7c2e", + "Step 76" + ], + [ + "5f4701b942c824109626c3d8", + "Step 77" + ], + [ + "5f46ede1ff8fec5ba656b44c", + "Step 78" + ], + [ + "5f45a66d4a2b0453301e5a26", + "Step 79" + ], + [ + "5f45b0731d39e15d54df4dfc", + "Step 80" + ], + [ + "5f45b25e7ec2405f166b9de1", + "Step 81" + ], + [ + "5f45b3c93c027860d9298dbd", + "Step 82" + ], + [ + "5f45b45d099f3e621fbbb256", + "Step 83" + ], + [ + "5f45b4c81cea7763550e40df", + "Step 84" + ], + [ + "5f45b715301bbf667badc04a", + "Step 85" + ], + [ + "5f46e270702a8456a664f0df", + "Step 86" + ], + [ + "5f46e36e745ead58487aabf2", + "Step 87" + ], + [ + "5f46e7a4750dd05b5a673920", + "Step 88" + ], + [ + "5f46e8284aae155c83015dee", + "Step 89" + ], + [ + "5f475bb508746c16c9431d42", + "Step 90" + ], + [ + "5f475e1c7f71a61d913836c6", + "Step 91" + ], + [ + "5f47fe7e31980053a8d4403b", + "Step 92" ] ]} diff --git a/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app-qa/meta.json b/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app-qa/meta.json new file mode 100644 index 00000000000000..64c236b9a0e8b5 --- /dev/null +++ b/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app-qa/meta.json @@ -0,0 +1,21 @@ +{ + "name": "Learn HTML by Building a Cat Photo App", + "isUpcomingChange": false, + "usesMultifileEditor": true, + "hasEditableBoundaries": true, + "dashedName": "learn-html-by-building-a-cat-photo-app-qa", + "order": 0, + "time": "5 hours", + "template": "", + "required": [], + "superBlock": "2022/responsive-web-design-qa", + "challengeOrder": [ + [ + "dddddddddddddddddddddddd", + "Step 1" + ], + [ + "cccccccccccccccccccccccc", + "Step 2" + ] + ]} diff --git a/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json b/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json index d1313627499ee5..73932dfe0b19d6 100644 --- a/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json +++ b/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json @@ -17,5 +17,265 @@ [ "5dc1798ff86c76b9248c6eb3", "Step 2" + ], + [ + "5dc17d3bf86c76b9248c6eb4", + "Step 3" + ], + [ + "5dc17dc8f86c76b9248c6eb5", + "Step 4" + ], + [ + "5dc2385ff86c76b9248c6eb7", + "Step 5" + ], + [ + "5dc23991f86c76b9248c6eb8", + "Step 6" + ], + [ + "5dc23f9bf86c76b9248c6eba", + "Step 7" + ], + [ + "5dc24073f86c76b9248c6ebb", + "Step 8" + ], + [ + "5dc24165f86c76b9248c6ebc", + "Step 9" + ], + [ + "5dc24614f86c76b9248c6ebd", + "Step 10" + ], + [ + "5ddbd81294d8ddc1510a8e56", + "Step 11" + ], + [ + "5dfa22d1b521be39a3de7be0", + "Step 12" + ], + [ + "5dfa2407b521be39a3de7be1", + "Step 13" + ], + [ + "5dfa30b9eacea3f48c6300ad", + "Step 14" + ], + [ + "5f07be6ef7412fbad0c5626b", + "Step 15" + ], + [ + "5f07c98cdb9413cbd4b16750", + "Step 16" + ], + [ + "5dfa3589eacea3f48c6300ae", + "Step 17" + ], + [ + "5dfa371beacea3f48c6300af", + "Step 18" + ], + [ + "5dfa37b9eacea3f48c6300b0", + "Step 19" + ], + [ + "5dfb5ecbeacea3f48c6300b1", + "Step 20" + ], + [ + "5dfb6250eacea3f48c6300b2", + "Step 21" + ], + [ + "5dfb655eeacea3f48c6300b3", + "Step 22" + ], + [ + "5dfb6a35eacea3f48c6300b4", + "Step 23" + ], + [ + "5ef9b03c81a63668521804d0", + "Step 24" + ], + [ + "5ef9b03c81a63668521804d1", + "Step 25" + ], + [ + "5ef9b03c81a63668521804d2", + "Step 26" + ], + [ + "5ef9b03c81a63668521804d3", + "Step 27" + ], + [ + "5efada803cbd2bbdab94e332", + "Step 28" + ], + [ + "5efae0543cbd2bbdab94e333", + "Step 29" + ], + [ + "5efae16e3cbd2bbdab94e334", + "Step 30" + ], + [ + "5ef9b03c81a63668521804d4", + "Step 31" + ], + [ + "5f07fb1579dc934717801375", + "Step 32" + ], + [ + "5ef9b03c81a63668521804d5", + "Step 33" + ], + [ + "5ef9b03c81a63668521804d6", + "Step 34" + ], + [ + "5ef9b03c81a63668521804d7", + "Step 35" + ], + [ + "5ef9b03c81a63668521804d8", + "Step 36" + ], + [ + "5efb23e70dc218d6c85f89b1", + "Step 37" + ], + [ + "7cf9b03d81a65668421804c3", + "Step 38" + ], + [ + "5ef9b03c81a63668521804d9", + "Step 39" + ], + [ + "5ef9b03c81a63668521804db", + "Step 40" + ], + [ + "5ef9b03c81a63668521804da", + "Step 41" + ], + [ + "5efb2c990dc218d6c85f89b2", + "Step 42" + ], + [ + "5ef9b03c81a63668521804dc", + "Step 43" + ], + [ + "5ef9b03c81a63668521804dd", + "Step 44" + ], + [ + "5ef9b03c81a63668521804df", + "Step 45" + ], + [ + "5f05a1d8e233dff4a68508d8", + "Step 46" + ], + [ + "5ef9b03c81a63668521804de", + "Step 47" + ], + [ + "5f1a80975fc4bcae0edb3497", + "Step 48" + ], + [ + "5ef9b03c81a63668521804e1", + "Step 49" + ], + [ + "5f0d48e7b435f13ab6550051", + "Step 50" + ], + [ + "5f0d4ab1b435f13ab6550052", + "Step 51" + ], + [ + "5f0d4d04b435f13ab6550053", + "Step 52" + ], + [ + "5ef9b03c81a63668521804e2", + "Step 53" + ], + [ + "5efc54138d6a74d05e68af76", + "Step 54" + ], + [ + "5efc4f528d6a74d05e68af74", + "Step 55" + ], + [ + "5efc518e8d6a74d05e68af75", + "Step 56" + ], + [ + "5ef9b03c81a63668521804e3", + "Step 57" + ], + [ + "5efc575c8d6a74d05e68af77", + "Step 58" + ], + [ + "5f1a89f1190aff21ae42105a", + "Step 59" + ], + [ + "5ef9b03c81a63668521804e5", + "Step 60" + ], + [ + "5ef9b03c81a63668521804e7", + "Step 61" + ], + [ + "5ef9b03c81a63668521804e8", + "Step 62" + ], + [ + "5ef9b03c81a63668521804e9", + "Step 63" + ], + [ + "5ef9b03c81a63668521804ea", + "Step 64" + ], + [ + "5ef9b03c81a63668521804eb", + "Step 65" + ], + [ + "5ef9b03c81a63668521804ec", + "Step 66" + ], + [ + "5ef9b03c81a63668521804ee", + "Step 67" ] ]} diff --git a/curriculum/challenges/english/00-certifications/responsive-web-design-certification-qa/responsive-web-design-certification-qa.yml b/curriculum/challenges/english/00-certifications/responsive-web-design-certification-qa/responsive-web-design-certification-qa.yml new file mode 100644 index 00000000000000..8ee51180c9e07c --- /dev/null +++ b/curriculum/challenges/english/00-certifications/responsive-web-design-certification-qa/responsive-web-design-certification-qa.yml @@ -0,0 +1,8 @@ +id: aaaaaaaaaaaaaaaaaaaaaaaa +title: Responsive Web Design Certification QA +certification: responsive-web-design-qa +challengeType: 7 +isPrivate: true +tests: + - id: bbbbbbbbbbbbbbbbbbbbbbbb + title: Build a Personal Portfolio Webpage QA diff --git a/curriculum/challenges/english/14-responsive-web-design-22-qa/build-a-personal-portfolio-webpage-project-qa/build-a-personal-portfolio-webpage-qa.md b/curriculum/challenges/english/14-responsive-web-design-22-qa/build-a-personal-portfolio-webpage-project-qa/build-a-personal-portfolio-webpage-qa.md new file mode 100644 index 00000000000000..dc1ffefdf13cdb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22-qa/build-a-personal-portfolio-webpage-project-qa/build-a-personal-portfolio-webpage-qa.md @@ -0,0 +1,281 @@ +--- +id: bbbbbbbbbbbbbbbbbbbbbbbb +title: Build a Personal Portfolio Webpage QA +challengeType: 14 +forumTopicId: 301143 +dashedName: build-a-personal-portfolio-webpage-qa +--- + +# --description-- + +**Objective:** Build an app that is functionally similar to https://personal-portfolio.freecodecamp.rocks + +**User Stories:** + +1. Your portfolio should have a welcome section with an `id` of `welcome-section` +1. The welcome section should have an `h1` element that contains text +1. Your portfolio should have a projects section with an `id` of `projects` +1. The projects section should contain at least one element with a `class` of `project-tile` to hold a project +1. The projects section should contain at least one link to a project +1. Your portfolio should have a navbar with an id of `navbar` +1. The navbar should contain at least one link that you can click on to navigate to different sections of the page +1. Your portfolio should have a link with an id of `profile-link`, which opens your GitHub or freeCodeCamp profile in a new tab +1. Your portfolio should have at least one media query +1. The height of the welcome section should be equal to the height of the viewport +1. The navbar should always be at the top of the viewport + +Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! + +**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS + +# --hints-- + +Your portfolio should have a "Welcome" section with an `id` of `welcome-section`. + +```js +const el = document.getElementById('welcome-section') +assert(!!el); +``` + +Your `#welcome-section` element should contain an `h1` element. + +```js +assert.isAbove( + document.querySelectorAll('#welcome-section h1').length, + 0, + 'Welcome section should contain an h1 element ' +); +``` + +You should not have any empty `h1` elements within `#welcome-section` element. + +```js +assert.isAbove( + document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, + 0, + 'h1 element in welcome section should contain your name or camper ' + + 'name ' +); +``` + +You should have a "Projects" section with an `id` of `projects`. + +```js +const el = document.getElementById('projects') +assert(!!el); +``` + +Your portfolio should contain at least one element with a class of `project-tile`. + +```js +assert.isAbove( + document.querySelectorAll('#projects .project-tile').length, + 0 +); +``` + +Your `#projects` element should contain at least one `a` element. + +```js +assert.isAbove(document.querySelectorAll('#projects a').length, 0); +``` + +Your portfolio should have a navbar with an `id` of `navbar`. + +```js +const el = document.getElementById('navbar'); +assert(!!el); +``` + +Your `#navbar` element should contain at least one `a` element whose `href` attribute starts with `#`. + +```js +const links = [...document.querySelectorAll('#navbar a')].filter( + (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#' +); + +assert.isAbove( + links.length, + 0, + 'Navbar should contain an anchor link ' +); +``` + +Your portfolio should have an `a` element with an `id` of `profile-link`. + +```js +const el = document.getElementById('profile-link'); +assert(!!el && el.tagName === 'A') +``` + +Your `#profile-link` element should have a `target` attribute of `_blank`. + +```js +const el = document.getElementById('profile-link'); +assert(!!el && el.target === '_blank') +``` + +Your portfolio should use at least one media query. + +```js +const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) +const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') +assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); +``` + +Your `#navbar` element should always be at the top of the viewport. + +```js +(async () => { + const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); + + const navbar = document.getElementById('navbar'); + assert.approximately( + navbar?.getBoundingClientRect().top, + 0, + 15, + "Navbar's parent should be body and it should be at the top of " + + 'the viewport ' + ); + + window.scroll(0, 500); + + await timeout(1); + + assert.approximately( + navbar?.getBoundingClientRect().top, + 0, + 15, + 'Navbar should be at the top of the viewport even after ' + + 'scrolling ' + ); + window.scroll(0, 0); +})(); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Personal Portfolio + + + + + +
+
+
+

It's me!

+ +

Naomi Carrigan

+

Welcome to my portfolio page!

+
+
+

Projects

+

Here's what I've worked on!

+

+ + + + +

+
+

Contact me!

+

Use the links below to get in touch.

+

FreeCodeCamp.org | GitHub | Facebook | LinkedIn +

+ + + +``` + +```css +nav{ + position: fixed; + width: 100%; + text-align: right; + font-size: 24pt; + top: 0%; + right: 5px; + background-color: #000000; + color: #ffffff; +} +@media (max-width: 500px){ + nav{ + display: none; + } +} +a{ + color: #ffffff; +} +main{ + text-align: center; + background-color: black; + font-family:Pacifico +} +h1{ + font-size: 48pt; +} +h2{ + font-size: 24pt; +} +p{ + font-size: 12pt; +} +#welcome-section{ + background-color:#251a4a; + color: #FFFFFF; + display: table-cell; + vertical-align: middle; + width: 100vw; + height: 100vh; +} +#projects{ + background-color: #060a9c; + color: #ffffff; + display: table-cell; + vertical-align: middle; + width: 100vw; + height: 100vh; +} +#contact{ + background-color: #03300b; + color: #ffffff; + display: table-cell; + vertical-align: middle; + width: 100vw; + height: 100vh; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/cccccccccccccccccccccccc.md b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/cccccccccccccccccccccccc.md new file mode 100644 index 00000000000000..fb488b6b057255 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/cccccccccccccccccccccccc.md @@ -0,0 +1,61 @@ +--- +id: cccccccccccccccccccccccc +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Add a `head` element within the `html` element, so you can add a `title` element. The `title` element's text should be `Cafe Menu`. + +# --hints-- + +You should have an opening `` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `` tag. + +```js +assert(code.match(//i)); +``` + +You should have an opening `` tag. + +```js +assert(code.match(/<title>/i)); +``` + +You should have a closing `` tag. + +```js +assert(code.match(/<\/title>/i)); +``` + +Your `title` element should be nested in your `head` element. + +```js +assert(code.match(/\s*.*<\/title>\s*<\/head>/si)); +``` + +Your `title` element should have the text `Cafe Menu`. You may need to check your spelling. + +```js +assert.match(document.querySelector('title')?.innerText, /Cafe Menu/i); +``` + +# --seed-- + +## --seed-contents-- + +```html +<!DOCTYPE html> +<html> +--fcc-editable-region-- + +--fcc-editable-region-- +</html> +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/dddddddddddddddddddddddd.md b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/dddddddddddddddddddddddd.md new file mode 100644 index 00000000000000..54351638415f65 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/dddddddddddddddddddddddd.md @@ -0,0 +1,43 @@ +--- +id: dddddddddddddddddddddddd +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +As you learned in the last few steps of the Cat Photo App, there is a basic structure needed to start building your web page. + +Add the `<!DOCTYPE html>` tag, and an `html` element. + +# --hints-- + +You should have the `DOCTYPE` declaration. + +```js +assert(code.match(/<!DOCTYPE html>/i)); +``` + +You should have an opening `<html>` tag. + +```js +assert(code.match(/<html>/i)); +``` + +You should have a closing `<html>` tag. Remember that closing tags have a `/` following the opening `<` bracket. + +```js +assert(code.match(/<\/html>/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/eeeeeeeeeeeeeeeeeeeeeeee.md b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/eeeeeeeeeeeeeeeeeeeeeeee.md new file mode 100644 index 00000000000000..2606083c51fbae --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/eeeeeeeeeeeeeeeeeeeeeeee.md @@ -0,0 +1,58 @@ +--- +id: eeeeeeeeeeeeeeeeeeeeeeee +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +HTML elements have opening tags like `<h1>` and closing tags like `</h1>`. + +Find the `h1` element and change the text between its opening and closing tags to say `CatPhotoApp`. + +# --hints-- + +The text `CatPhotoApp` should be present in the code. You may want to check your spelling. + +```js +assert(code.match(/catphotoapp/i)); +``` + +Your `h1` element should have an opening tag. Opening tags have this syntax: `<elementName>`. + +```js +assert(document.querySelector('h1')); +``` + +Your `h1` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/h1\>/)); +``` + +You have more than one `h1` element. Remove the extra `h1` element. + +```js +assert(document.querySelectorAll('h1').length === 1); +``` + +Your `h1` element's text should be `CatPhotoApp`. You have either omitted the text, have a typo, or it is not between the `h1` element's opening and closing tags. + +```js +assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp'); +``` + +# --seed-- + +## --seed-contents-- + +```html +<html> + <body> +--fcc-editable-region-- + <h1>Hello World</h1> +--fcc-editable-region-- + </body> +</html> +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/ffffffffffffffffffffffff.md b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/ffffffffffffffffffffffff.md new file mode 100644 index 00000000000000..b2451315d216f8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/ffffffffffffffffffffffff.md @@ -0,0 +1,82 @@ +--- +id: ffffffffffffffffffffffff +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +The `h1` to `h6` heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so `h2` elements have less importance than `h1` elements. Only use one `h1` element per page and place lower importance headings below higher importance headings. + +Add an `h2` element below the `h1` element that says `Cat Photos`. + +# --hints-- + +Your `h1` element should have an opening tag. Opening tags have this syntax: `<elementName>`. + +```js +assert(document.querySelector('h1')); +``` + +Your `h1` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/h1\>/)); +``` + +You should only have one `h1` element. Remove the extra. + +```js +assert( + document.querySelector('h1') && document.querySelectorAll('h1').length === 1 +); +``` + +Your `h1` element's text should be 'CatPhotoApp'. You have either omitted the text or have a typo. + +```js +assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp'); +``` + +Your `h2` element should have an opening tag. Opening tags have this syntax: `<elementName>`. + +```js +assert(document.querySelector('h2')); +``` + +Your `h2` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/h2\>/)); +``` + +Your `h2` element's text should be 'Cat Photos'. Only place the text `Cat Photos` between the opening and closing `h2` tags. + +```js +assert(document.querySelector('h2').innerText.toLowerCase() === 'cat photos'); +``` + +Your `h2` element should be below the `h1` element. The `h1` element has greater importance and must be above the `h2` element. + +```js +const collection = [...document.querySelectorAll('h1,h2')].map( + (node) => node.nodeName +); +assert(collection.indexOf('H1') < collection.indexOf('H2')); +``` + +# --seed-- + +## --seed-contents-- + +```html +<html> + <body> +--fcc-editable-region-- + <h1>CatPhotoApp</h1> +--fcc-editable-region-- + </body> +</html> +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md new file mode 100644 index 00000000000000..381b65bbc3e28c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md @@ -0,0 +1,436 @@ +--- +id: 587d78af367417b2b2512b04 +title: Build a Product Landing Page +challengeType: 14 +forumTopicId: 301144 +dashedName: build-a-product-landing-page +--- + +# --description-- + +**Objective:** Build an app that is functionally similar to <a href="https://product-landing-page.freecodecamp.rocks" target="_blank">https://product-landing-page.freecodecamp.rocks</a> + +**User Stories:** + +1. Your product landing page should have a `header` element with a corresponding `id="header"` +1. You can see an image within the `header` element with a corresponding `id="header-img"` (A logo would make a good image here) +1. Within the `#header` element, you can see a `nav` element with a corresponding `id="nav-bar"` +1. You can see at least three clickable elements inside the `nav` element, each with the class `nav-link` +1. When you click a `.nav-link` button in the `nav` element, you are taken to the corresponding section of the landing page +1. You can watch an embedded product video with `id="video"` +1. Your landing page has a `form` element with a corresponding `id="form"` +1. Within the form, there is an `input` field with `id="email"` where you can enter an email address +1. The `#email` input field should have placeholder text to let users know what the field is for +1. The `#email` input field uses HTML5 validation to confirm that the entered text is an email address +1. Within the form, there is a submit `input` with a corresponding `id="submit"` +1. When you click the `#submit` element, the email is submitted to a static page (use this mock URL: `https://www.freecodecamp.com/email-submit`) +1. The navbar should always be at the top of the viewport +1. Your product landing page should have at least one media query +1. Your product landing page should utilize CSS flexbox at least once + +Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! + +**Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet and apply your CSS + +# --hints-- + +You should have a `header` element with an `id` of `header`. + +```js +const el = document.getElementById('header') +assert(!!el && el.tagName === 'HEADER') +``` + +You should have an `img` element with an `id` of `header-img`. + +```js +const el = document.getElementById('header-img') +assert(!!el && el.tagName === 'IMG') +``` + +Your `#header-img` should be a descendant of the `#header`. + +```js +const els = document.querySelectorAll('#header #header-img') +assert(els.length > 0) +``` + +Your `#header-img` should have a `src` attribute. + +```js +const el = document.getElementById('header-img') +assert(!!el && !!el.src) +``` + +Your `#header-img`’s `src` value should be a valid URL (starts with `http`). + +```js +const el = document.getElementById('header-img') +assert(!!el && /^http/.test(el.src)) +``` + +You should have a `nav` element with an `id` of `nav-bar`. + +```js +const el = document.getElementById('nav-bar') +assert(!!el && el.tagName === 'NAV') +``` + +Your `#nav-bar` should be a descendant of the `#header`. + +```js +const els = document.querySelectorAll('#header #nav-bar') +assert(els.length > 0) +``` + +You should have at least 3 `.nav-link` elements within the `#nav-bar`. + +```js +const els = document.querySelectorAll('#nav-bar .nav-link') +assert(els.length >= 3) +``` + +Each `.nav-link` element should have an `href` attribute. + +```js +const els = document.querySelectorAll('.nav-link') +els.forEach(el => { + if (!el.href) assert(false) +}) +assert(els.length > 0) +``` + +Each `.nav-link` element should link to a corresponding element on the landing page (has an `href` with a value of another element's id. e.g. `#footer`). + +```js +const els = document.querySelectorAll('.nav-link') +els.forEach(el => { + const linkDestination = el.getAttribute('href').slice(1) + if (!document.getElementById(linkDestination)) assert(false) +}) +assert(els.length > 0) +``` + +You should have a `video` or `iframe` element with an `id` of `video`. + +```js +const el = document.getElementById('video') +assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) +``` + +Your `#video` should have a `src` attribute. + +```js +let el = document.getElementById('video') +const sourceNode = el.children; +let sourceElement = null; +if (sourceNode.length) { + sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; +} +if (sourceElement) { + el = sourceElement; +} +assert(el.hasAttribute('src')); +``` + +You should have a `form` element with an `id` of `form`. + +```js +const el = document.getElementById('form') +assert(!!el && el.tagName === 'FORM') +``` + +You should have an `input` element with an `id` of `email`. + +```js +const el = document.getElementById('email') +assert(!!el && el.tagName === 'INPUT') +``` + +Your `#email` should be a descendant of the `#form`. + +```js +const els = document.querySelectorAll('#form #email') +assert(els.length > 0) +``` + +Your `#email` should have the `placeholder` attribute with placeholder text. + +```js +const el = document.getElementById('email') +assert(!!el && !!el.placeholder && el.placeholder.length > 0) +``` + +Your `#email` should use HTML5 validation by setting its `type` to `email`. + +```js +const el = document.getElementById('email') +assert(!!el && el.type === 'email') +``` + +You should have an `input` element with an `id` of `submit`. + +```js +const el = document.getElementById('submit') +assert(!!el && el.tagName === 'INPUT') +``` + +Your `#submit` should be a descendant of the `#form`. + +```js +const els = document.querySelectorAll('#form #submit') +assert(els.length > 0) +``` + +Your `#submit` should have a `type` of `submit`. + +```js +const el = document.getElementById('submit') +assert(!!el && el.type === 'submit') +``` + +Your `#form` should have an `action` attribute of `https://www.freecodecamp.com/email-submit`. + +```js +const el = document.getElementById('form') +assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') +``` + +Your `#email` should have a `name` attribute of `email`. + +```js +const el = document.getElementById('email') +assert(!!el && el.name === 'email') +``` + +Your `#nav-bar` should always be at the top of the viewport. + +```js +const el = document.getElementById('nav-bar') +const top1 = el?.offsetTop +const top2 = el?.offsetTop +assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15) +``` + +Your Product Landing Page should use at least one media query. + +```js +const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) +const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') +assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); +``` + +Your Product Landing Page should use CSS Flexbox at least once. + +```js +const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() +const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) +const usesFlex = cssRules.find(rule => { + return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex' +}) +assert(usesFlex) +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +```css + +``` + +## --solutions-- + +```html +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <link rel="stylesheet" type="text/css" href="styles.css" /> + <title>Product Landing Page + + + +
+

+ Pokemon Daycare Service +

+
+

What we offer

+
+
+ +
+
Guaranteed friendly and loving staff!
+
+
+
+ +
+
+ Comfortable environment for Pokemon to explore and play! +
+
+
+
+ +
+
+ Multiple membership plans to fit your lifestyle! +
+
+
+
+

Check us out!

+ A sneak peek into our facility: +
+ +
+
+

Membership Plans

+
+
+ Basic Membership
+
    +
  • One Pokemon
    • +
  • Food and berries provided
    • +
+ $9.99/month +
+
+ Silver Membership
+
    +
  • Up to Three Pokemon
    • +
  • Food and berries provided
    • +
  • Grooming and accessories included
    • +
+ $19.99/month +
+
+ Gold Membership
+
    +
  • Up to six Pokemon!
    • +
  • Food and berries provided
    • +
  • Grooming and accessories included
    • +
  • Personal training for each Pokemon
    • +
  • Breeding and egg hatching
    • +
+ $29.99/month +
+
+
+
+

Sign up for our newsletter!

+ + +
+ +
+ + +``` + +```css +body { + background-color: #3a3240; + color: white; +} +main { + max-width: 750px; + margin: 50px auto; +} +input { + background-color: #92869c; +} +a:not(.nav-link) { + color: white; +} +#header-img { + max-height: 25px; +} +#nav-bar { + position: fixed; + width: 100%; + text-align: center; + top: 0%; + background-color: #92869c; +} +h1 { + text-align: center; +} +body { + text-align: center; +} +footer { + text-align: center; +} +#bullet { + max-height: 25px; +} +.flex-here { + display: flex; + justify-content: center; +} +.flex-left { + height: 25px; +} +.flex-mem { + display: flex; + justify-content: center; +} +.flex-mem-box { + background-color: #92869c; + border-color: black; + border-width: 5px; + border-style: solid; + margin: 10px; + padding: 10px; + color: black; +} +@media (max-width: 350px) { + #video { + width: 300; + height: 200; + } +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md new file mode 100644 index 00000000000000..b079753f111634 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md @@ -0,0 +1,518 @@ +--- +id: 587d78af367417b2b2512b03 +title: Build a Survey Form +challengeType: 14 +forumTopicId: 301145 +dashedName: build-a-survey-form +--- + +# --description-- + +**Objective:** Build an app that is functionally similar to https://survey-form.freecodecamp.rocks + +**User Stories:** + +1. You should have a page title in an `h1` element with an `id` of `title` +1. You should have a short explanation in a `p` element with an `id` of `description` +1. You should have a `form` element with an `id` of `survey-form` +1. Inside the form element, you are **required** to enter your name in an `input` field that has an `id` of `name` and a `type` of `text` +1. Inside the form element, you are **required** to enter your email in an `input` field that has an `id` of `email` +1. If you enter an email that is not formatted correctly, you will see an HTML5 validation error +1. Inside the form, you can enter a number in an `input` field that has an `id` of `number` +1. If you enter non-numbers in the number input, you will see an HTML5 validation error +1. If you enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, you will see an HTML5 validation error +1. For the name, email, and number input fields, you can see corresponding `label` elements in the form, that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"` +1. For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field +1. Inside the form element, you should have a `select` dropdown element with an `id` of `dropdown` and at least two options to choose from +1. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the `name` attribute +1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a `value` attribute +1. Inside the form element, you are presented with a `textarea` for additional comments +1. Inside the form element, you are presented with a button with `id` of `submit` to submit all the inputs + +Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! + +**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS + +# --hints-- + +You should have an `h1` element with an `id` of `title`. + +```js +const el = document.getElementById('title') +assert(!!el && el.tagName === 'H1') +``` + +Your `#title` should not be empty. + +```js +const el = document.getElementById('title') +assert(!!el && el.innerText.length > 0) +``` + +You should have a `p` element with an `id` of `description`. + +```js +const el = document.getElementById('description') +assert(!!el && el.tagName === 'P') +``` + +Your `#description` should not be empty. + +```js +const el = document.getElementById('description') +assert(!!el && el.innerText.length > 0) +``` + +You should have a `form` element with an `id` of `survey-form`. + +```js +const el = document.getElementById('survey-form') +assert(!!el && el.tagName === 'FORM') +``` + +You should have an `input` element with an `id` of `name`. + +```js +const el = document.getElementById('name') +assert(!!el && el.tagName === 'INPUT') +``` + +Your `#name` should have a `type` of `text`. + +```js +const el = document.getElementById('name') +assert(!!el && el.type === 'text') +``` + +Your `#name` should require input. + +```js +const el = document.getElementById('name') +assert(!!el && el.required) +``` + +Your `#name` should be a descedant of `#survey-form`. + +```js +const el = document.querySelector('#survey-form #name') +assert(!!el) +``` + +You should have an `input` element with an `id` of `email`. + +```js +const el = document.getElementById('email') +assert(!!el && el.tagName === 'INPUT') +``` + +Your `#email` should have a `type` of `email`. + +```js +const el = document.getElementById('email') +assert(!!el && el.type === 'email') +``` + +Your `#email` should require input. + +```js +const el = document.getElementById('email') +assert(!!el && el.required) +``` + +Your `#email` should be a descedant of `#survey-form` + +```js +const el = document.querySelector('#survey-form #email') +assert(!!el) +``` + +You should have an `input` element with an `id` of `number`. + +```js +const el = document.getElementById('number') +assert(!!el && el.tagName === 'INPUT') +``` + +Your `#number` should be a descedant of `#survey-form`. + +```js +const el = document.querySelector('#survey-form #number') +assert(!!el) +``` + +Your `#number` should have a `type` of `number`. + +```js +const el = document.getElementById('number') +assert(!!el && el.type === 'number') +``` + +Your `#number` should have a `min` attribute with a numeric value. + +```js +const el = document.getElementById('number') +assert(!!el && el.min && isFinite(el.min)) +``` + +Your `#number` should have a `max` attribute with a numeric value. + +```js +const el = document.getElementById('number') +assert(!!el && el.max && isFinite(el.max)) +``` + +You should have a `label` element with an `id` of `name-label`. + +```js +const el = document.getElementById('name-label') +assert(!!el && el.tagName === 'LABEL') +``` + +You should have a `label` element with an `id` of `email-label`. + +```js +const el = document.getElementById('email-label') +assert(!!el && el.tagName === 'LABEL') +``` + +You should have a `label` element with an `id` of `number-label`. + +```js +const el = document.getElementById('number-label') +assert(!!el && el.tagName === 'LABEL') +``` + +Your `#name-label` should not be empty. + +```js +const el = document.getElementById('name-label') +assert(!!el && el.innerText.length > 0) +``` + +Your `#email-label` should not be empty. + +```js +const el = document.getElementById('email-label') +assert(!!el && el.innerText.length > 0) +``` + +Your `#number-label` should not be empty. + +```js +const el = document.getElementById('number-label') +assert(!!el && el.innerText.length > 0) +``` + +Your `#name-label` should be a descedant of `#survey-form`. + +```js +const el = document.querySelector('#survey-form #name-label') +assert(!!el) +``` + +Your `#email-label` should be a descedant of `#survey-form`. + +```js +const el = document.querySelector('#survey-form #email-label') +assert(!!el) +``` + +Your `#number-label` should be a descedant of `#survey-form`. + +```js +const el = document.querySelector('#survey-form #number-label') +assert(!!el) +``` + +Your `#name` should have a `placeholder` attribute and value. + +```js +const el = document.getElementById('name') +assert(!!el && !!el.placeholder && el.placeholder.length > 0) +``` + +Your `#email` should have a `placeholder` attribute and value. + +```js +const el = document.getElementById('email') +assert(!!el && !!el.placeholder && el.placeholder.length > 0) +``` + +Your `#number` should have a `placeholder` attribute and value. + +```js +const el = document.getElementById('number') +assert(!!el && !!el.placeholder && el.placeholder.length > 0) +``` + +You should have a `select` field with an `id` of `dropdown`. + +```js +const el = document.getElementById('dropdown') +assert(!!el && el.tagName === 'SELECT') +``` + +Your `#dropdown` should have at least two selectable (not disabled) `option` elements. + +```js +const els = document.querySelectorAll('#dropdown option:not([disabled])') +assert(els.length >= 2) +``` + +Your `#dropdown` should be a descendant of `#survey-form`. + +```js +const el = document.querySelector('#survey-form #dropdown') +assert(!!el) +``` + +You should have at least two `input` elements with a `type` of `radio` (radio buttons). + +```js +const els = document.querySelectorAll('input[type="radio"]') +assert(els.length >= 2) +``` + +You should have at least two radio buttons that are descendants of `#survey-form`. + +```js +const els = document.querySelectorAll('#survey-form input[type="radio"]') +assert(els.length >= 2) +``` + +All your radio buttons should have a `value` attribute and value. + +```js +const els1 = document.querySelectorAll('input[type="radio"]') +const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') +assert(els1.length > 0 && els2.length === 0) +``` + +All your radio buttons should have a `name` attribute and value. + +```js +const els1 = document.querySelectorAll('input[type="radio"]') +const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') +assert(els1.length > 0 && els2.length === 0) +``` + +Every radio button group should have at least 2 radio buttons. + +```js +const radioButtons = document.querySelectorAll('input[type="radio"]'); +const groups = {} + +if (radioButtons) { + radioButtons.forEach(el => { + if (!groups[el.name]) groups[el.name] = [] + groups[el.name].push(el) + }) +} + +const groupKeys = Object.keys(groups) + +groupKeys.forEach(key => { + if (groups[key].length < 2) assert(false) +}) + +assert(groupKeys.length > 0) +``` + +You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`. + +```js +const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); +assert(els.length >= 2) +``` + +All your checkboxes inside `#survey-form` should have a `value` attribute and value. + +```js +const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') +const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') +assert(els1.length > 0 && els2.length === 0) +``` + +You should have at least one `textarea` element that is a descendant of `#survey-form`. + +```js +const el = document.querySelector('#survey-form textarea') +assert(!!el) +``` + +You should have an `input` or `button` element with an `id` of `submit`. + +```js +const el = document.getElementById('submit') +assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) +``` + +Your `#submit` should have a `type` of `submit`. + +```js +const el = document.getElementById('submit') +assert(!!el && el.type === 'submit') +``` + +Your `#submit` should be a descendant of `#survey-form`. + +```js +const el = document.querySelector('#survey-form #submit') +assert(!!el) +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Survey Form + + +

Survey Form

+

The card below was built as a sample survey form for freeCodeCamp.

+
+

Join the Togepi Fan Club!

+

+ Enter your information here to receive updates about club activities, + our monthly newsletter, and other email communications. +

+
+ + + + +

Who is your favourite Pokemon?

+ + + +

Which communications do you want to receive?

+ + + +

Any other information you would like to share?

+ +

+ Please note: This form is a proof of concept. Submitting the form + will not actually transmit your data. +

+ +
+
+ + + +``` + +```css +main { + text-align: center; + background-color: #92869c; + background-blend-mode: lighten; + max-width: 500px; + margin: 20px auto; + border-radius: 50px; + box-shadow: 10px 10px rgba(0, 0, 0, 0.5); + color: black; +} +body { + text-align: center; + background: #3a3240; + color: white; +} +input, textarea, select, button { + background: #3a3240; + color: white; +} +a { + color: white; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md new file mode 100644 index 00000000000000..def1dfbf48bf84 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md @@ -0,0 +1,529 @@ +--- +id: 587d78b0367417b2b2512b05 +title: Build a Technical Documentation Page +challengeType: 14 +forumTopicId: 301146 +dashedName: build-a-technical-documentation-page +--- + +# --description-- + +**Objective:** Build an app that is functionally similar to https://technical-documentation-page.freecodecamp.rocks + +**User Stories:** + +1. You can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation) +1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five +1. The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section. +1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`) +1. The `.main-section` elements should contain at least ten `p` elements total (not each) +1. The `.main-section` elements should contain at least five `code` elements total (not each) +1. The `.main-section` elements should contain at least five `li` items total (not each) +1. You can see a `nav` element with a corresponding `id="navbar"` +1. The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation +1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section` +1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar +1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world") +1. When you click on a navbar element, the page should navigate to the corresponding section of the `#main-doc` element (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header) +1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user +1. Your technical documentation should use at least one media query + +Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! + +**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS + +# --hints-- + +You should have a `main` element with an `id` of `main-doc`. + +```js +const el = document.getElementById('main-doc') +assert(!!el) +``` + +You should have at least five `section` elements with a class of `main-section`. + +```js +const els = document.querySelectorAll('#main-doc section') +assert(els.length >= 5) +``` + +All of your `.main-section` elements should be `section` elements. + +```js +const els = document.querySelectorAll('.main-section') +els.forEach(el => { + if (el.tagName !== 'SECTION') assert(false) +}) +assert(els.length > 0) +``` + +You should have at least five `.main-section` elements that are descendants of `#main-doc`. + +```js +const els = document.querySelectorAll('#main-doc .main-section') +assert(els.length >= 5) +``` + +The first child of each `.main-section` should be a `header` element. + +```js +const els = document.querySelectorAll('.main-section') +els.forEach(el => { + if(el.firstElementChild?.tagName !== 'HEADER') assert(false) +}) +assert(els.length > 0) +``` + +None of your `header` elements should be empty. + +```js +const els = document.querySelectorAll('header') +els.forEach(el => { + if (el.innerText?.length <= 0) assert(false) +}) +assert(els.length > 0) +``` + +All of your `.main-section` elements should have an `id`. + +```js +const els = document.querySelectorAll('.main-section') +els.forEach(el => { + if (!el.id || el.id === '') assert(false) +}) +assert(els.length > 0) +``` + +Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id's. + +```js +const els = document.querySelectorAll('.main-section') +els.forEach(el => { + const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') + if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) +}) +assert(els.length > 0) +``` + +You should have at least 10 `p` elements (total) within your `.main-section` elements. + +```js +const els = document.querySelectorAll('.main-section p') +assert(els.length >= 10) +``` + +You should have at least five `code` elements that are descendants of `.main-section` elements. + +```js +const els = document.querySelectorAll('.main-section code') +assert(els.length >= 5) +``` + +You should have at least five `li` elements that are descendants of `.main-section` elements. + +```js +const els = document.querySelectorAll('.main-section li') +assert(els.length >= 5) +``` + +You should have a `nav` element with an `id` of `navbar`. + +```js +const el = document.getElementById('navbar') +assert(!!el && el.tagName === 'NAV') +``` + +Your `#navbar` should have exactly one `header` element within it. + +```js +const els = document.querySelectorAll('#navbar header') +assert(els.length === 1) +``` + +You should have at least one `a` element with a class of `nav-link`. + +```js +const els = document.querySelectorAll('a.nav-link') +assert(els.length >= 1) +``` + +All of your `.nav-link` elements should be anchor (`a`) elements. + +```js +const els = document.querySelectorAll('.nav-link') +els.forEach(el => { + if (el.tagName !== 'A') assert(false) +}) +assert(els.length > 0) +``` + +All of your `.nav-link` elements should be in the `#navbar`. + +```js +const els1 = document.querySelectorAll('.nav-link') +const els2 = document.querySelectorAll('#navbar .nav-link') +assert(els2.length > 0 && els1.length === els2.length) +``` + +You should have the same number of `.nav-link` and `.main-section` elements. + +```js +const els1 = document.querySelectorAll('.main-section') +const els2 = document.querySelectorAll('.nav-link') +assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) +``` + +The `header` element in the `#navbar` should come before any link (`a`) elements also in the `#navbar`. + +```js +const navLinks = document.querySelectorAll('#navbar a.nav-link'); +const header = document.querySelector('#navbar header'); +navLinks.forEach((navLink) => { + if ( + ( + header.compareDocumentPosition(navLink) & + Node.DOCUMENT_POSITION_PRECEDING + ) + ) assert(false) +}); +assert(!!header) +``` + +Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world"). + +```js +const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => + el.firstElementChild?.innerText?.trim().toUpperCase() +) +const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => + el.innerText?.trim().toUpperCase() +) +const remainder = headerText.filter(str => linkText.indexOf(str) === -1) +assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) +``` + +Each `.nav-link` should have an `href` attribute that links to its corresponding `.main-section` (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id). + +```js +const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) +const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) +const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) +assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) +``` + +Your `#navbar` should always be on the left edge of the window. + +```js +const el = document.getElementById('navbar') +const left1 = el?.offsetLeft +const left2 = el?.offsetLeft +assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) +``` + +Your Technical Documentation project should use at least one media query. + +```js +const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) +const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') +assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + Technical Documentation Page + + + +
+
+
Introduction
+

+ Welcome to a basic introduction of algebra. In this tutorial, we will + review some of the more common algebraic concepts. +

+
+
+
Definitions
+

+ To start with, let's define some of the more common terms used in + algebra: +

+
    +
  • + Variable: A variable is an unknown value, usually represented + by a letter. +
    • +
  • + Expression: Essentially a mathematical object. For the + purpose of this tutorial, an expression is one part of an equation. +
    • +
  • + Equation: An equation is a mathematical argument in which two + expressions result in the same value. +
    • +
+
+
+
Examples
+

+ Sometimes it is easier to understand the definitions when you have a + physical example to look at. Here is an example of the above terms.

+ x + 5 = 12

+ In this above example, we have: +

+
    +
  • Variable: The variable in the example is "x".
    • +
  • + Expression: There are two expressions in this example. They + are "x+5" and "12". +
    • +
  • + Equation: The entire example, "x+5=12", is an equation. +
    • +
+
+
+
Solving Equations
+

+ The primary use for algebra is to determine an unknown value, the + "variable", with the information provided. Continuing to use our + example from above, we can find the value of the variable "x".

+ x + 5 = 12

+ In an equation, both sides result in the same value. So you can + manipulate the two expressions however you need, as long as you + perform the same operation (or change) to each side. You do this + because the goal when solving an equation is to + get the variable into its own expression, or by itself on one side + of the = sign.
For this example, we want to remove the "+5" so the "x" is + alone. To do this, we can subtract 5, because subtraction is + the opposite operation to addition. But remember, we have to perform + the same operation to both sides of the equation. Now our equation + looks like this.

+ x + 5 - 5 = 12 - 5

+ The equation looks like a mess right now, because we haven't completed + the operations. We can simplify this equation to make it easier + to read by performing the operations "5-5" and "12-5". The result + is:

+ x = 7

+ We now have our solution to this equation! +

+
+
+
Solving Equations II
+

+ Let us look at a slightly more challenging equation.

+ 3x + 4 = 13

+ Again we can start with subtraction. In this case, we want to subtract + 4 from each side of the equation. We will also go ahead and simplify + with each step. So now we have:

+ 3x = 9

+ "3x" translates to "3*x", where the "*" symbol indicates + multiplication. We use the "*" to avoid confusion, as the "x" is now a + variable instead of a multiplication symbol. The opposite operation + for multiplication is division, so we need to + divide each expression by 3.

+ x = 3

+ And now we have our solution! +

+
+
+
Solving Equations III
+

+ Now we are getting in to more complex operations. Here is another + equation for us to look at:

+ x^2 - 8 = 8

+ Our very first step will be to add 8 to each side. This is + different from our previous examples, where we had to subtract. But + remember, our goal is to get the variable alone by performing opposite + operations.

+ x^2 = 16

+ But what does the "^2" mean? The "^" symbol is used to denote + exponents in situations where superscript is not available. When + superscript is available, you would see it as x2. + For the sake of this project, however, we will use the "^" symbol.
+ An exponent tells you how many times the base (in our case, "x") is + multiplied by itself. So, "x^2" would be the same as "x*x". Now the + opposite function of multiplication is division, but we would have to + divide both sides by "x". We do not want to do this, as that + would put an "x" on the other side of the equation. So instead, we + need to use the root operation! For an exponent of "2", we call this + the "square root" and denote it with "√". Our equation is now: +

+ x = √9

+ Performing a root operation by hand can be a tedious process, so we + recommend using a calculator when necessary. However, we are lucky in + that "9" is a + perfect square, so we do not need to calculate anything. Instead, we find our + answer to be:

+ x = 3 +

+
+
+
System of Equations
+

+ As you explore your algebra studies further, you may start to run + across equations with more than one variable. The first such equations + will likely look like:

+ y = 3x

+ An equation like this does not have one single solution. + Rather, there are a series of values for which the equation is true. + For example, if "x=3" and "y=9", the equation is true. These equations + are usually used to plot a graph.
+ Getting more complicated, though, you may be given a pair of + equations. This is called a "system of equations", and CAN be solved. + Let's look at how we do this! Consider the following system of + equations:

+ y = 3x | y - 6 = x + A system of equations IS solvable, but it is a multi-step process. To + get started, we need to chose a variable we are solving for. Let's + solve for "x" first. From the second equation, we know that "x" equals + "y - 6", but we cannot simplify that further because we do not have a + value for "y". Except, thanks to the system of equations, we DO have a + value for "y". We know that "y" equals "3x". So, looking at our second + equation, we can replace "y" with "3x" because they have the same + value. We then get:

+ 3x - 6 = x

+ Now we can solve for "x"! We start by adding 6 to each side.

+ 3x = x + 6

+ We still need to get "x" by itself, so we subtract "x" from both sides + and get:

+ 2x = 6

+ If this confuses you, remember that "3x" is the same as "x+x+x". + Subtract an "x" from that and you get "x+x", or "2x". Now we divide + both sides by 2 and have our value for x!

+ x = 3

+ However, our work is not done yet. We still need to find the value for + "y". Let's go back to our first equation:

+ y = 3x

+ We have a value for "x" now, so let's see what happens if we put that + value in.

+ y = 3*3

+ We perform the multiplication and discover that "y=9"! Our solution to + this system of equations then is:

+ x = 3 and y = 9

+

+
+
+
Try it Yourself!
+

Coming Soon!

+

Keep an eye out for new additions!

+
+
+
More Information
+

Check out the following links for more information!

+ +
+
+ + + +``` + +```css +* { + background-color: #3a3240; +} +a { + color: #92869c; +} +a:hover { + background-color: #92869c; + color: #3a3240; +} +#navbar { + border-style: solid; + border-width: 5px; + border-color: #92869c; + height: 100%; + top: -5px; + left: -5px; + padding: 5px; + text-align: center; + color: #92869c +} +@media (min-width: 480px) { + #navbar { + position: fixed; + } +} +main { + margin-left: 220px; + color: #92869c +} +header { + font-size: 20pt; +} +code { + background-color: #92869c; + border-style: dashed; + border-width: 2px; + border-color: #92869c; + padding: 5px; + color: black; +} +footer { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md new file mode 100644 index 00000000000000..e6ba533c7d1d6f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md @@ -0,0 +1,325 @@ +--- +id: bd7158d8c442eddfaeb5bd18 +title: Build a Tribute Page +challengeType: 14 +forumTopicId: 301147 +dashedName: build-a-tribute-page +--- + +# --description-- + +**Objective:** Build an app that is functionally similar to https://tribute-page.freecodecamp.rocks + +**User Stories:** + +1. Your tribute page should have an element with a corresponding `id="main"`, which contains all other elements +1. You should see an element with an `id` of `title`, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug") +1. You should see either a `figure` or a `div` element with an `id` of `img-div` +1. Within the `#img-div` element, you should see an `img` element with a corresponding `id="image"` +1. Within the `#img-div` element, you should see an element with a corresponding `id="img-caption"` that contains textual content describing the image shown in `#img-div` +1. You should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page +1. You should see an a element with a corresponding `id="tribute-link"`, which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of `target` and set it to `_blank` in order for your link to open in a new tab +1. Your `#image` should use `max-width` and `height` properties to resize responsively, relative to the width of its parent element, without exceeding its original size +1. Your `img` element should be centered within its parent element + +Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! + +**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS + +# --hints-- + +You should have a `main` element with an `id` of `main`. + +```js +const el = document.getElementById('main') +assert(!!el && el.tagName === 'MAIN') +``` + +Your `#img-div`, `#image`, `#img-caption`, `#tribute-info`, and `#tribute-link` should all be descendants of `#main`. + +```js +const el1 = document.querySelector('#main #img-div') +const el2 = document.querySelector('#main #image') +const el3 = document.querySelector('#main #img-caption') +const el4 = document.querySelector('#main #tribute-info') +const el5 = document.querySelector('#main #tribute-link') +assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) +``` + +You should have an element with an `id` of `title`. + +```js +const el = document.getElementById('title') +assert(!!el) +``` + +Your `#title` should not be empty. + +```js +const el = document.getElementById('title') +assert(!!el && el.innerText.length > 0) + +``` + +You should have a `figure` or `div` element with an `id` of `img-div`. + +```js +const el = document.getElementById('img-div') +assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) +``` + +You should have an `img` element with an `id` of `image`. + +```js +const el = document.getElementById('image') +assert(!!el && el.tagName === 'IMG') +``` + +Your `#image` should be a descendant of `#img-div`. + +```js +const el = document.querySelector('#img-div #image') +assert(!!el) +``` + +You should have a `figcaption` or `div` element with an `id` of `img-caption`. + +```js +const el = document.getElementById('img-caption') +assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) +``` + +Your `#img-caption` should be a descendant of `#img-div`. + +```js +const el = document.querySelector('#img-div #img-caption') +assert(!!el) +``` + +Your `#img-caption` should not be empty. + +```js +const el = document.getElementById('img-caption') +assert(!!el && el.innerText.length > 0) +``` + +You should have an element with an `id` of `tribute-info`. + +```js +const el = document.getElementById('tribute-info') +assert(!!el) +``` + +Your `#tribute-info` should not be empty. + +```js +const el = document.getElementById('tribute-info') +assert(!!el && el.innerText.length > 0) +``` + +You should have an `a` element with an `id` of `tribute-link`. + +```js +const el = document.getElementById('tribute-link') +assert(!!el && el.tagName === 'A') +``` + +Your `#tribute-link` should have an `href` attribute and value. + +```js +const el = document.getElementById('tribute-link') +assert(!!el && !!el.href && el.href.length > 0) +``` + +Your `#tribute-link` should have a `target` attribute set to `_blank`. + +```js +const el = document.getElementById('tribute-link') +assert(!!el && el.target === '_blank') +``` + +Your `img` element should have a `display` of `block`. + +```js +const img = document.getElementById('image'); +const imgStyle = window.getComputedStyle(img); +const style = imgStyle?.getPropertyValue('display') +assert(style === 'block') +``` + +Your `#image` should have a `max-width` of `100%`. + +```js +const img = document.getElementById('image'); +const imgStyle = window.getComputedStyle(img); +const style = imgStyle?.getPropertyValue('max-width') +assert(style === '100%') +``` + +Your `#image` should have a `height` of `auto`. + +```js +// taken from the testable-projects repo +const img = document.getElementById('image'); +const imgStyle = window.getComputedStyle(img); +const oldDisplayValue = imgStyle.getPropertyValue('display'); +const oldDisplayPriority = imgStyle.getPropertyPriority('display'); +img?.style.setProperty('display', 'none', 'important'); +const heightValue = imgStyle?.getPropertyValue('height') +img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); +assert(heightValue === 'auto') +``` + +Your `#image` should be centered within its parent. + +```js +// taken from the testable-projects repo +const img = document.getElementById('image'), + imgParent = img?.parentElement, + imgLeft = img?.getBoundingClientRect().left, + imgRight = img?.getBoundingClientRect().right, + parentLeft = imgParent?.getBoundingClientRect().left, + parentRight = imgParent?.getBoundingClientRect().right, + leftMargin = imgLeft - parentLeft, + rightMargin = parentRight - imgRight; +assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +```css + +``` + +## --solutions-- + +```html + + + + + + + + Tribute Page + + +

Tribute Page

+

The below card was designed as a tribute page for freeCodeCamp.

+
+
+ An image of Togepi +
Togepi, happy as always.
+
+

Togepi

+
+
+

+ Togepi was first discovered in the Johto region, when Ash Ketchum + discovered a mysterious egg. However, when the egg hatched, Togepi saw + Ash's friend Misty first and imprinted on her. Like many other + creatures, this imprinting process created a bond and Togepi views + Misty as his mother. +

+

+ Togepi is a very childlike Pokemon, and is very emotionally + expressive. He demonstrates extreme levels of joy and sadness. +

+
+

Battle Information

+
    +
  • Type: Fairy
    • +
  • Evolutions: Togepi -> Togetic -> Togekiss
    • +
  • Moves: Growl, Pound, Sweet Kiss, Charm
    • +
  • Weaknesses: Poison, Steel
    • +
  • Resistances: Dragon
    • +
+

+ Check out this + Bulbapedia article on Togepi + for more information on this great Pokemon. +

+
+
+ + + +``` + +```css +body { + background-color: #3a3240; + color: white; +} +main { + background-color: #92869c; + font-family: Lobster; + max-width: 500px; + margin: 20px auto; + color: black; + border-radius: 50px; + box-shadow: 10px 10px rgba(0, 0, 0, 0.5); +} +h2 { + text-align: center; + font-size: 20pt; + font-family: Pacifico; +} +body { + text-align: center; + font-size: 12pt; +} +footer { + text-align: center; + font-size: 10pt; +} +.border { + border-color: black; + border-width: 5px; + border-style: solid; +} +#image { + height: auto; + display: block; + margin: auto; + max-width: 100%; + border-radius: 50%; +} +#img-caption { + font-size: 10pt; +} +a:not(#tribute-link) { + color: white; +} +hr { + border-color: black; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md new file mode 100644 index 00000000000000..f4cc9650102c14 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md @@ -0,0 +1,56 @@ +--- +id: 613297a923965e0703b64796 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +You may be familiar with the `meta` element already; it is used to specify information about the page, such as the title, description, keywords, and author. + +Give your page a `meta` element with an appropriate `charset` value. + +The `charset` attribute specifies the character encoding of the page, and, nowadays, `UTF-8` is the only encoding supported by most browsers. + +# --hints-- + +You should create a `meta` element within the `head` element. + +```js +assert.exists(document.querySelector('head > meta')); +``` + +You should give the `meta` tag a `charset` of `UTF-8`. + +```js +assert.equal(document.querySelector('head > meta')?.getAttribute('charset'), 'UTF-8'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md new file mode 100644 index 00000000000000..07519ab2fc413a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md @@ -0,0 +1,61 @@ +--- +id: 61329b210dac0b08047fd6ab +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Continuing with the `meta` elements, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimization). + +Add a `viewport` definition with a `content` attribute detailing the `width` and `initial-scale` of the page. + +# --hints-- + +You should create another `meta` element in the `head`. + +```js +assert.equal(document.querySelectorAll('head > meta')?.length, 2); +``` + +You should give the `meta` a `name` attribute of `viewport`. + +```js +assert.equal(document.querySelectorAll('head > meta[name="viewport"]')?.length, 1); +``` + +You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`. + +```js +assert.equal(document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1.0"]')?.length || document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1"]')?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md new file mode 100644 index 00000000000000..4daa0898cb0498 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md @@ -0,0 +1,68 @@ +--- +id: 61329d52e5010e08d9b9d66b +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Another important `meta` element for accessibility and SEO is the `description` definition. The value of the `content` attribute is used by search engines to provide a description of your page. + +Add a `meta` element with the `name` attribute set to `description`, and give it a useful `content` attribute. + +# --hints-- + +You should add a new `meta` element to the `head`. + +```js +assert.equal(document.querySelectorAll('meta').length, 3); +``` + +You should give the `meta` a `name` attribute of `description`. + +```js +assert.exists(document.querySelector('meta[name="description"]')); +``` + +You should give the `meta` a `content` attribute. + +```js +assert.notEmpty(document.querySelector('meta[name="description"]')?.content); +``` + +The `content` attribute value should not be more than 165 characters. _This is Google's maximum description length._ + +```js +assert.isAtMost(document.querySelector('meta[name="description"]')?.content?.length, 165); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md new file mode 100644 index 00000000000000..eeff5f8dc54da7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md @@ -0,0 +1,63 @@ +--- +id: 6133acc353338c0bba9cb553 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Lastly in the `head`, the `title` element is useful for screen readers to understand the content of a page. Furthermore, it is an important part of _SEO_. + +Give your page a `title` that is descriptive and concise. + +# --hints-- + +You should add a `title` element to the `head`. + +```js +assert.exists(document.querySelector('head > title')); +``` + +You should not make the `title` longer than 60 characters. + +```js +assert.isAtMost(document.querySelector('head > title')?.textContent?.length, 60); +``` + +Try being more descriptive with your `title` element. _Hint: At least 15 characters_ + +```js +assert.isAtLeast(document.querySelector('head > title')?.textContent?.length, 15); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md new file mode 100644 index 00000000000000..8a3e150218f14e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md @@ -0,0 +1,68 @@ +--- +id: 6133d11ef548f51f876149e3 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Navigation is a core part of accessibility, and screen readers rely on you to provide the structure of your page. This is accomplished with semantic HTML elements. + +Add a `header` and a `main` element to your page. + +The `header` element will be used to introduce the page, as well as provide a navigation menu. + +The `main` element will contain the core content of your page. + +# --hints-- + +You should add a `header` element to the `body`. + +```js +assert.exists(document.querySelector('body > header')); +``` + +You should add a `main` element to the `body`. + +```js +assert.exists(document.querySelector('body > main')); +``` + +The `header` element should come before the `main` element. + +```js +assert.exists(document.querySelector('header + main')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md new file mode 100644 index 00000000000000..3b746df024fb53 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md @@ -0,0 +1,93 @@ +--- +id: 613e2546d0594208229ada50 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Within the `header`, provide context about the page by nesting one `img`, `h1`, and `nav` element. + +The `img` should point to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`, and have an `id` of `logo`. + +The `h1` should contain the text `HTML/CSS Quiz`. + +# --hints-- + +You should add an `img` element to the `header` element. + +```js +assert.exists(document.querySelector('header > img')); +``` + +You should add an `h1` element to the `header` element. + +```js +assert.exists(document.querySelector('header > h1')); +``` + +You should add a `nav` element to the `header` element. + +```js +assert.exists(document.querySelector('header > nav')); +``` + +You should place the `img`, `h1`, and `nav` elements in that order. + +```js +assert.exists(document.querySelector('img + h1 + nav')); +``` + +You should give the `img` element a `src` attribute of `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. + +```js +assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg'); +``` + +You should give the `img` element an `id` attribute of `logo`. + +```js +assert.equal(document.querySelector('img')?.id, 'logo'); +``` + +You should give the `h1` element the text `HTML/CSS Quiz`. + +```js +assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md new file mode 100644 index 00000000000000..8ed0221db82abf --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -0,0 +1,66 @@ +--- +id: 613e275749ebd008e74bb62e +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +A useful property of an _SVG_ (scalable vector graphics) is that it contains a `path` attribute which allows the image to be scaled without affecting the resolution of the resultant image. + +Currently, the `img` is assuming it's default size, which is too large. Correctly, scale the image using it's `id` as a selector, and setting the `width` to `max(100px, 18vw)`. + +# --hints-- + +You should use the `#logo` selector to target the `img` element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); +``` + +You should give the `img` a `width` of `max(100px, 18vw)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md new file mode 100644 index 00000000000000..e686ed21df1bd8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md @@ -0,0 +1,93 @@ +--- +id: 6140827cff96e906bd38fc2b +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +As described in the [freeCodeCamp Style Guide](https://design-style-guide.freecodecamp.org/), the logo should retain an aspect ratio of `35:4`, and have padding around the text. + +First, change the `background-color` to `#0a0a23` so you can see the logo. Then, use the `aspect-ratio` property to set the desired aspect ratio. Finally, add a `padding` of `0.4rem` all around. + +# --hints-- + +You should give `#logo` a `background-color` of `#0a0a23`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)'); +``` + +You should use the `aspect-ratio` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio); +``` + +You should not use the `height` property. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height); +``` + +You should not change the `width` property. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); +``` + +You should give the `img` an `aspect-ratio` of `35 / 4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4'); +``` + +You should give the `img` a `padding` of `0.4rem`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- +#logo { + width: max(100px, 18vw); + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md new file mode 100644 index 00000000000000..20e02d934128fb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md @@ -0,0 +1,89 @@ +--- +id: 6140883f74224508174794c0 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Make the `header` take up the full width of its parent container, set it's `height` to `50px`, and set the `background-color` to `#1b1b32`. Then, set the `display` to use _Flexbox_. + +# --hints-- + +You should use the `header` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('header')); +``` + +You should give the `header` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%'); +``` + +You should give the `header` a `height` of `50px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px'); +``` + +You should give the `header` a `background-color` of `#1b1b32`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)'); +``` + +You should give the `header` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md new file mode 100644 index 00000000000000..e86102a346de30 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md @@ -0,0 +1,83 @@ +--- +id: 61408e4ae3e35d08feb260eb +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Change the `h1` font color to `#f1be32`, and set the font size to `min(5vw, 1.2em)`. + +# --hints-- + +You should use the `h1` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +You should give the `h1` a `color` of `#f1be32`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)'); +``` + +You should give the `h1` a `font-size` of `min(5vw, 1.2em)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md new file mode 100644 index 00000000000000..bcb0886e660ebc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md @@ -0,0 +1,112 @@ +--- +id: 61408f155e798909b6908712 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +To enable navigation on the page, add an unordered list with the following three list items: + +- `INFO` +- `HTML` +- `CSS` + +The list items text should be wrapped in anchor tags. + +# --hints-- + +You should nest one `ul` element inside the `nav`. + +```js +assert.equal(document.querySelectorAll('nav > ul')?.length, 1); +``` + +You should nest three `li` elements inside the `ul` element. + +```js +assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3); +``` + +You should nest one `a` element inside each `li` element. + +```js +assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3); +``` + +You should give the first `a` element the text `INFO`. + +```js +assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO'); +``` + +You should give the second `a` element the text `HTML`. + +```js +assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML'); +``` + +You should give the third `a` element the text `CSS`. + +```js +assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md new file mode 100644 index 00000000000000..6eea8da86db118 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -0,0 +1,102 @@ +--- +id: 614090d5a22b6f0a5a6b464c +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + + + +# --description-- + +Target unordered list elements within `nav` elements, and use _Flexbox_ to evenly space the children. + +# --hints-- + +You should use the `nav > ul` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul')); +``` + +You should give the `nav > ul` elements a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex'); +``` + +You should give the `nav > ul` elements a `justify-content` of `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.justifyContent, 'space-evenly'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md new file mode 100644 index 00000000000000..826b553df92bae --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md @@ -0,0 +1,125 @@ +--- +id: 6141fabd6f75610664e908fd +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +As this is a quiz, you will need a form for users to submit answers. You can semantically separate the content within the form using `section` elements. + +Within the `main` element, create a form with three nested `section` elements. Then, make the form submit to `https://freecodecamp.org/practice-project/accessibility-quiz`, using the correct method. + +# --hints-- + +You should nest a `form` element within your `main` element. + +```js +assert.exists(document.querySelector('main > form')); +``` + +You should nest three `section` elements within your `form` element. + +```js +assert.equal(document.querySelectorAll('main > form > section')?.length, 3); +``` + +You should give the `form` element an `action` attribute. + +```js +assert.notEmpty(document.querySelector('main > form')?.action); +``` + +You should give the `action` attribute a value of `https://freecodecamp.org/practice-project/accessibility-quiz`. + +```js +assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz'); +``` + +You should give the `form` element a `method` attribute. + +```js +assert.notEmpty(document.querySelector('main > form')?.method); +``` + +You should give the `form` element a `method` attribute with a value of `post`. + +```js +assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md new file mode 100644 index 00000000000000..78a09ebf68a2f2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md @@ -0,0 +1,111 @@ +--- +id: 6141fed65b61320743da5894 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To increase the page accessibility, the `role` attribute can be used to indicate the purpose behind an element on the page to assistive technologies. The `role` attribute is a part of the _Web Accessibility Initiative_ (WAI), and accepts preset values. + +Give each of the `section` elements the `region` role. + +# --hints-- + +You should give the first `section` element the `region` role. + +```js +assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region'); +``` + +You should give the second `section` element the `region` role. + +```js +assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region'); +``` + +You should give the third `section` element the `region` role. + +```js +assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md new file mode 100644 index 00000000000000..2987ac353a5ded --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md @@ -0,0 +1,171 @@ +--- +id: 614202874ca576084fca625f +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Every `region` role requires a visible label, which should be referenced by the `aria-labelledby` attribute. + +To the `section` elements, give the following `aria-labelledby` attributes: + +- `student-info` +- `html-questions` +- `css-questions` + +Then, within each `section` element, nest one `h2` element with an `id` matching the corresponding `aria-labelledby` attribute. Give each `h2` suitable text content. + +# --hints-- + +You should give the first `section` element an `aria-labelledby` attribute of `student-info`. + +```js +assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info'); +``` + +You should give the second `section` element an `aria-labelledby` attribute of `html-questions`. + +```js +assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions'); +``` + +You should give the third `section` element an `aria-labelledby` attribute of `css-questions`. + +```js +assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions'); +``` + +You should nest one `h2` element within the first `section` element. + +```js +assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1); +``` + +You should nest one `h2` element within the second `section` element. + +```js +assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1); +``` + +You should nest one `h2` element within the third `section` element. + +```js +assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1); +``` + +You should give the first `h2` element an `id` attribute of `student-info`. + +```js +assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info'); +``` + +You should give the second `h2` element an `id` attribute of `html-questions`. + +```js +assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions'); +``` + +You should give the third `h2` element an `id` attribute of `css-questions`. + +```js +assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions'); +``` + +You should give the first `h2` element suitable text content. _Hint: I would have chosen `Student Info`_ + +```js +assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1); +``` + +You should give the second `h2` element suitable text content. _Hint: I would have chosen `HTML`_ + +```js +assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1); +``` + +You should give the third `h2` element suitable text content. _Hint: I would have chosen `CSS`_ + +```js +assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md new file mode 100644 index 00000000000000..7e05eb381033c8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md @@ -0,0 +1,140 @@ +--- +id: 614206033d366c090ca7dd42 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Typeface plays an important role in the accessibility of a page. Some fonts are easier to read than others, and this is especially true on low-resolution screens. + +Change the font for both the `h1` and `h2` elements to `Verdana`, and use another web-safe font in the sans-serif family as a fallback. + +Also, add a `border-bottom` of `4px solid #dfdfe2` to `h2` elements to make the sections distinct. + +# --hints-- + +You should use a multiple element selector to target the `h1` and `h2` elements. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('h1, h2') || gs('h2, h1')); +``` + +You should set the first value of the `font-family` property to `Verdana`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const style = gs('h1, h2') || gs('h2, h1'); +assert.include(style?.fontFamily, 'Verdana'); +``` + +You should set the second value of the `font-family` property to another sans-serif, web safe font. _Hint: I would choose Tahoma_. + +```js +// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS. +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const style = gs('h1, h2') || gs('h2, h1'); +assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/); +``` + +You should use an `h2` element selector to target the `h2` elements. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('h2')); +``` + +You should give `h2` a `border-bottom` property of `4px solid #dfdfe2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md new file mode 100644 index 00000000000000..64d85203b55806 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md @@ -0,0 +1,125 @@ +--- +id: 61435e3c0679a306c20f1acc +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +To be able to navigate within the page, give each anchor element an `href` corresponding to the `id` of the `h2` elements. + +# --hints-- + +You should give the first `a` element an `href` of `#student-info`. + +```js +assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('href'), '#student-info'); +``` + +You should give the second `a` element an `href` of `#html-questions`. + +```js +assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('href'), '#html-questions'); +``` + +You should give the third `a` element an `href` of `#css-questions`. + +```js +assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('href'), '#css-questions'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md new file mode 100644 index 00000000000000..f5b439aaeb63e6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md @@ -0,0 +1,173 @@ +--- +id: 6143610161323a081b249c19 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Filling out the content of the quiz, below `#student-info`, add three `div` elements with a `class` of `info`. + +Then, within each `div` nest one `label` element, and one `input` element. + +# --hints-- + +You should nest three `div` elements below the `h2#student-info` element. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3); +``` + +You should give the first `div` a `class` of `info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.className, 'info'); +``` + +You should give the second `div` a `class` of `info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className, 'info'); +``` + +You should give the third `div` a `class` of `info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info'); +``` + +You should nest one `label` element within the first `div`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1); +``` + +You should nest one `input` element within the first `div`, after the `label`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1); +assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input')); +``` + +You should nest one `label` element within the second `div`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1); +``` + +You should nest one `input` element within the second `div`, after the `label`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1); +assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input')); +``` + +You should nest one `label` element within the third `div`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1); +``` + +You should nest one `input` element within the third `div`, after the `label`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1); +assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelector('label + input')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+--fcc-editable-region-- +
+

Student Info

+ +
+--fcc-editable-region-- +
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md new file mode 100644 index 00000000000000..7f97400894af86 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md @@ -0,0 +1,195 @@ +--- +id: 6143639d5eddc7094161648c +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +It is important to link each `input` to the corresponding `label` element. This provides assistive technology users with a visual reference to the input. + +This is done by giving the `label` a `for` attribute, which contains the `id` of the `input`. + +This section will take a student's name, email address, and date of birth. Give the `label` elements appropriate `for` attributes, as well as text content. Then, link the `input` elements to the corresponding `label` elements. + +# --hints-- + +You should give the first `label` element an appropriate `for` attribute. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1); +``` + +You should give the second `label` element an appropriate `for` attribute. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1); +``` + +You should give the third `label` element an appropriate `for` attribute. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1); +``` + +You should give the first `label` element an appropriate text content. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1); +``` + +You should give the second `label` element an appropriate text content. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1); +``` + +You should give the third `label` element an appropriate text content. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1); +``` + +You should give the first `input` element an `id` attribute matching the `for` attribute of the first `label`. + +```js +assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor); +``` + +You should give the second `input` element an `id` attribute matching the `for` attribute of the second `label`. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor); +``` + +You should give the third `input` element an `id` attribute matching the `for` attribute of the third `label`. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor); +``` + +You should not use the same `id` attribute for more than one `input` element. + +```js +const id = (n) => document.querySelectorAll('input')?.[n]?.id; +assert.notEqual(id(0), id(1)); +assert.notEqual(id(0), id(2)); +assert.notEqual(id(1), id(2)); +``` + +You should not use the same `for` attribute for more than one `label` element. + +```js +const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor; +assert.notEqual(htmlFor(0), htmlFor(1)); +assert.notEqual(htmlFor(0), htmlFor(2)); +assert.notEqual(htmlFor(1), htmlFor(2)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+--fcc-editable-region-- +
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md new file mode 100644 index 00000000000000..d5fc4ab0520719 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md @@ -0,0 +1,161 @@ +--- +id: 6143908b6aafb00a659ca189 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Keeping in mind best-practices for form inputs, give each `input` an appropriate `type` and `name` attribute. Then, give the first `input` a `placeholder` attribute. + +# --hints-- + +You should give the first `input` a `type` of `text`. + +```js +assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text'); +``` + +You should give the second `input` a `type` of `email`. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email'); +``` + +You should give the third `input` a `type` of `date`. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date'); +``` + +You should give the first `input` an appropriate `name` attribute. + +```js +assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1); +``` + +You should give the second `input` an appropriate `name` attribute. + +```js +assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1); +``` + +You should give the third `input` an appropriate `name` attribute. + +```js +assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1); +``` + +You should give the first `input` a `placeholder` attribute. + +```js +assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+--fcc-editable-region-- +
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md new file mode 100644 index 00000000000000..2058c74e267c38 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md @@ -0,0 +1,127 @@ +--- +id: 6143920c8eafb00b735746ce +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Even though you added a `placeholder` to the first `input` element in the previous lesson, this is actually not a best-practice for accessibility; too often, users confuse the placeholder text with an actual input value - they think there is already a value in the input. + +Remove the placeholder text from the first `input` element, relying on the `label` being the best-practice. + +# --hints-- + +You should remove the `placeholder` attribute from the first `input` element. + +```js +assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- +
+ + +
+
+ + +
+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md new file mode 100644 index 00000000000000..fa6f9fb65d0ed1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md @@ -0,0 +1,139 @@ +--- +id: 6143931a113bb80c45546287 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Arguably, `D.O.B.` is not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the label, is to add text only a screen reader can read. + +Append a `span` element with a class of `sr-only` to the current text content of the third `label` element. + +# --hints-- + +You should add a `span` element within the third `label` element. + +```js +assert.exists(document.querySelector('.info:nth-of-type(3) > label > span')); +``` + +You should give the `span` element a class of `sr-only`. + +```js +assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only'); +``` + +You should place the `span` after the text content `D.O.B.`. + +```js +assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\. + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- +
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md new file mode 100644 index 00000000000000..fbfb1a53ab1e56 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md @@ -0,0 +1,125 @@ +--- +id: 614394fb41985e0d2012a93e +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Within the `span` element, add the text `(Date of Birth)`. + +# --hints-- + +You should give the `span` element the text `(Date of Birth)`. + +```js +assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.textContent, '(Date of Birth)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- +
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md new file mode 100644 index 00000000000000..7afb8f8491afba --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md @@ -0,0 +1,197 @@ +--- +id: 6143956ed76ed60e012faa51 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +The `.sr-only` text is still visible. There is a common pattern to visually hide text for only screen readers to read. + +This pattern is to set the following CSS properties: + +```css +position: absolute; +width: 1px; +height: 1px; +padding: 0; +margin: -1px; +overflow: hidden; +clip: rect(0, 0, 0, 0); +white-space: nowrap; +border: 0; +``` + +Use the above to define the `sr-only` class. + +# --hints-- + +You should use the `.sr-only` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only')); +``` + +You should give the `.sr-only` a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute'); +``` + +You should give the `.sr-only` a `width` of `1px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px'); +``` + +You should give the `.sr-only` a `height` of `1px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px'); +``` + +You should give the `.sr-only` a `padding` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px'); +``` + +You should give the `.sr-only` a `margin` of `-1px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px'); +``` + +You should give the `.sr-only` an `overflow` of `hidden`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden'); +``` + +You should give the `.sr-only` a `clip` of `rect(0, 0, 0, 0)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)'); +``` + +You should give the `.sr-only` a `white-space` of `nowrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap'); +``` + +You should give the `.sr-only` a `border` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.borderWidth, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md new file mode 100644 index 00000000000000..39af52dfa782fd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md @@ -0,0 +1,200 @@ +--- +id: 614396f7ae83f20ea6f9f4b3 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Within the second `section` element, add two `div` elements with a class of `question-block`. + +Then, within each `div.question-block` element, add one `p` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`. + +# --hints-- + +You should nest two `div` elements within the second `section` element. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2); +``` + +You should give the first new `div` element a class of `question-block`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block'); +``` + +You should give the second new `div` element a class of `question-block`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block'); +``` + +You should nest one `p` element within each `div.question-block` element. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2); +``` + +You should give the first `p` element text of `1`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1'); +``` + +You should give the second `p` element text of `2`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2'); +``` + +You should nest one `fieldset` element within each `div.question-block` element. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2); +``` + +You should place the first `fieldset` element after the first `p` element. + +```js +assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset')); +``` + +You should place the second `fieldset` element after the second `p` element. + +```js +assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset')); +``` + +You should give the first `fieldset` element a class of `question`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question'); +``` + +You should give the second `fieldset` element a class of `question`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+ +
+--fcc-editable-region-- +
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md new file mode 100644 index 00000000000000..7fb76d94962e4d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md @@ -0,0 +1,177 @@ +--- +id: 6143cb26f7edff2dc28f7da5 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Each `fieldset` will contain a true/false question. + +Within each `fieldset`, nest one `legend` element, and one `ul` element with two options. + +# --hints-- + +You should nest one `legend` element within the first `fieldset` element. + +```js +assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > legend')?.length, 1); +``` + +You should nest one `ul` element within the first `fieldset` element. + +```js +assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > ul')?.length, 1); +``` + +You should nest two `li` elements within the first `ul` element. + +```js +assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.querySelectorAll('li')?.length, 2); +``` + +You should nest one `legend` element within the second `fieldset` element. + +```js +assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > legend')?.length, 1); +``` + +You should nest one `ul` element within the second `fieldset` element. + +```js +assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > ul')?.length, 1); +``` + +You should nest two `li` elements within the second `ul` element. + +```js +assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('li')?.length, 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+

1

+
+
+
+

2

+
+
+
+--fcc-editable-region-- +
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md new file mode 100644 index 00000000000000..5566a60c1e453e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md @@ -0,0 +1,195 @@ +--- +id: 6144e818fd5ea704fe56081d +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Give each `fieldset` an adequate `name` attribute. Then, give both unordered lists a `class` of `answers-list`. + +Finally, use the `legend` to caption the content of the `fieldset` by placing a true/false question as the text content. + +# --hints-- + +You should give the first `fieldset` an adequate `name` attribute. _Hint: I would use `html-question-one`_ + +```js +assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name); +``` + +You should give the second `fieldset` an adequate `name` attribute. _Hint: I would use `html-question-two`_ + +```js +assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name); +``` + +You should give the first `ul` element a `class` of `answers-list`. + +```js +assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.className, 'answers-list'); +``` + +You should give the second `ul` element a `class` of `answers-list`. + +```js +assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answers-list'); +``` + +You should give the first `legend` element text content. + +```js +assert.notEmpty(document.querySelectorAll('legend')?.[0]?.textContent); +``` + +You should give the second `legend` element text content. + +```js +assert.notEmpty(document.querySelectorAll('legend')?.[1]?.textContent); +``` + +You should not use the same text content for both `legend` elements. + +```js +assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.querySelectorAll('legend')?.[1]?.textContent); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+

1

+
+ +
    +
  • +
  • +
+
+
+
+

2

+
+ +
    +
  • +
  • +
+
+
+
+--fcc-editable-region-- +
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md new file mode 100644 index 00000000000000..7cd450063c4c55 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md @@ -0,0 +1,231 @@ +--- +id: 6144f8dc6849e405dd8bb829 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +To provide the functionality of the true/false questions, we need a set of inputs which do not allow both to be selected at the same time. + +Within each list element, nest one `label` element, and within each `label` element, nest one `input` element with the appropriate `type`. + +# --hints-- + +You should nest one `label` element within the first `li` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')); +``` + +You should nest one `label` element within the second `li` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')); +``` + +You should nest one `label` element within the third `li` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')); +``` + +You should nest one `label` element within the fourth `li` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')); +``` + +You should nest one `input` element within the first `label` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')?.querySelector('input')); +``` + +You should nest one `input` element within the second `label` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')?.querySelector('input')); +``` + +You should nest one `input` element within the third `label` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')?.querySelector('input')); +``` + +You should nest one `input` element within the fourth `label` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input')); +``` + +You should give the first `input` a `type` of `radio`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio'); +``` + +You should give the second `input` a `type` of `radio`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio'); +``` + +You should give the third `input` a `type` of `radio`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio'); +``` + +You should give the fourth `input` a `type` of `radio`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • +
  • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md new file mode 100644 index 00000000000000..3fbdcb854e3943 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md @@ -0,0 +1,207 @@ +--- +id: 6145e6eeaa66c605eb087fe9 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Although not required for `label` elements with a nested `input`, it is still best-practice to explicitly link a `label` with its corresponding `input` element. + +Link the `label` elements with their corresponding `input` elements. + +# --hints-- + +You should give the first `label` a `for` attribute matching the `id` of its `input` element. + +```js +const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor; +assert.notEmpty(htmlFor); +assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id); +``` + +You should give the second `label` a `for` attribute matching the `id` of its `input` element. + +```js +const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor; +assert.notEmpty(htmlFor); +assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id); +``` + +You should give the third `label` a `for` attribute matching the `id` of its `input` element. + +```js +const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor; +assert.notEmpty(htmlFor); +assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id); +``` + +You should give the fourth `label` a `for` attribute matching the `id` of its `input` element. + +```js +const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor; +assert.notEmpty(htmlFor); +assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md new file mode 100644 index 00000000000000..a5d554a893fba3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md @@ -0,0 +1,287 @@ +--- +id: 6145e8b5080a5f06bb0223d0 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Give the `label` elements text such that the `input` comes before the text. Then, give the `input` elements a `value` matching the text. + +The text should either be `True` or `False`. + +# --hints-- + +You should give the first `label` element text content. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()); +``` + +You should give the second `label` element text content. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()); +``` + +You should give the third `label` element text content. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()); +``` + +You should give the fourth `label` element text content. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()); +``` + +You should place the first `label` text content after the `input` element. + +```js +assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/); +``` + +You should place the second `label` text content after the `input` element. + +```js +assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/); +``` + +You should place the third `label` text content after the `input` element. + +```js +assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/); +``` + +You should place the fourth `label` text content after the `input` element. + +```js +assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/); +``` + +You should give the first `label` the text `True` or `False`. + +```js +assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()); +``` + +You should give the second `label` the text `True`. + +```js +const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); +assert(l(0) === 'False' ? l(1) === 'True' : true); +``` + +You should give the second `label` the text `False`. + +```js +const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); +assert(l(0) === 'True' ? l(1) === 'False' : true); +``` + +You should give the third `label` the text `True` or `False`. + +```js +assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()); +``` + +You should give the fourth `label` the text `True`. + +```js +const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); +assert(l(2) === 'False' ? l(3) === 'True' : true); +``` + +You should give the fourth `label` the text `False`. + +```js +const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); +assert(l(2) === 'True' ? l(3) === 'False' : true); +``` + +You should give the first `input` a `value` matching the `label` text content. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase()); +``` + +You should give the second `input` a `value` matching the `label` text content. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.value?.toLowerCase()); +``` + +You should give the third `input` a `value` matching the `label` text content. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.value?.toLowerCase()); +``` + +You should give the fourth `input` a `value` matching the `label` text content. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.value?.toLowerCase()); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md new file mode 100644 index 00000000000000..59c29e00db97f2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md @@ -0,0 +1,224 @@ +--- +id: 6145eb5f08a38a0786c7a80c +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +If you click on the radio inputs, you might notice both inputs within the same true/false fieldset can be selected at the same time. + +Group the relevant inputs together such that only one input from a pair can be selected at a time. + +# --hints-- + +You should give the first `input` a `name` attribute. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.name); +``` + +You should give the second `input` a `name` attribute. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.name); +``` + +You should give the third `input` a `name` attribute. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.name); +``` + +You should give the fourth `input` a `name` attribute. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.name); +``` + +You should give the second `input` a `name` attribute matching the `name` attribute of the first `input`. + +```js +const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; +assert.equal(i(1), i(0)); +``` + +You should give the fourth `input` a `name` attribute matching the `name` attribute of the third `input`. + +```js +const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; +assert.equal(i(3), i(2)); +``` + +You should give different `name` attributes to the first `input` and the third `input`. + +```js +const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; +assert.notEqual(i(0), i(2)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md new file mode 100644 index 00000000000000..76a90a939ed16d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md @@ -0,0 +1,191 @@ +--- +id: 6145ed1f22caab087630aaad +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +To prevent unnecessary repetition, target the `before` pseudo-element of the `p` element, and give it a `content` property of `Question #`. + +# --hints-- + +You should use the `p::before` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('p::before')); +``` + +You should give the `p::before` pseudo-element a `content` property of `Question #`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, 'Question #'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md new file mode 100644 index 00000000000000..f60d6fccdd4fb6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md @@ -0,0 +1,232 @@ +--- +id: 6145ee65e2e1530938cb594d +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +The final section of this quiz will contain a dropdown, and a text box. + +Begin by nesting a `div` with a `class` of `formrow`, and nest four `div` elements inside of it, alternating their `class` attributes with `question-block` and `answer`. + +# --hints-- + +You should add one `div` element within the final `section`. + +```js +assert.exists(document.querySelector('section:nth-of-type(3) > div')); +``` + +You should give the first `div` a `class` of `formrow`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow'); +``` + +You should place `div.formrow` after the `h2` element. + +```js +assert.exists(document.querySelector('section:nth-of-type(3) > h2 + div.formrow')); +``` + +You should nest four `div` elements inside `div.formrow`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4); +``` + +You should give the first nested `div` a `class` of `question-block`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(1)')?.className, 'question-block'); +``` + +You should give the second nested `div` a `class` of `answer`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(2)')?.className, 'answer'); +``` + +You should give the third nested `div` a `class` of `question-block`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(3)')?.className, 'question-block'); +``` + +You should give the fourth nested `div` a `class` of `answer`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(4)')?.className, 'answer'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+--fcc-editable-region-- +
+

CSS

+ +
+--fcc-editable-region-- +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md new file mode 100644 index 00000000000000..fb91ee4674db61 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -0,0 +1,215 @@ +--- +id: 6145f02240ff8f09f7ec913c +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Within the `div.question-block` elements, nest one `label` element, and give the `label` elements text content + +# --hints-- + +You should nest one `label` element within the first `div.question-block` element. + +```js +assert.exists(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')); +``` + +You should nest one `label` element within the second `div.question-block` element. + +```js +assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')); +``` + +You should give the first `label` element text content. + +```js +assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1); +``` + +You should give the second `label` element text content. + +```js +assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.textContent?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+--fcc-editable-region-- +
+

CSS

+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md new file mode 100644 index 00000000000000..287ef625aad881 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md @@ -0,0 +1,250 @@ +--- +id: 6145f14f019a4b0adb94b051 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Within the first `div.answer` element, nest one required `select` element with three `option` elements. + +Give the first `option` element a `value` of `""`, and the text `Select an option`. Give the second `option` element a `value` of `yes`, and the text `Yes`. Give the third `option` element a `value` of `no`, and the text `No`. + +# --hints-- + +You should nest one `select` element within the first `div.answer` element. + +```js +assert.exists(document.querySelector('div.answer > select')); +``` + +You should nest three `option` elements within the `select` element. + +```js +assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3); +``` + +You should give the first `option` element a `value` of `""`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, ''); +``` + +You should give the first `option` element a text content of `Select an option`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option'); +``` + +You should give the second `option` element a `value` of `yes`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes'); +``` + +You should give the second `option` element a text content of `Yes`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes'); +``` + +You should give the third `option` element a `value` of `no`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no'); +``` + +You should give the third `option` element a text content of `No`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No'); +``` + +You should give the `select` an attribute of `required`. + +```js +assert.isTrue(document.querySelector('div.answer > select')?.required); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ +
+
+
+
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md new file mode 100644 index 00000000000000..032715a9ce7939 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md @@ -0,0 +1,222 @@ +--- +id: 6145f3a5cd9be60b9459cdd6 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Link the first `label` element to the `select` element, and give the `select` element a `name` attribute. + +# --hints-- + +You should give the `label` element a `for` attribute. + +```js +assert.notEmpty(document.querySelector('.question-block > label')?.htmlFor); +``` + +You should give the `select` element an `id` attribute. + +```js +assert.notEmpty(document.querySelector('.answer > select')?.id); +``` + +You should give the `select` element an `id` matching the `for` attribute of the `label` element. + +```js +assert.equal(document.querySelector('.answer > select')?.id, document.querySelector('.question-block > label')?.htmlFor); +``` + +You should give the `select` element a `name` attribute. + +```js +assert.notEmpty(document.querySelector('.answer > select')?.name); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+--fcc-editable-region-- +
+ +
+
+ +
+--fcc-editable-region-- +
+ +
+
+
+
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md new file mode 100644 index 00000000000000..7589d13e75b529 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md @@ -0,0 +1,229 @@ +--- +id: 6145f47393fbe70c4d885f9c +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Nest one `textarea` element within the second `div.answer` element, and set the number of rows and columns it has. + +Then, give the `textarea` placeholder text describing an example answer. + +# --hints-- + +You should nest one `textarea` element within the second `div.answer` element. + +```js +assert.exists(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')); +``` + +You should give the `textarea` a `rows` attribute with a number. + +```js +const rows = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('rows'); +assert.notEmpty(rows); +assert.isNotNaN(Number(rows)); +``` + +You should give the `textarea` a `cols` attribute with a number. + +```js +const cols = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('cols'); +assert.notEmpty(cols); +assert.isNotNaN(Number(cols)); +``` + +You should give the `textarea` a `placeholder` attribute with text describing an example answer. + +```js +assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('placeholder')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md new file mode 100644 index 00000000000000..e03dfc5613165f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md @@ -0,0 +1,217 @@ +--- +id: 6145f59029474c0d3dc1c8b8 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +As with the other `input` and `label` elements, link the `textarea` to its corresponding `label` element, and give it a `name` attribute. + +# --hints-- + +You should give the `label` element a `for` attribute. + +```js +assert.notEmpty(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor); +``` + +You should give the `textarea` element an `id` attribute matching the `for` attribute of the `label` element. + +```js +assert.equal(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor, document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id); +``` + +You should give the `textarea` element a `name` attribute. + +```js +assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+--fcc-editable-region-- +
+ +
+
+ +
+--fcc-editable-region-- +
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md new file mode 100644 index 00000000000000..124e24f12d62ac --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md @@ -0,0 +1,230 @@ +--- +id: 6145f685797bd30df9784e8c +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Do not forget to give your `form` a submit button. + +# --hints-- + +You should add either a `button` or `input` element. + +```js +assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input')); +``` + +You should place the submit within the `form` element. + +```js +assert.exists(document.querySelector('form > button') || document.querySelector('form > input')); +``` + +You should place the submit after the last `section` element. + +```js +assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input')); +``` + +You should give the submit a `type` of `submit`. + +```js +assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]')); +``` + +The submit should display the text `Submit`. + +```js +assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Submit'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+--fcc-editable-region-- +
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md new file mode 100644 index 00000000000000..c6826bb3163415 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md @@ -0,0 +1,215 @@ +--- +id: 6145f829ac6a920ebf5797d7 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Two final semantic HTML elements for this project are the `footer` and `address` elements. The `footer` element is a container for a collection of content that is related to the page, and the `address` element is a container for contact information for the author of the page. + +After the `main` element, add one `footer` element, and nest one `address` element within it. + +# --hints-- + +You should add one `footer` element after the `main` element. + +```js +assert.exists(document.querySelector('main + footer')); +``` + +You should nest one `address` element within the `footer` element. + +```js +assert.exists(document.querySelector('footer > address')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+--fcc-editable-region-- + +--fcc-editable-region-- + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md new file mode 100644 index 00000000000000..93fb537df6321c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md @@ -0,0 +1,220 @@ +--- +id: 6145f8f8bcd4370f6509078e +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Within the `address` element, add the following: + +```html +freeCodeCamp
+San Francisco
+California
+USA +``` + +You can visit, but you might not find anything... + +# --hints-- + +You should add the above text including the `
` tags to the `address` element. + +```js +assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+--fcc-editable-region-- +
+
+ +
+
+--fcc-editable-region-- + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md new file mode 100644 index 00000000000000..27280d1bbc8876 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md @@ -0,0 +1,229 @@ +--- +id: 6145fb5018cb5b100cb2a88c +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +The `address` element does not have to contain a physical geographical location. It can be used to provide a link to the subject. + +Wrap a link around the text `freeCodeCamp`, and set its location to `https://freecodecamp.org`. + +# --hints-- + +You should add an `a` element. + +```js +assert.exists(document.querySelector('address > a')); +``` + +You should give the `a` element a `href` attribute of `https://freecodecamp.org`. + +```js +assert.equal(document.querySelector('address > a')?.getAttribute('href'), 'https://freecodecamp.org'); +``` + +You should wrap the `a` element around the existing text `freeCodeCamp`. + +```js +assert.equal(document.querySelector('address > a')?.innerHTML, 'freeCodeCamp'); +assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g)?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+--fcc-editable-region-- +
+
+ freeCodeCamp
+ San Francisco
+ California
+ USA +
+
+--fcc-editable-region-- + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md new file mode 100644 index 00000000000000..5e2f843b679fb2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md @@ -0,0 +1,256 @@ +--- +id: 6145fc3707fc3310c277f5c8 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Back to styling the page. Select the list elements within the navigation bar, and give them the following styles: + +```css +color: #dfdfe2; +margin: 0 0.2rem; +padding: 0.2rem; +display: block; +``` + +# --hints-- + +You should use either the `nav li` or `nav > ul > li` selector. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('nav li') || gs('nav > ul > li')); +``` + +You should give the `li` elements a `color` of `#dfdfe2`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const color = gs('nav li')?.color ?? gs('nav > ul > li')?.color; +assert.equal(color, 'rgb(223, 223, 226)'); +``` + +You should give the `li` elements a `margin` of `0 0.2rem`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const margin = gs('nav li')?.margin ?? gs('nav > ul > li')?.margin; +assert.equal(margin, '0px 0.2rem'); +``` + +You should give the `li` elements a `padding` of `0.2rem`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const padding = gs('nav li')?.padding ?? gs('nav > ul > li')?.padding; +assert.equal(padding, '0.2rem'); +``` + +You should give the `li` elements a `display` of `block`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const display = gs('nav li')?.display ?? gs('nav > ul > li')?.display; +assert.equal(display, 'block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md new file mode 100644 index 00000000000000..3583c20af09507 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md @@ -0,0 +1,260 @@ +--- +id: 614796cb8086be482d60e0ac +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +On the topic of visual accessibility, contrast between elements is a key factor. For example, the contrast between the text and the background of a heading should be at least 4.5:1. + +Change the font color of all the anchor elements within the list elements to something with a contrast ratio of at least 7:1. + +# --hints-- + +You should use the `li > a` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('li > a')); +``` + +You should give the `a` element a `color` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('li > a')?.color); +``` + +You should give the `color` property a contrast with the background of at least 7:1. _Hint: I would use `#dfdfe2`_ + +```js +function luminance(r, g, b) { + const a = [r, g, b].map((v) => { + v /= 255; + return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 ); + }); + return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; +} +function contrast(rgb1, rgb2) { + const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]); + const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]); + const brightest = Math.max(lum1, lum2); + const darkest = Math.min(lum1, lum2); + return (brightest + 0.05) + / (darkest + 0.05); +} +const backgroundColour = [27, 27, 50]; + +for (let elem of document.querySelectorAll('li > a')) { + const a = getComputedStyle(elem)?.color; + const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/); + const aColour = [rgbA[1], rgbA[2], rgbA[3]]; + assert.isAtLeast(contrast(backgroundColour, aColour), 7); +} +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md new file mode 100644 index 00000000000000..4c25e837123060 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md @@ -0,0 +1,260 @@ +--- +id: 6147a14ef5668b5881ef2297 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +To make the navigation buttons look more like typical buttons, remove the underline from the anchor tags. + +Then, create a new selector targeting the navigation list elements so that when the cursor hovers over them, the background color and text color are switched, and the cursor becomes a pointer. + +# --hints-- + +You should use the existing `li > a` selector to set the `text-decoration` to `none`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('li > a')?.textDecoration, 'none'); +``` + +You should use either the `nav > ul > li:hover` or `nav li:hover` selector to style the elements on hover. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('nav > ul > li:hover') || gs('nav li:hover')); +``` + +You should give hovered `li` elements a `background-color` of `#dfdfe2`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const bgColor = gs('nav > ul > li:hover')?.backgroundColor ?? gs('nav li:hover')?.backgroundColor; +assert.equal(bgColor, 'rgb(223, 223, 226)'); +``` + +You should give hovered `li` elements a `color` of `#1b1b32`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const color = gs('nav > ul > li:hover')?.color ?? gs('nav li:hover')?.color; +assert.equal(color, 'rgb(27, 27, 50)'); +``` + +You should give hovered `li` elements a `cursor` of `pointer`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const cursor = gs('nav > ul > li:hover')?.cursor ?? gs('nav li:hover')?.cursor; +assert.equal(cursor, 'pointer'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +--fcc-editable-region-- + + +li > a { + color: inherit; +} +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md new file mode 100644 index 00000000000000..9bae839af7cb18 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md @@ -0,0 +1,253 @@ +--- +id: 614878f7a412310647873015 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Tidy up the `header`, by using _Flexbox_ to put space between the children, and vertically center them. + +Then, fix the `header` to the top of the viewport. + +# --hints-- + +You should give the `header` a `justify-content` of `space-between`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between'); +``` + +You should give the `header` an `align-items` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center'); +``` + +You should give the `header` a `position` of `fixed`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed'); +``` + +You should give the `header` a `top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + +} +--fcc-editable-region-- + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md new file mode 100644 index 00000000000000..23ebeabcaec15e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md @@ -0,0 +1,261 @@ +--- +id: 61487b77d4a37707073a64e5 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +When the screen width is small, the `h1` does not wrap its text content how it should. Align the text for the `h1` element in the center. + +Then, give the `main` padding such that the `Student Info` section header can be fully seen. + +# --hints-- + +You should give the `h1` a `text-align` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign, 'center'); +``` + +You should add a `main` selector to target the `main` element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('main')); +``` + +You should give the `main` a `padding-top` of at least `25px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('main')?.paddingTop?.replace(/\D+/, '')), 25); +``` + +You should only change the `padding-top` value. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingBottom); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingLeft); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +--fcc-editable-region-- +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + +} + + +--fcc-editable-region-- + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md new file mode 100644 index 00000000000000..e1455594b20a6b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md @@ -0,0 +1,275 @@ +--- +id: 61487da611a65307e78d2c20 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +On small screens, the unordered list in the navigation bar overflows the right side of the screen. + +Fix this by using _Flexbox_ to wrap the `ul` content. Then, set the following CSS properties to correctly align the text: + +```css +align-items: center; +padding-inline-start: 0; +margin-block: 0; +height: 100%; +``` + +# --hints-- + +You should give the `ul` a `flex-wrap` of `wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.flexWrap, 'wrap'); +``` + +You should give the `ul` an `align-items` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.alignItems, 'center'); +``` + +You should give the `ul` a `padding-inline-start` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.paddingInlineStart, '0px'); +``` + +You should give the `ul` a `margin-block` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.marginBlock, '0px'); +``` + +You should give the `ul` a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +--fcc-editable-region-- +nav > ul { + display: flex; + justify-content: space-evenly; + +} +--fcc-editable-region-- + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md new file mode 100644 index 00000000000000..3146be5669acac --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md @@ -0,0 +1,287 @@ +--- +id: 61487f703571b60899055cf9 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Set the width of the `section` elements to `80%` of their parent container. Then, use margins to center the `section` elements, adding `10px` to the bottom margin. + +Also, ensure the `section` elements cannot be larger than `600px` in width. + +# --hints-- + +You should use a `section` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('section')); +``` + +You should give the `section` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.width, '80%'); +``` + +You should give the `section` a `margin-top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginTop, '0px'); +``` + +You should give the `section` a `margin-right` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginRight, 'auto'); +``` + +You should give the `section` a `margin-bottom` of `10px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginBottom, '10px'); +``` + +You should give the `section` a `margin-left` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginLeft, 'auto'); +``` + +You should give the `section` a `max-width` of `600px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +--fcc-editable-region-- + + +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md new file mode 100644 index 00000000000000..77704b90c483b4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md @@ -0,0 +1,259 @@ +--- +id: 614880dc16070e093e29bc56 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Replace the top margin of the `h2` elements with `60px` of top padding. + +# --hints-- + +You should give the `h2` a `margin-top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.marginTop, '0px'); +``` + +You should give the `h2` a `padding-top` of `60px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +--fcc-editable-region-- +h2 { + border-bottom: 4px solid #dfdfe2; + +} +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md new file mode 100644 index 00000000000000..39f2636029035d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md @@ -0,0 +1,280 @@ +--- +id: 614883b6fa720e09fb167de9 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Add padding to the top and left of the `.info` elements, and set the other values to `0`. + +# --hints-- + +You should use the `.info` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.info')); +``` + +You should give `.info` a `padding-top` of at least `1px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1); +``` + +You should give `.info` a `padding-right` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px'); +``` + +You should give `.info` a `padding-bottom` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px'); +``` + +You should give `.info` a `padding-left` of at least `1px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingLeft?.replace(/\D+/, '')), 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md new file mode 100644 index 00000000000000..d0e5da638c1cc4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md @@ -0,0 +1,364 @@ +--- +id: 614884c1f5d6f30ab3d78cde +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Give the `.formrow` elements top margin, and left and right padding. The other padding values should be `0`. + +Then, increase the font size for all `input` elements. + +# --hints-- + +You should use a `.formrow` selector to target the `.formrow` elements. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.formrow')); +``` + +You should give the `.formrow` a `margin-top` of at least `1px`. + +```js +const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.marginTop; +let valInPx = 0; +if (/^\d+rem$/.test(val)) { + valInPx = remToPx(Number(val.replace('rem', ''))); +} else if (/^\d+em$/.test(val)) { + valInPx = emToPx(Number(val.replace('em', ''))); +} else { + valInPx = Number(val?.replace('px', '')); +} +function emToPx(em) { + return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); +} +function remToPx(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); +} +assert.isAtLeast(valInPx, 1); +``` + +You should give the `.formrow` a `padding-top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingTop, '0px'); +``` + +You should give the `.formrow` a `padding-right` of at least `1px`. + +```js +const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingRight; +let valInPx = 0; +if (/^\d+rem$/.test(val)) { + valInPx = remToPx(Number(val.replace('rem', ''))); +} else if (/^\d+em$/.test(val)) { + valInPx = emToPx(Number(val.replace('em', ''))); +} else { + valInPx = Number(val?.replace('px', '')); +} +function emToPx(em) { + return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); +} +function remToPx(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); +} +assert.isAtLeast(valInPx, 1); +``` + +You should give the `.formrow` a `padding-bottom` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingBottom, '0px'); +``` + +You should give the `.formrow` a `padding-left` of at least `1px`. + +```js +const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingLeft; +let valInPx = 0; +if (/^\d+rem$/.test(val)) { + valInPx = remToPx(Number(val.replace('rem', ''))); +} else if (/^\d+em$/.test(val)) { + valInPx = emToPx(Number(val.replace('em', ''))); +} else { + valInPx = Number(val?.replace('px', '')); +} +function emToPx(em) { + return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); +} +function remToPx(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); +} +assert.isAtLeast(valInPx, 1); +``` + +You should use an `input` selector to target the `input` elements. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('input')); +``` + +You should give the `input` a `font-size` greater than `13px`. + +```js +const val = new __helpers.CSSHelp(document).getStyle('input')?.fontSize; +let valInPx = 0; +if (/^\d+rem$/.test(val)) { + valInPx = remToPx(Number(val.replace('rem', ''))); +} else if (/^\d+em$/.test(val)) { + valInPx = emToPx(Number(val.replace('em', ''))); +} else { + valInPx = Number(val?.replace('px', '')); +} +function emToPx(em) { + return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); +} +function remToPx(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); +} +assert.isAtLeast(valInPx, 13); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md new file mode 100644 index 00000000000000..16b14e0adec64b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md @@ -0,0 +1,286 @@ +--- +id: 61488ecfd05e290b5712e6da +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +To make the first section look more inline, target only the `input` elements within `.info` elements, and set their `width` to `50%`, and left-align their text. + +# --hints-- + +You should use either the `.info input` or `.info > input` selector. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('.info input') || gs('.info > input')); +``` + +You should give the `input` elements a `width` of `50%`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width; +const width = gs('.info input') ?? gs('.info > input'); +assert.equal(width, '50%'); +``` + +You should give the `input` elements a `text-align` of `left`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign; +const textAlign = gs('.info input') ?? gs('.info > input'); +assert.equal(textAlign, 'left'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md new file mode 100644 index 00000000000000..e199c8e7cd7647 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md @@ -0,0 +1,291 @@ +--- +id: 6148d99cdc7acd0c519862cb +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Target all `label` elements within `.info` elements, and set their `width` to `10%`, and make it so they do not take up less than `55px`. + +# --hints-- + +You should use either the `.info label` or `.info > label` selector. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('.info label') || gs('.info > label')); +``` + +You should give the `label` elements a `width` of `10%`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width; +const width = gs('.info label') || gs('.info > label'); +assert.equal(width, '10%'); +``` + +You should give the `label` elements a `min-width` of `55px`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.minWidth; +const minWidth = gs('.info label') || gs('.info > label'); +assert.equal(minWidth, '55px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +--fcc-editable-region-- +.info input { + width: 50%; + text-align: left; +} + + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md new file mode 100644 index 00000000000000..e1587b3d5152c2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md @@ -0,0 +1,306 @@ +--- +id: 6148da157cc0bd0d06df5c0a +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +To align the `input` boxes with each other, set the `display` property to `inline-block` for all `input` and `label` elements within `.info` elements. + +Also, align the text to the right. + +# --hints-- + +You should use either a `.info > label, .info > input` or `.info label, .info input` selector. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('.info > label, .info > input') || gs('.info label, .info input') || gs('.info > input, .info > label') || gs('.info input, .info label')); +``` + +You should give the `input` and `label` elements a `display` of `inline-block`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.display; +const display = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label'); +assert.equal(display, 'inline-block'); +``` + +You should give the `input` and `label` elements a `text-align` of `right`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign; +const textAlign = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label'); +assert.equal(textAlign, 'right'); +``` + +You should set the `text-align: right` property before the `.info input` rule. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyleRule(s); +assert(gs('.info input').isDeclaredAfter('.info label, .info input') || gs('.info input').isDeclaredAfter('.info > label, .info > input') || gs('.info input').isDeclaredAfter('.info > input, .info > label') || gs('.info input').isDeclaredAfter('.info input, .info label')); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +--fcc-editable-region-- + + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md new file mode 100644 index 00000000000000..c5348085c09dc5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md @@ -0,0 +1,323 @@ +--- +id: 6148dc095264000dce348bf5 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +To neaten the `.question-block` elements, set the following CSS properties: + +```css +text-align: left; +display: block; +width: 100%; +margin-top: 20px; +padding-top: 5px; +``` + +# --hints-- + +You should use the `.question-block` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.question-block')); +``` + +You should give the `.question-block` element a `display` of `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.display, 'block'); +``` + +You should give the `.question-block` element a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.width, '100%'); +``` + +You should give the `.question-block` element a `margin-top` of `20px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.marginTop, '20px'); +``` + +You should give the `.question-block` element a `padding-top` of `5px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.paddingTop, '5px'); +``` + +You should give the `.question-block` element a `text-align` of `left`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAlign, 'left'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md new file mode 100644 index 00000000000000..4cc4b60c2fbec4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md @@ -0,0 +1,316 @@ +--- +id: 6148dcaaf2e8750e6cb4501a +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Make the paragraph elements appear as a higher priority, with the following CSS properties: + +```css +margin-top: 5px; +padding-left: 15px; +font-size: 20px; +``` + +# --hints-- + +You should use the `p` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('p')); +``` + +You should give the `p` element a `margin-top` of `5px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.marginTop, '5px'); +``` + +You should give the `p` element a `padding-left` of `15px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.paddingLeft, '15px'); +``` + +You should give the `p` element a `font-size` of `20px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md new file mode 100644 index 00000000000000..84d08d036d0d68 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md @@ -0,0 +1,312 @@ +--- +id: 6148dd31d210990f0fb140f8 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +It is useful to see the default border around the `fieldset` elements, during development. However, it might not be the style you want. + +Remove the border and bottom padding on the `.question` elements. + +# --hints-- + +You should use the `.question` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.question')); +``` + +You should give the `.question` a `border` of `none`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.borderStyle, 'none'); +``` + +You should give the `.question` a `padding-bottom` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBottom, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md new file mode 100644 index 00000000000000..9d4d4958398e79 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md @@ -0,0 +1,315 @@ +--- +id: 6148defa9c01520fb9d178a0 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Remove the default styling for the list items of `.answers-list`, and remove the unordered list padding. + +# --hints-- + +You should use the `.answers-list` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.answers-list')); +``` + +You should give `.answers-list` a `list-style` of `none`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.listStyle, 'none'); +``` + +You should give `.answers-list` a `padding` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md new file mode 100644 index 00000000000000..52246c8cf742dd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md @@ -0,0 +1,360 @@ +--- +id: 6148dfab9b54c110577de165 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Give the submit button a freeCodeCamp-style design, with the following CSS properties: + +```css +display: block; +margin: 40px auto; +width: 40%; +padding: 15px; +font-size: 23px; +background: #d0d0d5; +border: 3px solid #3b3b4f; +``` + +# --hints-- + +You should use the `button` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('button')); +``` + +You should give `button` a `display` of `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.display, 'block'); +``` + +You should give `button` a `margin` of `40px auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.margin, '40px auto'); +``` + +You should give `button` a `width` of `40%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.width, '40%'); +``` + +You should give `button` a `padding` of `15px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.padding, '15px'); +``` + +You should give `button` a `font-size` of `23px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.fontSize, '23px'); +``` + +You should give `button` a `background` of `#d0d0d5`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.backgroundColor, 'rgb(208, 208, 213)'); +``` + +You should give `button` a `border` of `3px solid #3b3b4f`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px solid rgb(59, 59, 79)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md new file mode 100644 index 00000000000000..5cccf1a4e927a4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md @@ -0,0 +1,336 @@ +--- +id: 6148e0bcc13efd10f7d7a6a9 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Set the `footer` background color to `#2a2a40`, and use _Flexbox_ to horizontally center the text. + +# --hints-- + +You should use the `footer` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('footer')); +``` + +You should give `footer` a `background-color` of `#2a2a40`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.backgroundColor, 'rgb(42, 42, 64)'); +``` + +You should give `footer` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.display, 'flex'); +``` + +You should give `footer` a `justify-content` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md new file mode 100644 index 00000000000000..82d36c40b2e809 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md @@ -0,0 +1,356 @@ +--- +id: 6148e161ecec9511941f8833 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Now, we cannot read the text. Target the `footer` and the anchor element within to set the font color to a color of adequate contrast ratio. + +# --hints-- + +You should use the `footer, footer a` selector. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('footer, footer a') || gs('footer a, footer')); +``` + +You should set the `color` to a value with a contrast ratio of at least `7:1`. _Hint: I suggest `#dfdfe2`_ + +```js +function luminance(r, g, b) { + const a = [r, g, b].map((v) => { + v /= 255; + return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 ); + }); + return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; +} +function contrast(rgb1, rgb2) { + const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]); + const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]); + const brightest = Math.max(lum1, lum2); + const darkest = Math.min(lum1, lum2); + return (brightest + 0.05) + / (darkest + 0.05); +} +const backgroundColour = [42, 42, 64]; + +const foot = getComputedStyle(document.querySelector('footer'))?.color; +const a = getComputedStyle(document.querySelector('footer a'))?.color; + +const rgbFoot = foot?.match(/(\d+),\s(\d+),\s(\d+)/); +const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/); +const footColour = [rgbFoot[1], rgbFoot[2], rgbFoot[3]]; +const aColour = [rgbA[1], rgbA[2], rgbA[3]]; +assert.isAtLeast(contrast(backgroundColour, footColour), 7); +assert.isAtLeast(contrast(backgroundColour, aColour), 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md new file mode 100644 index 00000000000000..8759db97cec2d2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md @@ -0,0 +1,359 @@ +--- +id: 6148e28706b34912340fd042 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Horizontally center all the text within the `address` element, and add some padding. + +# --hints-- + +You should use the `address` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('address')); +``` + +You should give `address` a `text-align` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('address')?.textAlign, 'center'); +``` + +You should give `address` a `padding-top` of at least `1px`. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-top')?.replace(/\D\D+/, '')), 1); +``` + +You should give `address` a `padding-right` of at least `1px`. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-right')?.replace(/\D\D+/, '')), 1); +``` + +You should give `address` a `padding-bottom` of at least `1px`. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-bottom')?.replace(/\D\D+/, '')), 1); +``` + +You should give `address` a `padding-left` of at least `1px`. + +```js +assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-left')?.replace(/\D\D+/, '')), 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md new file mode 100644 index 00000000000000..71114f25000a0e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md @@ -0,0 +1,342 @@ +--- +id: 6148e335c1edd512d00e4691 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Clicking on the navigation links should jump the viewport to the relevant section. However, this jumping can be disorienting for some users. + +Select all elements, and set the `scroll-behavior` to `smooth`. + +# --hints-- + +You should use the `*` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +You should give `*` a `scroll-behavior` of `smooth`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smooth'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md new file mode 100644 index 00000000000000..b879f3d90df53d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md @@ -0,0 +1,350 @@ +--- +id: 6148e41c728f65138addf9cc +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Setting the `scroll-behavior` to `smooth` is preferred by most users. However, some users find this to be too slow, and prefer to have the scrolling happen instantaneously. + +There exists a media rule to set CSS based on the user's browser settings. This media rule is called `prefers-reduced-motion`, and expects one of the following values: + +- `reduce` +- `no-preference` + +Wrap the appropriate rule within a `prefers-reduced-motion` media rule such that a `scroll-behavior` of `smooth` is only set if the user's browser setting is `no-preference`. + +# --hints-- + +You should have a `@media (prefers-reduced-motion: no-preference)` rule. + +```js +assert.exists(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')); +``` + +You should wrap the existing `*` rule within the `@media` rule. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')?.find(x => x.selectorText === '*')?.style?.scrollBehavior, 'smooth'); +assert.notExists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +--fcc-editable-region-- +* { + scroll-behavior: smooth; +} +--fcc-editable-region-- + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md new file mode 100644 index 00000000000000..9ec5528931b30a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md @@ -0,0 +1,685 @@ +--- +id: 6148e5aeb102e3142de026a2 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Finally, the navigation accessibility can be improved by providing keyboard shortcuts. + +The `accesskey` attribute accepts a space-separated list of access keys. For example: + +```html + +``` + +Give each of the navigation links a single-letter access key. + +_Note: It is not always advised to use access keys, but they can be useful_ + +Well done. You have completed the _Accessibility Quiz_ practice project. + +# --hints-- + +You should give the first `a` element a single-letter `accesskey`. + +```js +assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('accesskey')?.length, 1); +``` + +You should give the second `a` element a single-letter `accesskey`. + +```js +assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('accesskey')?.length, 1); +``` + +You should give the third `a` element a single-letter `accesskey`. + +```js +assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +@media (prefers-reduced-motion: no-preference) { + * { + scroll-behavior: smooth; + } +} + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` + +## --solutions-- + +```html + + + + + + + + Accessibility Quiz + + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+ +
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +@media (prefers-reduced-motion: no-preference) { + * { + scroll-behavior: smooth; + } +} + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: fixed; + background-color: #1b1b32; + top: 0; +} + +#logo { + width: max(100px, 18vw); + aspect-ratio: 35 / 4; + max-height: 100%; + background-color: #0a0a23; + padding: 0.4rem; +} + +h1 { + text-align: center; + font-size: min(5vw, 1.2em); + color: #f1be32; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + display: block; + margin: 0 0.2rem; + color: #dfdfe2; + padding: 0.2rem; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0px auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + + +.info { + margin: 0 auto; + padding: 10px 0 0 5px; +} +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, +.info input { + display: inline-block; + text-align: right; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.info input { + width: 50%; + text-align: left; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md new file mode 100644 index 00000000000000..1e2c64c4084e96 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md @@ -0,0 +1,50 @@ +--- +id: 614ccc21ea91ef1736b9b578 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Welcome to the first part of the Accessibility Quiz. As you are becoming a seasoned HTML and CSS developer, we have started you off with the basic boilerplate. + +Start this accessibility journey by providing a `lang` attribute to your `html` element. This will assist screen readers in identifying the language of the page. + +# --hints-- + +You should give the `html` element a `lang` attribute. _Hint: You can use the value `en` for English._ + +```js +assert.match(code, //i); +// TODO: This should/could be fixed in the builder.js +// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + + + + + + + + +--fcc-editable-region-- + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md new file mode 100644 index 00000000000000..513e9a316772f1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md @@ -0,0 +1,47 @@ +--- +id: 5f331e55dfab7a896e53c3a1 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +The `title` is one of several elements that provide extra information not visible on the web page, but it is useful for search engines or how the page gets displayed. + +Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page. Note that `meta` elements are self-closing. + +# --hints-- + +You should have a `meta` tag. + +```js +assert(code.match(//is)); +``` + +Your `meta` tag should have a `charset` attribute. + +```js +assert(code.match(/ + +--fcc-editable-region-- + + Cafe Menu + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md new file mode 100644 index 00000000000000..a948eaa99f1726 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md @@ -0,0 +1,54 @@ +--- +id: 5f3326b143638ee1a09ff1e3 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +To prepare to create some actual content, add a `body` element below the `head` element. + +# --hints-- + +You should have an opening `` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `` tag. + +```js +assert(code.match(/<\/body>/i)); +``` + +You should not change your `head` element. Make sure you did not delete your closing tag. + +```js +assert(code.match(//i)); +assert(code.match(/<\/head>/i)); +``` + +Your `body` element should come after your `head` element. + +```js +assert(code.match(/<\/head>[.\n\s]*/im)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Cafe Menu + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md new file mode 100644 index 00000000000000..b674d026c4c411 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md @@ -0,0 +1,60 @@ +--- +id: 5f33294a6af5e9188dbdb8f3 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +The name of the cafe is `CAMPER CAFE`. Add an `h1` element within your `body` element. Give it the name of the cafe in capitalized letters to make it stand out. + +# --hints-- + +You should have an opening `

` tag. + +```js +assert(code.match(/

/i)); +``` + +You should have a closing `

` tag. + +```js +assert(code.match(/<\/h1>/i)); +``` + +You should not change your existing `body` element. + +```js +assert($('body').length === 1); +``` + +Your `h1` element should be nested in your `body` element. + +```js +assert($('h1')[0].parentElement.tagName === "BODY"); +``` + +Your `h1` element should have the text `CAMPER CAFE`. + +```js +assert(code.match(/

CAMPER CAFE<\/h1>/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md new file mode 100644 index 00000000000000..4c0e60cd610c78 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md @@ -0,0 +1,62 @@ +--- +id: 5f332a88dc25a0fd25c7687a +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +To let visitors know the cafe was founded in 2020, add a `p` element below the `h1` element with the text `Est. 2020`. + +# --hints-- + +You should have an opening `

` tag. + +```js +assert(code.match(/

/i)); +``` + +You should have a closing `

` tag. + +```js +assert(code.match(/<\/p>/i)); +``` + +You should not change your existing `h1` element. Make sure you did not delete the closing tag. + +```js +assert($('h1').length === 1); +``` + +Your `p` element should be below your `h1` element. + +```js +assert($('p')[0].previousElementSibling.tagName === 'H1'); +``` + +Your `p` element should have the text `Est. 2020`. + +```js +assert(code.match(/

Est. 2020<\/p>/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + + +--fcc-editable-region-- +

CAMPER CAFE

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md new file mode 100644 index 00000000000000..3c8c226c1e7996 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md @@ -0,0 +1,59 @@ +--- +id: 5f332b23c2045fb843337579 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Since the `p` element added in the previous step provides supplemental information about the cafe, nest both the `h1` and `p` elements in a `header` element. + +# --hints-- + +You should have an opening `
` tag. + +```js +assert(code.match(/
/i)); +``` + +You should have a closing `
` tag. + +```js +assert(code.match(/<\/header>/i)); +``` + +Your `h1` element should be nested in your `header` element. + +```js +const header = document.querySelectorAll('header')[0]; +assert(header.children[0].tagName === 'H1'); +``` + +Your `p` element should be nested in your `header` element. + +```js +const header = document.querySelectorAll('header')[0]; +assert(header.children[1].tagName === "P"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + + +--fcc-editable-region-- +

CAMPER CAFE

+

Est. 2020

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md new file mode 100644 index 00000000000000..7e35bbf41699d6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md @@ -0,0 +1,59 @@ +--- +id: 5f33310c1851c6c4da013250 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +It's time to add some menu content. Add a `main` element below the existing `header` element. It will eventually contain pricing information about coffee and desserts offered by the cafe. + +# --hints-- + +Your code should have an opening `
` tag. + +```js +assert(code.match(/
/i)); +``` + +Your code should have a closing `
` tag. + +```js +assert(code.match(/<\/main>/i)); +``` + +You should not change your `header` element. Make sure you don't accidentally delete your closing tag. + +```js +assert($('header').length === 1); +``` + +Your `main` tag should come after your `header` tag. + +```js +const main = document.querySelectorAll('main')[0]; +assert(main.previousElementSibling.tagName === 'HEADER'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + + +--fcc-editable-region-- +
+

CAMPER CAFE

+

Est. 2020

+
+--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md new file mode 100644 index 00000000000000..127042fa73f708 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md @@ -0,0 +1,71 @@ +--- +id: 5f344f9c805cd193c33d829c +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +You can add style to an element by specifying it in the `style` element and setting a property for it like this: + +```css +element { + property: value; +} +``` + +Center your `h1` element by setting its `text-align` property to the value `center`. + +# --hints-- + +You should have an `h1` selector in your `style` element. + +```js +const hasSelector = new __helpers.CSSHelp(document).getStyle('h1'); +assert(hasSelector); +``` + +Your `text-align` property should have a value of `center`. + +```js +const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'center'); +assert(hasTextAlign); +``` + +Your `h1` selector should set the `text-align` property to `center`. + +```js +const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align'); +assert(h1TextAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md new file mode 100644 index 00000000000000..dbfd19f30d9e6a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md @@ -0,0 +1,57 @@ +--- +id: 5f344fad8bf01691e71a30eb +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Up until now, you have been limited regarding the presentation and appearance of the content you create. To start taking control, add a `style` element within the `head` element. + +# --hints-- + +Your code should have an opening `` tag. + +```js +assert(code.match(/<\/style\s*>/)); +``` + +Your `style` element should be nested in your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i)) +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Cafe Menu + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md new file mode 100644 index 00000000000000..c6e75ade616085 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md @@ -0,0 +1,70 @@ +--- +id: 5f344fbc22624a2976425065 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Create an `h2` element in the `section` element and give it the text `Coffee`. + +# --hints-- + +You should have an opening `

` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `

` tag. + +```js +assert(code.match(/<\/h2\s*>/i)); +``` + +You should not change your existing `section` element. Make sure you did not delete the closing tag. + +```js +assert($('section').length === 1); +``` + +Your `h2` element should be within your `section` element. + +```js +const h2 = document.querySelector('h2'); +assert(h2.parentElement.tagName === 'SECTION'); +``` + +Your `h2` element should have the text `Coffee`. + +```js +const h2 = document.querySelector('h2'); +assert(h2.innerText === 'Coffee'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md new file mode 100644 index 00000000000000..d8e30eb293500e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md @@ -0,0 +1,61 @@ +--- +id: 5f344fc1520b6719f2e35605 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +There will be two sections on the menu, one for coffees and one for desserts. Add a `section` element within the `main` element so you have a place to put all the coffees available. + +# --hints-- + +You should have an opening `
` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `
` tag. + +```js +assert(code.match(/<\/section\s*>/i)); +``` + +You should not change your existing `main` element. Make sure you didn't delete the closing tag. + +```js +assert($('main').length === 1); +``` + +Your `section` element should be within your `main` element. + +```js +const main = document.querySelectorAll('main')?.[0]; +assert(main.children[0].tagName === 'SECTION'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + + +
+

CAMPER CAFE

+

Est. 2020

+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md new file mode 100644 index 00000000000000..86db9ec58001fa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md @@ -0,0 +1,73 @@ +--- +id: 5f3477ae34c1239cafe128be +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +You now have three type selectors with the exact same styling. You can add the same group of styles to many elements by separating the selectors with commas like this: + +```css +selector1, selector2 { + property: value; +} +``` + +Use a single type selector to center the `h1`, `h2` and `p` elements at the same time. + +# --hints-- + +You should use a single type selector for all three elements, `h1, h2, p`. Be sure to use that order. + +```js +const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p'); +assert(hasSelector); +``` + +You should only have one selector in your `style` element. + +```js +const selectors = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.selectorText) +assert(selectors.length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md new file mode 100644 index 00000000000000..eeb15e2e618e55 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md @@ -0,0 +1,67 @@ +--- +id: 5f3477ae8466a9a3d2cc953c +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now that you have the CSS in the `styles.css` file, go ahead and remove the `style` element and all its content. Once it is removed, the text that was centered will shift back to the left. + +# --hints-- + +You should not have any `style` tags in your code. + +```js +assert(!code.match(/style/i)); +``` + +You should not have any CSS selectors in your HTML file. + +```js +(getUserInput) => { + const html = getUserInput('editableContents'); + assert(!html.includes('style')); + assert(!html.includes('text-align')); +} +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Cafe Menu + + +--fcc-editable-region-- + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + +```css +h1, h2, p { + text-align: center; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md new file mode 100644 index 00000000000000..d769760c199fae --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md @@ -0,0 +1,87 @@ +--- +id: 5f3477ae9675db8bb7655b30 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +In the previous step, you used a type selector to style the `h1` element. Go ahead and center the `h2` and `p` elements with a new type selector for each one. + +# --hints-- + +You should not change the existing `h1` selector. + +```js +const hasH1 = new __helpers.CSSHelp(document).getStyle('h1'); +assert(hasH1); +``` + +You should add a new `h2` selector. + +```js +const hasH2 = new __helpers.CSSHelp(document).getStyle('h2'); +assert(hasH2); +``` + +You should add a new `p` selector. + +```js +const hasP = new __helpers.CSSHelp(document).getStyle('p'); +assert(hasP); +``` + +Your `h1` element should have a `text-align` of `center`. + +```js +const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align'); +assert(h1TextAlign === 'center'); +``` + +Your `h2` element should have a `text-align` of `center`. + +```js +const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align'); +assert(h2TextAlign === 'center'); +``` + +Your `p` element should have a `text-align` of `center`. + +```js +const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align'); +assert(pTextAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md new file mode 100644 index 00000000000000..c91fab2553fb92 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md @@ -0,0 +1,77 @@ +--- +id: 5f3477aefa51bfc29327200b +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +You have styled three elements by writing CSS inside the `style` tags. This works, but since there will be many more styles, it's best to put all the styles in a separate file and link to it. + +We have created a separate `styles.css` file for you and switched the editor view to that file. You can change between files with the tabs at the top of the editor. + +Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags. + +# --hints-- + +Your `styles.css` file should have the `h1, h2, p` type selector. + +```js +(getUserInput) => { + assert(getUserInput('editableContents').replace(/[\s\n]*/g, "").match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/)); +} +``` + +Your selector should set the `text-align` property to `center`. + +```js +(getUserInput) => { + assert(getUserInput('editableContents').match(/text-align:\s*center;?/)); +} +``` + +You should only have one selector. + +```js +(getUserInput) => { + assert(getUserInput('editableContents').match(/text-align:\s*center;?/)?.length === 1); +} +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md new file mode 100644 index 00000000000000..f2af63ca109be9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -0,0 +1,89 @@ +--- +id: 5f3477cb2e27333b1ab2b955 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Now you need to link the `styles.css` file so the styles will be applied again. Nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. + +# --hints-- + +Your code should have a `link` element. + +```js +// link is removed -> if exists, replaced with style +const link = document.querySelector('head > style'); +assert(link); +``` + +You should not change your existing `head` element. Make sure you did not delete the closing tag. + +```js +assert($('head').length === 1); +``` + +Your `link` element should be a self-closing element. + +```js +assert(code.match(//i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert(code.match(/rel=('|")stylesheet\1/i)); +``` + +Your `link` element should have a `type` attribute with the value `text/css`. + +```js +assert(code.match(/type=('|")text\/css\1/i)); +``` + +Your `link` element should have an `href` attribute with the value `styles.css`. + +```js +assert(code.match(/href=('|")styles.css\1/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Cafe Menu + +--fcc-editable-region-- + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + +```css +h1, h2, p { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md new file mode 100644 index 00000000000000..d160b6a7ec8b86 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md @@ -0,0 +1,70 @@ +--- +id: 5f3477cb303c5cb61b43aa9b +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +The text is centered again so the link to the CSS file is working. Add another style to the file that changes the `background-color` property to `brown` for the `body` element. + +# --hints-- + +You should use a `body` selector. + +```js +const hasBody = new __helpers.CSSHelp(document).getStyle('body'); +assert(hasBody); +``` + +You should set the `background-color` property to `brown`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown'); +assert(hasBackground); +``` + +Your `body` element should have a `brown` background. + +```js +const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color'); +assert(bodyBackground === 'brown'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + +```css +--fcc-editable-region-- +h1, h2, p { + text-align: center; +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md new file mode 100644 index 00000000000000..fad3c0ca42c26f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md @@ -0,0 +1,72 @@ +--- +id: 5f3477cbcb6ba47918c1da92 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +For the styling of the page to look similar on mobile as it does on a desktop or laptop, you need to add a `meta` element with a special `content` attribute. + +Add the following within the `head` element: + +```html + +``` + +# --hints-- + +Your code should have two `meta` elements. + +```js +assert(code.match(//g).length === 2); +``` + +Your `meta` element should have a `name` attribute with a value of `viewport`. + +```js +const meta = $('meta'); +assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/)); +``` + +Your `meta` element should have a `content` attribute with a value of `width=device-width, initial-scale=1.0`. + +```js +const meta = $('meta'); +assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Cafe Menu + + +--fcc-editable-region-- + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + +```css +h1, h2, p { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md new file mode 100644 index 00000000000000..0f5b925b09eac0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md @@ -0,0 +1,64 @@ +--- +id: 5f34a1fd611d003edeafd681 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +That brown background makes it hard to read the text. Change the `body` element's background color to be `burlywood` so it has some color but you are still be able to read the text. + +# --hints-- + +You should set the `background-color` property to `burlywood`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood'); +assert(hasBackground); +``` + +Your `body` element should have a `burlywood` background. + +```js +const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color'); +assert(bodyBackground === 'burlywood'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + +```css +--fcc-editable-region-- +body { + background-color: brown; +} +--fcc-editable-region-- +h1, h2, p { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md new file mode 100644 index 00000000000000..1856677d582df6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md @@ -0,0 +1,74 @@ +--- +id: 5f356ed60785e1f3e9850b6e +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Now it's easy to see that the text is centered inside the `div` element. Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`). + +# --hints-- + +You should set the `width` property to `80%`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%'); +assert(hasWidth); +``` + +You should not have a `width` property of `300px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px'); +assert(!hasWidth); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} +--fcc-editable-region-- +div { + width: 300px; + background-color: burlywood; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md new file mode 100644 index 00000000000000..100245544daded --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md @@ -0,0 +1,79 @@ +--- +id: 5f356ed60a5decd94ab66986 +title: Step 23 +challengeType: 0 +removeComments: false +dashedName: step-23 +--- + +# --description-- + +Comments in CSS look like this: + +```css +/* comment here */ +``` + +In your style sheet, comment out the the line containing the `background-color` property and value, so you can see the effect of only styling `div` element. This will make the background white again. + +# --hints-- + +You should comment out the `background-color: burlywood;` line in your CSS. + +```js +assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i)); +``` + + +Your `body` should have a white background. + +```js +const bodyCSS = $('body').css('background-color'); +assert(bodyCSS === "rgba(0, 0, 0, 0)") +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { +--fcc-editable-region-- + background-color: burlywood; +--fcc-editable-region-- +} + +h1, h2, p { + text-align: center; +} + +div { + width: 300px; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md new file mode 100644 index 00000000000000..3fd01dfbbbfa81 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md @@ -0,0 +1,85 @@ +--- +id: 5f356ed6199b0cdef1d2be8f +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +So far you have been using type selectors to style elements. A class selector is defined by a name with a dot directly in front it, like this: + +```css +.class-name { + styles +} +``` + +Change the existing `div` selector into a class selector by replacing `div` with a class named `menu`. + +# --hints-- + +You should have a `.menu` class selector. + +```js +const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu'); +assert(hasMenu); +``` + +You should not have a `div` selector. + +```js +const hasDiv = new __helpers.CSSHelp(document).getStyle('div'); +assert(!hasDiv); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +div { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md new file mode 100644 index 00000000000000..8a66f3a4416388 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md @@ -0,0 +1,76 @@ +--- +id: 5f356ed63c7807a4f1e6d054 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +The goal now is to make the `div` not take up the entire width of the page. The CSS `width` property is perfect for this. Create a new type selector in the style sheet that gives your `div` element a width of `300px`. + +# --hints-- + +You should have a `div` type selector. + +```js +const hasDiv = new __helpers.CSSHelp(document).getStyle('div'); +assert(hasDiv); +``` + +You should set the `width` property to `300px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px'); +assert(hasWidth); +``` + +Your `div` should have a width of 300px. + +```js +const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width'); +assert(divWidth === '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +--fcc-editable-region-- +body { + background-color: burlywood; +} + +h1, h2, p { + text-align: center; +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md new file mode 100644 index 00000000000000..a7a1d36b1ecb59 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md @@ -0,0 +1,74 @@ +--- +id: 5f356ed63e0fa262326eef05 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Now make the background color of the `div` element to be `burlywood`. + +# --hints-- + +You should set the `background-color` property to `burlywood`. + +```js +const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood'); +assert(hasBackgroundColor); +``` + +Your `div` should have a burlywood background. + +```js +const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color'); +assert(divBackground === 'burlywood'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +div { + width: 300px; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md new file mode 100644 index 00000000000000..d77a93570d057c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md @@ -0,0 +1,83 @@ +--- +id: 5f356ed656a336993abd9f7c +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Next, you want to center the `div` horizontally. You can do this by setting its `margin-left` and `margin-right` properties to `auto`. Think of the margin as invisible space around an element. Using these two margin properties, center the `div` element within the `body` element. + +# --hints-- + +You should set the `margin-left` property to `auto`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-left'] === 'auto'); +assert(hasMargin); +``` + +You should set the `margin-right` property to `auto`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-right'] === 'auto'); +assert(hasMargin); +``` + +You should set the `margin-left` and `margin-right` properties of your `div` to `auto`. + +```js +const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right'); +const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left'); +assert(divMarginRight === 'auto'); +assert(divMarginLeft === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +div { + width: 80%; + background-color: burlywood; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md new file mode 100644 index 00000000000000..609f19c13ff732 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md @@ -0,0 +1,75 @@ +--- +id: 5f356ed69db0a491745e2bb6 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +To apply the class's styling to the `div` element, add a `class` attribute to the `div` element's opening tag and set its value to `menu`. + +# --hints-- + +Your `div` should still render. Make sure you haven't malformed the `
` tag. + +```js +assert($('div').length === 1); +``` + +Your `div` element should have the `menu` class. + +```js +assert($('div').attr('class').includes('menu')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +--fcc-editable-region-- +
+--fcc-editable-region-- +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md new file mode 100644 index 00000000000000..9332a9aa232289 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md @@ -0,0 +1,77 @@ +--- +id: 5f356ed6cf6eab5f15f5cfe6 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a `div` element inside the `body` element and then move all the other elements inside the new `div`. + +# --hints-- + +You should have an opening `
` tag. + +```js +assert(code.match(/
/i)); +``` + +You should have a closing `
` tag. + +```js +assert(code.match(/<\/div>/i)); +``` + +You should not change your existing `body` element. Make sure you did not delete the closing tag. + +```js +assert($('body').length === 1); +``` + +Your `div` tag should be nested in the `body`. + +```js +const div = $('div')[0]; +assert(div.parentElement.tagName === 'BODY'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + +--fcc-editable-region-- + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ +--fcc-editable-region-- + +``` + +```css +body { + background-color: burlywood; +} + +h1, h2, p { + text-align: center; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md new file mode 100644 index 00000000000000..17627541adfe49 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md @@ -0,0 +1,86 @@ +--- +id: 5f35e5c4321f818cdc4bed30 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +It’s looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffee` heading. It will contain a flavor and price of each coffee you currently offer. + +# --hints-- + +You should have an opening `
` tag. + +```js +assert(code.match(/
/i)); +``` + +You should have a closing `
` tag. + +```js +assert(code.match(/<\/article>/i)); +``` + +You should not change the existing `h2` element. + +```js +assert($('h2').length === 1); +``` + +Your `article` element should come after your `h2` element. + +```js +const article = $('article')[0]; +assert(article.previousElementSibling.tagName === 'H2'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+--fcc-editable-region-- +

Coffee

+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md new file mode 100644 index 00000000000000..18e62d8d138877 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md @@ -0,0 +1,92 @@ +--- +id: 5f35e5c44359872a137bd98f +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Since the cafe's main product for sale is coffee, you could use an image of coffee beans for the background of the page. + +Delete the comment and its contents inside the `body` type selector. Now add a `background-image` property and set its value to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`. + +# --hints-- + +You should remove the commented out `background-color` property. + +```js +assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i)) +``` + +Your `body` selector should not have any comments. + +```js +assert(!code.match(/body\s*{\s*\/\*/i)); +``` + +You should set the `background-image` property to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`) +assert(hasBackground) +``` + +Your `body` element should have the coffee beans background image. + +```js +const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image'); +console.log(bodyBackground); +assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { +--fcc-editable-region-- + /* + background-color: burlywood; + */ +--fcc-editable-region-- +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md new file mode 100644 index 00000000000000..b67c34ea357a49 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md @@ -0,0 +1,107 @@ +--- +id: 5f3c866d0fc037f7311b4ac8 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +That's closer, but the price didn't stay over on the right. This is because `inline-block` elements only take up the width of their content. To spread them out, add a `width` property to the `flavor` and `price` class selectors that have a value of `50%` each. + +# --hints-- + +You should set the `width` property to `50%` in your `.flavor` selector. + +```js +const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); +assert(flavorWidth === '50%'); +``` + +You should set the `width` property to `50%` in your `.price` selector. + +```js +const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); +assert(priceWidth === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +--fcc-editable-region-- +.flavor { + text-align: left; +} + +.price { + text-align: right; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md new file mode 100644 index 00000000000000..21fb53f2de5504 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md @@ -0,0 +1,100 @@ +--- +id: 5f3c866d28d7ad0de6470505 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +The flavors and prices are currently stacked on top of each other and centered with their respective `p` elements. It would be nice if the flavor was on the left and the price was on the right. + +Add the class name `flavor` to the `French Vanilla` `p` element. + +# --hints-- + +You should add the `flavor` class to your `p` element. + +```js +assert(code.match(//i)); +``` + +You should only have one element with the `flavor` class. + +```js +assert($('.flavor').length === 1); +``` + +Your `flavor` class should be on the `p` element with the text `French Vanilla`. + +```js +assert($('.flavor')[0].innerText.match(/French Vanilla/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+--fcc-editable-region-- +

French Vanilla

+

3.00

+--fcc-editable-region-- +
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md new file mode 100644 index 00000000000000..e3d3a54656c273 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md @@ -0,0 +1,128 @@ +--- +id: 5f3c866d5414453fc2d7b480 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Starting below the existing coffee/price pair, add the following coffee and prices using `article` elements with two nested `p` elements inside each. As before, the first `p` element's text should contain the coffee flavor and the second `p` element's text should contain the price. + +```bash +Caramel Macchiato 3.75 +Pumpkin Spice 3.50 +Hazelnut 4.00 +Mocha 4.50 +``` + +# --hints-- + +You should have five `article` elements. + +```js +assert($('article').length === 5); +``` + +Each `article` element should have two `p` elements. + +```js +const articles = $('article'); +assert(articles[0].children.length === 2); +assert(articles[1].children.length === 2); +assert(articles[2].children.length === 2); +assert(articles[3].children.length === 2); +assert(articles[4].children.length === 2); +``` + +Your first `article` element should have `p` elements with the text `French Vanilla` and `3.00`. + +```js +const children = $('article')[0].children; +assert(children[0].innerText.match(/French Vanilla/i)); +assert(children[1].innerText.match(/3\.00/i)); +``` + +Your second `article` element should have `p` elements with the text `Caramel Macchiato` and `3.75`. + +```js +const children = $('article')[1].children; +assert(children[0].innerText.match(/Caramel Macchiato/i)); +assert(children[1].innerText.match(/3\.75/i)); +``` + +Your third `article` element should have `p` elements with the text `Pumpkin Spice` and `3.50`. + +```js +const children = $('article')[2].children; +assert(children[0].innerText.match(/Pumpkin Spice/i)); +assert(children[1].innerText.match(/3\.50/i)); +``` + +Your fourth `article` element should have `p` elements with the text `Hazelnut` and `4.00`. + +```js +const children = $('article')[3].children; +assert(children[0].innerText.match(/Hazelnut/i)); +assert(children[1].innerText.match(/4\.00/i)); +``` + +Your fifth `article` element should have `p` elements with the text `Mocha` and `4.50`. + +```js +const children = $('article')[4].children; +assert(children[0].innerText.match(/Mocha/i)); +assert(children[1].innerText.match(/4\.50/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+--fcc-editable-region-- +
+

French Vanilla

+

3.00

+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md new file mode 100644 index 00000000000000..0c996c720a714a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md @@ -0,0 +1,88 @@ +--- +id: 5f3c866daec9a49519871816 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +`article` elements commonly contain multiple elements that have related information. In this case, it will contain a coffee flavor and a price for that flavor. Nest two `p` elements inside your `article` element. The first one's text should be `French Vanilla`, and the second's text `3.00`. + +# --hints-- + +You should not change the existing `article` element. + +```js +assert($('article').length === 1); +``` + +Your `article` element should have two `p` elements. + +```js +assert($('article').children('p').length === 2); +``` + +Your first `p` element should have the text `French Vanilla`. + +```js +const firstP = $('article').children('p')[0]; +assert(firstP.innerText.match(/French Vanilla/i)); +``` + +Your second `p` element should have the text `3.00`. + +```js +const secondP = $('article').children('p')[1]; +assert(secondP.innerText.match(/3\.00/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md new file mode 100644 index 00000000000000..0f0667fcf82a29 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md @@ -0,0 +1,117 @@ +--- +id: 5f3c866dbf362f99b9a0c6d0 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +The `p` elements are nested in an `article` element with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this: + +```css +.item p { } +``` + +Using the above selector, add a `display` property with value `inline-block` so the `p` elements behave more like `inline` elements. + +# --hints-- + +You should use the `.item p` selector. + +```js +const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p'); +assert(hasItemP); +``` + +You should set the `display` property to `inline-block`. + +```js +const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block'); +assert(hasDisplay); +``` + +Your `.item p` selector should set the `display` property to `inline-block`. + +```js +const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display'); +assert(itemPDisplay === 'inline-block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.flavor { + text-align: left; +} + +.price { + text-align: right; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md new file mode 100644 index 00000000000000..7c60b65d7f728a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md @@ -0,0 +1,111 @@ +--- +id: 5f3c866dd0d0275f01d4d847 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Well that did not work. Styling the `p` elements as `inline-block` and placing them on separate lines in the code creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p` element's width a little less than `50%`. + +Change the `width` value to `49%` for each class to see what happens. + +# --hints-- + +You should set the `width` property to `49%` in your `.flavor` selector. + +```js +const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); +assert(flavorWidth === '49%'); +``` + +You should set the `width` property to `49%` in your `.price` selector. + +```js +const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); +assert(priceWidth === '49%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +--fcc-editable-region-- +.flavor { + text-align: left; + width: 50%; +} + +.price { + text-align: right; + width: 50%; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md new file mode 100644 index 00000000000000..ba075075c17109 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md @@ -0,0 +1,108 @@ +--- +id: 5f3c866de7a5b784048f94b1 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +That is kind of what you want, but now it would be nice if the flavor and price were on the same line. `p` elements are block-level elements, so they take up the entire width of their parent element. + +To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Add a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading. + +# --hints-- + +You should apply the `item` class to your `article` element. + +```js +assert(code.match(//i)) +``` + +You should only have one `item` class element. + +```js +assert($('.item').length === 1); +``` + +Your first `article` element should have the `item` class. + +```js +assert($('article')[0].className === 'item'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+--fcc-editable-region-- +

Coffee

+
+

French Vanilla

+

3.00

+
+--fcc-editable-region-- +
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.flavor { + text-align: left; +} + +.price { + text-align: right; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md new file mode 100644 index 00000000000000..64649e6bbefe2f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md @@ -0,0 +1,108 @@ +--- +id: 5f3cade94c6576e7f7b7953f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Now go ahead and change both the `flavor` and `price` class' widths to be `50%` again. + +# --hints-- + +You should set the `width` property to `50%` in your `.flavor` selector. + +```js +const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); +assert(flavorWidth === '50%'); +``` + +You should set the `width` property to `50%` in your `.price` selector. + +```js +const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); +assert(priceWidth === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +--fcc-editable-region-- +.flavor { + text-align: left; + width: 49%; +} + +.price { + text-align: right; + width: 49%; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md new file mode 100644 index 00000000000000..0b0c90b7d3fcbf --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md @@ -0,0 +1,119 @@ +--- +id: 5f3cade9993019e26313fa8e +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Now that you know it works, you can change the remaining `article` and `p` elements to match the first set. Start by adding the class `item` to the other `article` elements. + +# --hints-- + +You should only have five `article` elements. + +```js +assert($('article').length === 5); +``` + +You should only have five `.item` elements. + +```js +assert($('.item').length === 5); +``` + +Your `.item` elements should be your `article` elements. + + +```js +const articles = $('article'); +const items = $('.item'); +assert(articles[0] === items[0]); +assert(articles[1] === items[1]); +assert(articles[2] === items[2]); +assert(articles[3] === items[3]); +assert(articles[4] === items[4]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+--fcc-editable-region-- +
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 50%; +} + +.price { + text-align: right; + width: 50%; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md new file mode 100644 index 00000000000000..eaebcbe1ca83e4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md @@ -0,0 +1,114 @@ +--- +id: 5f3cade99dda4e6071a85dfd +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +You will come back to styling the menu in a few steps, but for now, go ahead and add a second `section` element below the first for displaying the desserts offered by the cafe. + +# --hints-- + +You should have an opening `section` tag. + +```js +assert(code.match(/
/ig).length === 2); +``` + +You should have a closing `section` tag. + +```js +assert(code.match(/<\/section>/ig).length === 2); +``` + +You should not change the existing `main` element. + +```js +assert($('main').length === 1); +``` + +Your new `section` element should be nested in the `main` element. + +```js +assert($('main').children('section').length === 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+--fcc-editable-region-- +
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+--fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md new file mode 100644 index 00000000000000..7e136fd4e661b4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md @@ -0,0 +1,103 @@ +--- +id: 5f3cade9fa77275d9f4efe62 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +That worked, but there is still a little space on the right of the price. + +You could keep trying various percentages for the widths. Instead, simply move the price `p` element to be on the same line and make sure there is no space between them. + +# --hints-- + +Your `p` elements should not have any space between them. + +```js +assert(code.match(/Vanilla<\/p>

+ + + + + Cafe Menu + + + +

+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+--fcc-editable-region-- +

French Vanilla

+

3.00

+--fcc-editable-region-- +
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 49%; +} + +.price { + text-align: right; + width: 49%; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md new file mode 100644 index 00000000000000..dd2cdc2e911485 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md @@ -0,0 +1,158 @@ +--- +id: 5f3ef6e01f288a026d709587 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +You can use an `hr` element to display a divider between sections of different content. + +First, add an `hr` element between the first `header` element and the `main` element. Note that `hr` elements are self closing. + +# --hints-- + +You should add an `hr` element. `hr` elements are self-closing. + +```js +assert(code.match(//i)); +assert(!code.match(/<\/hr>/i)); +``` + +You should not change your existing `header` element. + +```js +assert($('header').length === 1); +``` + +You should not change your existing `main` element. + +```js +assert($('main').length === 1); +``` + +Your `hr` element should be between your `header` element and your `main` element. + +```js +assert($('hr')[0].previousElementSibling.tagName === 'HEADER'); +assert($('hr')[0].nextElementSibling.tagName === 'MAIN'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+--fcc-editable-region-- +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md new file mode 100644 index 00000000000000..e392a64534507b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md @@ -0,0 +1,122 @@ +--- +id: 5f3ef6e03d719d5ac4738993 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +The current width of the menu will always take up 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices. + +Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide. + +# --hints-- + +You should set the `max-width` property to `500px`. + +```js +const hasMaxWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['max-width'] === '500px'); +assert(hasMaxWidth); +``` + +Your `.menu` element should have a `max-width` of `500px`. + +```js +const menuMaxWidth = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('max-width'); +assert(menuMaxWidth === '500px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; +} +--fcc-editable-region-- + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md new file mode 100644 index 00000000000000..53677de55b31d0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md @@ -0,0 +1,147 @@ +--- +id: 5f3ef6e04559b939080db057 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Since all 4 sides of the menu have the same internal spacing, go ahead and delete the four properties and use a single `padding` property with the value `20px`. + +# --hints-- + +You should remove the `padding-left` property. + +```js +assert(!code.match(/padding-left/i)); +``` + +You should remove the `padding-right` property. + +```js +assert(!code.match(/padding-right/i)); +``` + +You should remove the `padding-top` property. + +```js +assert(!code.match(/padding-top/i)); +``` + +You should remove the `padding-bottom` property. + +```js +assert(!code.match(/padding-bottom/i)); +``` + +You should set the `padding` property to `20px`. + +```js +const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding'] === '20px'); +assert(hasPadding); +``` + +Your `.menu` element should have a `padding` value of `20px`. + +```js +const menuPadding = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding'); +assert(menuPadding === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; + padding-top: 20px; + padding-bottom: 20px; +} +--fcc-editable-region-- + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md new file mode 100644 index 00000000000000..f4065ad6fbc3b3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md @@ -0,0 +1,144 @@ +--- +id: 5f3ef6e050279c7a4a7101d3 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +That looks better. Now try to add the same `20px` padding to the top and bottom of the menu. + +# --hints-- + +You should not remove the `padding-left` or `padding-right` properties. + +```js +const paddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left'); +assert(paddingLeft === '20px'); +const paddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right'); +assert(paddingRight === '20px'); +``` + +You should set the `padding-top` property to `20px`. + +```js +const hasPaddingTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px'); +assert(hasPaddingTop); +``` + +You should set the `padding-bottom` property to `20px`. + +```js +const hasPaddingBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px'); +assert(hasPaddingBottom); +``` + +Your `.menu` element should have a `padding-top` of `20px`. + +```js +const menuPaddingTop = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-top'); +assert(menuPaddingTop === '20px'); +``` + +Your `.menu` element should have a `padding-bottom` of `20px`. + +```js +const menuPaddingBottom = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-bottom'); +assert(menuPaddingBottom === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; +} +--fcc-editable-region-- + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md new file mode 100644 index 00000000000000..43f04fdee5620c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md @@ -0,0 +1,121 @@ +--- +id: 5f3ef6e05473f91f948724ab +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +You can change the `font-family` of text, to make it look different from the default font of your browser. Each browser has some common fonts available to it. + +Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable. + +# --hints-- + +You should set the `font-family` property to `sans-serif`. + +```js +const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'sans-serif'); +``` + +Your `body` should have a `font-family` of `sans-serif`. + +```js +const bodyFontFamily = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family'); +assert(bodyFontFamily === 'sans-serif'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} +--fcc-editable-region-- + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md new file mode 100644 index 00000000000000..73e18cac5cb559 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md @@ -0,0 +1,138 @@ +--- +id: 5f3ef6e056bdde6ae6892ba2 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector. + +Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font. + +# --hints-- + +You should use an `h1, h2` selector. + +```js +const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2'); +assert(h1h2Selector); +``` + +You should set the `font-family` to `Impact`. + +```js +const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'Impact'); +assert(hasFontFamily); +``` + +Your `h1` element should have a `font-family` of `Impact`. + +```js +assert($('h1').css('font-family').match(/impact/i)); +``` + +Your `h2` element should have a `font-family` of `Impact`. + +```js +assert($('h2').css('font-family').match(/impact/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md new file mode 100644 index 00000000000000..3d1c00d719474b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md @@ -0,0 +1,135 @@ +--- +id: 5f3ef6e06d34faac0447fc44 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`. + +# --hints-- + +You should have an `.established` selector. + +```js +const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established'); +assert(hasEstablished); +``` + +You should set the `font-style` property to `italic`. + +```js +const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic'); +assert(hasFontStyle); +``` + +Your `.established` selector should set the `font-style` property to `italic`. + +```js +const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style'); +assert(establishedFontStyle === 'italic'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md new file mode 100644 index 00000000000000..3ba035861e4a95 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md @@ -0,0 +1,149 @@ +--- +id: 5f3ef6e07276f782bb46b93d +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Add a `footer` element below the `main` element, where you can add some additional information. + +# --hints-- + +You should have an opening `
` tag. + +```js +assert(code.match(/
/i)); +``` + +You should have a closing `
` tag. + +```js +assert(code.match(/<\/footer>/i)); +``` + +You should not modify the existing `main` element. + +```js +assert($('main').length === 1); +``` + +Your `footer` element should be below your `main` element. + +```js +const footer = $('footer')[0] +assert(footer.previousElementSibling.tagName === 'MAIN'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+--fcc-editable-region-- +
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+--fcc-editable-region-- +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md new file mode 100644 index 00000000000000..9bb21537138d5e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md @@ -0,0 +1,111 @@ +--- +id: 5f3ef6e0819d4f23ca7285e6 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Add an empty `article` element under the `Desserts` heading. Give it a `class` attribute with the value `item`. + +# --hints-- + +You should not change your existing `h2` element. + +```js +assert($('h2').length === 2); +``` + +Your `article` element should be below your `h2` element. + +```js +assert($('section')[1].children[1].tagName === 'ARTICLE'); +``` + +Your new `article` element should have the `item` class. + +```js +assert($('section')[1].children[1].className === 'item'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+--fcc-editable-region-- +

Desserts

+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md new file mode 100644 index 00000000000000..a2c17972072603 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md @@ -0,0 +1,134 @@ +--- +id: 5f3ef6e087d56ed3ffdc36be +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Now apply the `established` class to the `Est. 2020` text. + +# --hints-- + +You should set the `class` of the `p` element to `established`. + +```js +assert(code.match(/

/i)); +``` + +Your `established` class should be on the element with the text `Est. 2020`. + +```js +const established = $('.established'); +assert(established[0].innerText.match(/Est\.\s2020/i)); +``` + +Your `established` class element should have italic text. + +```js +assert($('.established').css('font-style') === 'italic'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +

+--fcc-editable-region-- +
+

CAMPER CAFE

+

Est. 2020

+
+--fcc-editable-region-- +
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md new file mode 100644 index 00000000000000..2b714a387a11e1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md @@ -0,0 +1,156 @@ +--- +id: 5f3ef6e0a81099d9a697b550 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Inside the `footer`, add a `p` element. Then, nest an anchor (`a`) element in the `p` that links to `https://www.freecodecamp.org` and has the text `Visit our website`. + +# --hints-- + +You should not modify the existing `footer` element. + +```js +assert($('footer').length === 1); +``` + +Your new `p` element should be nested within your `footer` element. + +```js +assert($('footer').children('p').length === 1); +``` + +Your new `a` element should be nested within your new `p` element. + +```js +assert($('footer').children('p').children('a').length === 1); +``` + +Your new `a` element should have the text `Visit our website`. + +```js +assert($('footer').find('a')[0].innerText.match(/Visit our website/i)); +``` + +Your new `a` element should link to `https://www.freecodecamp.org`. Remember that `a` elements use the `href` attribute to create a link. + +```js +assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md new file mode 100644 index 00000000000000..5aee284b1c7476 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md @@ -0,0 +1,141 @@ +--- +id: 5f3ef6e0b431cc215bb16f55 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Add a second `p` element below the one with the link and give it the text `123 Free Code Camp Drive`. + +# --hints-- + +You should add a second `p` element to your `footer`. + +```js +assert($('footer').children('p').length === 2); +``` + +Your new `p` element should have the text `123 Free Code Camp Drive`. Make sure your new element comes after your existing element. + +```js +assert($('footer').children('p').last().text().match(/123 Free Code Camp Drive/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md new file mode 100644 index 00000000000000..782a0a1a3fd855 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md @@ -0,0 +1,110 @@ +--- +id: 5f3ef6e0e0c3feaebcf647ad +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Add an `h2` element in the new section and give it the text `Desserts`. + +# --hints-- + +You should not change your existing `section` element. + +```js +assert($('section').length === 2); +``` + +You should add an `h2` element in your second `section` element. + +```js +assert($('section')[1].children[0].tagName === 'H2'); +``` + +Your new `h2` element should have the text `Desserts`. + +```js +assert($('h2')[1].innerText.match(/Desserts/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md new file mode 100644 index 00000000000000..2ec85cfc90c35f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md @@ -0,0 +1,121 @@ +--- +id: 5f3ef6e0e9629bad967cd71e +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +You can add a fallback value for the font-family by adding another font name separated by a comma. Fallbacks are used in instances where the initial is not found/available. + +Add the fallback font `serif` after the `Impact` font. + +# --hints-- + +You should add `serif` as a fallback for the `Impact` font. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('h1, h2')?.getPropertyValue('font-family'); +assert(fontFamily === 'Impact, serif'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- +h1, h2 { + font-family: Impact; +} +--fcc-editable-region-- + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md new file mode 100644 index 00000000000000..2a748c7e1204cf --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md @@ -0,0 +1,135 @@ +--- +id: 5f3ef6e0eaa7da26e3d34d78 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +You can give your menu some space between the content and the sides with various `padding` properties. + +Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`. + +# --hints-- + +You should set the `padding-left` property to `20px`. + +```js +const hasPaddingLeft = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-left'] === '20px'); +assert(hasPaddingLeft); +``` + +You should set the `padding-right` property to `20px`. + +```js +const hasPaddingRight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-right'] === '20px'); +assert(hasPaddingRight); +``` + +Your `.menu` element should have a `padding-left` of `20px`. + +```js +const menuPaddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left'); +assert(menuPaddingLeft === '20px'); +``` + +Your `.menu` element should have a `padding-right` of `20px`. + +```js +const menuPaddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right'); +assert(menuPaddingRight === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +--fcc-editable-region-- + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md new file mode 100644 index 00000000000000..f37ce306fa4b2f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md @@ -0,0 +1,147 @@ +--- +id: 5f3ef6e0f8c230bdd2349716 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +The typography of heading elements (e.g. `h1`, `h2`) is set by default values of users' browsers. + +Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`. + +# --hints-- + +You should use an `h1` selector. + +```js +const hasH1 = new __helpers.CSSHelp(document).getStyle('h1'); +assert(hasH1); +``` + +You should use an `h2` selector. + +```js +const hasH2 = new __helpers.CSSHelp(document).getStyle('h2'); +assert(hasH2); +``` + +Your `h1` element should have a `font-size` of `40px`. + +```js +const h1FontSize = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size'); +assert(h1FontSize === '40px'); +``` + +Your `h2` element should have a `font-size` of `30px`. + +```js +const h2FontSize = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size'); +assert(h2FontSize === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md new file mode 100644 index 00000000000000..e82569968fa301 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md @@ -0,0 +1,156 @@ +--- +id: 5f3f26fa39591db45e5cd7a0 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +The default properties of an `hr` element will make it appear as a thin light grey line. You can change the height of the line by specifying a value for the `height` property. + +Change the height the `hr` element to be `3px`. + +# --hints-- + +You should use the `hr` selector. + +```js +const hasHr = new __helpers.CSSHelp(document).getStyle('hr'); +assert(hasHr); +``` + +You should set the `height` property to `3px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '3px'); +assert(hasHeight); +``` + +Your `hr` element should have a height of `3px`. + +```js +const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height'); +assert(hrHeight === '3px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md new file mode 100644 index 00000000000000..8bc7f8618fa0ce --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md @@ -0,0 +1,148 @@ +--- +id: 5f459225127805351a6ad057 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans. + +# --hints-- + +You should set the value of the `background-color` property to `brown`. + +```js +const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown'); +``` + +Your `hr` element should have a `background-color` of `brown`. + +```js +const hrBackgroundColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('background-color'); +assert(hrBackgroundColor === 'brown'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- +hr { + height: 3px; +} +--fcc-editable-region-- + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md new file mode 100644 index 00000000000000..f8754d121efccb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md @@ -0,0 +1,152 @@ +--- +id: 5f459a7ceb8b5c446656d88b +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Notice the grey color along the edges of the line. Those edges are known as borders. Each side of an element can have a different color or they can all be the same. + +Make all the edges of the `hr` element the same color as the background of it using the `border-color` property. + +# --hints-- + +You should set the `border-color` property to `brown`. + +```js +const hasBorderColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-color'] === 'brown'); +assert(hasBorderColor); +``` + +Your `hr` element should have a `border-color` of `brown`. + +```js +const hrBorderColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('border-color'); +assert(hrBorderColor === 'brown'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- +hr { + height: 3px; + background-color: brown; +} +--fcc-editable-region-- + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md new file mode 100644 index 00000000000000..9318a3d96f0078 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md @@ -0,0 +1,153 @@ +--- +id: 5f459cf202c2a3472fae6a9f +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Notice how the thickness of the line looks bigger? The default value of a property named `border-width` is `1px` for all edges of `hr` elements. By changing the border to the same color as the background, the total height of the line is `5px` (`3px` plus the top and bottom border width of `1px`). + +Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`. + +# --hints-- + +You should set the `height` property to `2px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '2px'); +assert(hasHeight); +``` + +Your `hr` element should have a `height` of `2px`. + +```js +const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height'); +assert(hrHeight === '2px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- +hr { + height: 3px; + background-color: brown; + border-color: brown; +} +--fcc-editable-region-- + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md new file mode 100644 index 00000000000000..18e09c92f4ac75 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md @@ -0,0 +1,150 @@ +--- +id: 5f459fd48bdc98491ca6d1a3 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Go ahead and add another `hr` element between the `main` element and the `footer` element. + +# --hints-- + +You should add a second `hr` element. + +```js +assert($('hr').length === 2); +``` + +Your new `hr` element should be between the `main` element and the `footer` element. + +```js +assert($('hr')[1].previousElementSibling.tagName === 'MAIN'); +assert($('hr')[1].nextElementSibling.tagName === 'FOOTER'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+--fcc-editable-region-- +
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+ +--fcc-editable-region-- +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md new file mode 100644 index 00000000000000..e2ad96cc7fb5f4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md @@ -0,0 +1,150 @@ +--- +id: 5f45a05977e2fa49d9119437 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +To create a little more room around the menu, add `20px` of space on the inside of the `body` element by using the `padding` property. + +# --hints-- + +You should set the `padding` property to `20px`. + +```js +assert(code.match(/padding:\s*20px;?/i)); +``` + +Your `body` element should have a `padding` of `20px`. + +```js +const bodyPadding = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('padding'); +assert(bodyPadding === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} +--fcc-editable-region-- + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md new file mode 100644 index 00000000000000..7f647a1fd2a263 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md @@ -0,0 +1,176 @@ +--- +id: 5f45a276c093334f0f6e9df4 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Focusing on the menu items and prices, there is a fairly large gap between each line. + +Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`. + +# --hints-- + +You should set the `margin-top` property to `5px`. + +```js +const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '5px'); +assert(hasMarginTop); +``` + +You should set the `margin-bottom` property to `5px`. + +```js +const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px'); +assert(hasMarginBottom); +``` + +You should use the existing `.item p` selector. + +```js +const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p'); +assert(hasOneSelector.length === 1); +``` + +Your `p` elements nested in your `.item` elements should have a `margin-top` of `5px`. + +```js +const itemPMarginTop = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-top'); +assert(itemPMarginTop === '5px'); +``` + +Your `p` elements nested in your `.item` elements should have a `margin-bottom` of `5px`. + +```js +const itemPMarginBottom = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-bottom'); +assert(itemPMarginBottom === '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +--fcc-editable-region-- +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md new file mode 100644 index 00000000000000..1d5f6c9f49522f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md @@ -0,0 +1,162 @@ +--- +id: 5f45a5a7c49a8251f0bdb527 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Using the same style selector in the previous step, make the font size of the items and prices larger by using a value of `18px`. + +# --hints-- + +You should set the `font-size` property to `18px`. + +```js +const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '18px'); +assert(hasFontSize); +``` + +You should use the existing `.item p` selector. + +```js +const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p'); +assert(hasOneSelector.length === 1); +``` + +Your `p` elements nested in your `.item` elements should have a `font-size` of `18px`. + +```js +const itemPFontSize = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('font-size'); +assert(itemPFontSize === '18px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +h1, h2 { + font-family: Impact, serif; +} + +--fcc-editable-region-- +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; +} +--fcc-editable-region-- + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md new file mode 100644 index 00000000000000..cef50b53eae8cd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md @@ -0,0 +1,178 @@ +--- +id: 5f45a66d4a2b0453301e5a26 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Moving down to the `footer` element, make all the text have a value of `14px` for the font size. + +# --hints-- + +You should have a `footer` selector. + +```js +const hasFooter = new __helpers.CSSHelp(document).getStyle('footer'); +assert(hasFooter); +``` + +Your `footer` selector should be below your comment. + +```js +assert(code.match(/\/\*\s*FOOTER\s*\*\/\s*footer/i)); +``` + +You should set the `font-size` property to `14px`. + + +```js +const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '14px'); +assert(hasFontSize); +``` + +Your `footer` element should have a `font-size` of `14px`. + +```js +const footerFontSize = new __helpers.CSSHelp(document).getStyle('footer')?.getPropertyValue('font-size'); +assert(footerFontSize === '14px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md new file mode 100644 index 00000000000000..9b9b094d3e626e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md @@ -0,0 +1,175 @@ +--- +id: 5f45b0731d39e15d54df4dfc +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +The default color of a link that has not yet been clicked on is typically blue. The default color of a link that has already been visited from a page is typically purple. + +To make the `footer` links the same color regardless if a link has been visited, use a type selector for the anchor element (`a`) and use the value `black` for the `color` property. + +# --hints-- + +You should use an `a` selector. + +```js +const hasASelector = new __helpers.CSSHelp(document).getStyle('a'); +assert(hasASelector); +``` + +You should set the `color` property to `black`. + +```js +const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'black'); +``` + +Your `a` element should have a `color` of `black`. + +```js +const aColor = new __helpers.CSSHelp(document).getStyle('a')?.getPropertyValue('color'); +assert(aColor === 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md new file mode 100644 index 00000000000000..24ee06943d9bcf --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md @@ -0,0 +1,182 @@ +--- +id: 5f45b25e7ec2405f166b9de1 +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +You change properties of a link when the link has actually been visited by using a pseudo-selector that looks like `a:visited { propertyName: propertyValue; }`. + +Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link. + +# --hints-- + +You should use the `a:visited` pseudoselector. + +```js +const hasAVisited = new __helpers.CSSHelp(document).getStyle('a:visited'); +assert(hasAVisited); +``` + +You should set the `color` property to `grey`. + +```js +const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => (x.style.color === 'grey' || x.style.color === 'gray')); +assert(hasColor); +``` + +Your `a:visited` should have a `color` of `grey`. + +```js +const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color'); +assert(aVisitedColor === 'grey' || aVisitedColor === 'gray'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md new file mode 100644 index 00000000000000..9d856f647d8a56 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md @@ -0,0 +1,186 @@ +--- +id: 5f45b3c93c027860d9298dbd +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +You change properties of a link when the mouse hovers over them by using a pseudo-selector that looks like `a:hover { propertyName: propertyValue; }`. + +Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it. + +# --hints-- + +You should use the `a:hover` pseudoselector. + +```js +const hasAHover = new __helpers.CSSHelp(document).getStyle('a:hover'); +assert(hasAHover); +``` + +You should set the `color` property to `brown`. + +```js +const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'brown'); +assert(hasColor); +``` + +Your `a:hover` should have a `color` of `brown`. + +```js +const aHoverColor = new __helpers.CSSHelp(document).getStyle('a:hover')?.getPropertyValue('color'); +assert(aHoverColor === 'brown'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +a:visited { + color: grey; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md new file mode 100644 index 00000000000000..9b72102e0718cd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md @@ -0,0 +1,189 @@ +--- +id: 5f45b45d099f3e621fbbb256 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +You change properties of a link when the link is actually being clicked by using a pseudo-selector that looks like `a:active { propertyName: propertyValue; }`. + +Change the color of the footer `Visit our website` link to be `white` when clicked on. + +# --hints-- + +You should use the `a:active` pseudo-selector. + +```js +const hasAActive = new __helpers.CSSHelp(document).getStyle('a:active'); +assert(hasAActive); +``` + +You should set the `color` property to `white`. + +```js +const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'white'); +assert(hasColor); +``` + +Your `a:active` should have a `color` of `white`. + +```js +const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color'); +assert(aActiveColor === 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +a:visited { + color: grey; +} + +a:hover { + color: brown; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md new file mode 100644 index 00000000000000..ee1a02c0412bf1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md @@ -0,0 +1,182 @@ +--- +id: 5f45b4c81cea7763550e40df +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +To keep with the same color theme you have already been using (black and brown), change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked. + +# --hints-- + +You should set the `color` property to `black` when the link is `visited`. + +```js +const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color'); +assert(aVisitedColor === 'black'); +``` + +You should set the `color` property to `brown` when the link is `active`. + +```js +const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color'); +assert(aActiveColor === 'brown'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +--fcc-editable-region-- +a:visited { + color: grey; +} + +a:hover { + color: brown; +} + +a:active { + color: white; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md new file mode 100644 index 00000000000000..f4bc71f4705fa3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md @@ -0,0 +1,184 @@ +--- +id: 5f45b715301bbf667badc04a +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +The menu text `CAMPER CAFE` has a different space from the top than the address at the bottom of the menu. This is due to the browser having some default top margin for the `h1` element. + +Change the top margin of the `h1` element to `0` to remove all the top margin. + +# --hints-- + +You should set the `margin-top` property to `0`. + +```js +const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '0px'); +assert(hasMarginTop); +``` + +Your `h1` element should have a `margin-top` of `0`. + +```js +const h1MarginTop = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-top'); +assert(h1MarginTop === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +--fcc-editable-region-- +h1 { + font-size: 40px; +} +--fcc-editable-region-- + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md new file mode 100644 index 00000000000000..1971629a1597ec --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md @@ -0,0 +1,183 @@ +--- +id: 5f46e270702a8456a664f0df +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +To remove some of the vertical space between the `h1` element and the text `Est. 2020`, change the bottom margin of the `h1` to `15px`. + +# --hints-- + +You should set the `margin-bottom` property to `15px`. + +```js +const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '15px'); +assert(hasMarginBottom); +``` + +Your `h1` element should have a `margin-bottom` of `15px`. + +```js +const h1MarginBottom = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-bottom'); +assert(h1MarginBottom === '15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +--fcc-editable-region-- +h1 { + font-size: 40px; + margin-top: 0; +} +--fcc-editable-region-- + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md new file mode 100644 index 00000000000000..c60533c0468bd2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md @@ -0,0 +1,195 @@ +--- +id: 5f46e36e745ead58487aabf2 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element. + +To decrease the default margin space below the address `p` element, create a class selector named `address` and use the value `5px` for the `margin-bottom` property. + +# --hints-- + +You should add an `.address` selector. + +```js +const hasAddress = new __helpers.CSSHelp(document).getStyle('.address'); +assert(hasAddress); +``` + +You should set the `margin-bottom` property to `5px`. + +```js +const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px'); +assert(hasMarginBottom); +``` + +Your `.address` selector should have the `margin-bottom` property set to `5px`. + +```js +const addressMarginBottom = new __helpers.CSSHelp(document).getStyle('.address')?.getPropertyValue('margin-bottom'); +assert(addressMarginBottom === '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md new file mode 100644 index 00000000000000..dc287b59ec788b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md @@ -0,0 +1,191 @@ +--- +id: 5f46e7a4750dd05b5a673920 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Now apply the `address` class to the `p` element containing the address. + +# --hints-- + +You should apply the `class="address"` attribute. + +```js +assert(code.match(/class=('|")address\1/i)); +``` + +Your `.address` element should be your `p` element. + +```js +assert($('.address')[0].tagName === 'P'); +``` + +Your `.address` element should have the text `123 freeCodeCamp Drive`. + +```js +assert($('.address')[0].innerText.match(/123 Free Code Camp Drive/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +.address { + margin-bottom: 5px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md new file mode 100644 index 00000000000000..d007f8d1dc2c69 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md @@ -0,0 +1,194 @@ +--- +id: 5f46e8284aae155c83015dee +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +The menu looks good, but other than the coffee beans background image, it is mainly just text. + +Under the `Coffee` heading, add an image using the url `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`. Give the image an `alt` value of `coffee icon`. + +# --hints-- + +You should have an `` tag. Remember that `img` elements are self-closing. + +```js +assert($('img').length === 1); +``` + +Your `img` element should have a `src` attribute of `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`. + +```js +assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg'); +``` + +Your `img` element should have an `alt` attribute of `coffee icon`. + +```js +assert($('img').attr('alt').match(/coffee icon/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+--fcc-editable-region-- +

Coffee

+--fcc-editable-region-- +
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +.address { + margin-bottom: 5px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md new file mode 100644 index 00000000000000..75448e38e9dd40 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md @@ -0,0 +1,154 @@ +--- +id: 5f46ede1ff8fec5ba656b44c +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Next you are going to be styling the `footer` element. To keep the CSS organized, add a comment at the end of `styles.css` with the text `FOOTER`. + +# --hints-- + +You should have a CSS comment with the text `FOOTER`. + +```js +assert(code.match(/\/\*\s*FOOTER\s*\*\//i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+

+ Visit our website +

+

123 Free Code Camp Drive

+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md new file mode 100644 index 00000000000000..2e46c97c19c7d4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md @@ -0,0 +1,167 @@ +--- +id: 5f46fc57528aa1c4b5ea7c2e +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Changing the `margin-bottom` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffee` heading. + +Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property. + +# --hints-- + +You should add a `.bottom-line` selector. + +```js +const hasBottomLine = new __helpers.CSSHelp(document).getStyle('.bottom-line'); +assert(hasBottomLine); +``` + +You should set the `margin-top` property to `25px`. + +```js +const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '25px'); +assert(hasMarginTop); +``` + +Your `.bottom-line` selector should have a `margin-top` of `25px`. + +```js +const bottomLineMargin = new __helpers.CSSHelp(document).getStyle('.bottom-line')?.getPropertyValue('margin-top'); +assert(bottomLineMargin === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md new file mode 100644 index 00000000000000..cb1d67976feb40 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md @@ -0,0 +1,157 @@ +--- +id: 5f4701b942c824109626c3d8 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Now add the `bottom-line` class to the second `hr` element so the styling is applied. + +# --hints-- + +You should apply the `class="bottom-line"` property. + +```js +assert(code.match(/class=('|")bottom-line\1/i)); +``` + +Your `bottom-line` class should be applied to your second `hr` element. + +```js +assert($('hr')[1].className === 'bottom-line'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md new file mode 100644 index 00000000000000..59baa48d2aec45 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md @@ -0,0 +1,223 @@ +--- +id: 5f475bb508746c16c9431d42 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +The image you added is not centered horizontally like the `Coffee` heading above it. `img` elements are "like" inline elements. + +To make the image behave like heading elements (which are block-level), create an `img` type selector and use the value `block` for the `display` property and use the applicable `margin-left` and `margin-right` values to center it horizontally. + +# --hints-- + +You should use an `img` selector. + +```js +const hasImg = new __helpers.CSSHelp(document).getStyle('img'); +assert(hasImg); +``` + +You should set the `display` property to `block`. + +```js +const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'block'); +assert(hasDisplay); +``` + +You should set the `margin-left` property to `auto`. + +```js +const marginLeftFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-left'] === 'auto'); +assert(marginLeftFilter.length === 2); +``` + +You should set the `margin-right` property to `auto`. + +```js +const marginRightFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-right'] === 'auto'); +assert(marginRightFilter.length === 2); +``` + +Your `img` element should have a `display` of `block`. + +```js +const imgDisplay = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('display'); +assert(imgDisplay === 'block'); +``` + +Your `img` element should have a `margin-left` and `margin-right` of `auto`. + +```js +const imgMarginLeft = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-left'); +assert(imgMarginLeft === 'auto'); +const imgMarginRight = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-right'); +assert(imgMarginRight === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+ coffee icon +
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +.address { + margin-bottom: 5px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md new file mode 100644 index 00000000000000..5709ef5c8fcd3c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md @@ -0,0 +1,199 @@ +--- +id: 5f475e1c7f71a61d913836c6 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Add one last image under the `Desserts` heading using the url `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`. Give the image an `alt` value of `pie icon`. + +# --hints-- + +You should add a second `img` element. + +```js +assert($('img').length === 2); +``` + +Your new `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`. + +```js +assert($('img').last().attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg'); +``` + +Your new `img` element should have an `alt` of `pie icon`. + +```js +assert($('img').last().attr('alt').match(/pie icon/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+ coffee icon +
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+--fcc-editable-region-- +

Desserts

+--fcc-editable-region-- +
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +img { + display: block; + margin-left: auto; + margin-right: auto; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25%; +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +.address { + margin-bottom: 5px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md new file mode 100644 index 00000000000000..76aebf496934ad --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md @@ -0,0 +1,106 @@ +--- +id: 5f47633757ae3469f2d33d2e +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space. + +Since you know the prices on the right have significantly fewer characters, change the `flavor` class `width` value to be `75%` and the `price` class `width` value to be `25%`. + +# --hints-- + +You should set the `width` property to `75%` in your `.flavor` selector. + +```js +const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); +assert(flavorWidth === '75%'); +``` + +You should set the `width` property to `25%` in your `.price` selector. + +```js +const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); +assert(priceWidth === '25%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +--fcc-editable-region-- +.flavor { + text-align: left; + width: 50%; +} + +.price { + text-align: right; + width: 50%; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md new file mode 100644 index 00000000000000..7b68e75ead5fe4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md @@ -0,0 +1,363 @@ +--- +id: 5f47fe7e31980053a8d4403b +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +It would be nice if the vertical space between the `h2` elements and their associated icons was smaller. The `h2` elements have default top and bottom margin space, so you could change the bottom margin of the `h2` elements to say `0` or another number. + +There is an easier way, simply add a negative top margin to the `img` elements to pull them up from their current positions. Negative values are created using a `-` in front of the value. To complete this project, go ahead and use a negative top margin of `25px` in the `img` type selector. + +# --hints-- + +You should set the `margin-top` property to `-25px`. + +```js +const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '-25px'); +assert(hasMarginTop); +``` + +Your `img` elements should have a `margin-top` value of `-25px`. + +```js +const imgMarginTop = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-top'); +assert(imgMarginTop === '-25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+ coffee icon +
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+ pie icon +
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- +img { + display: block; + margin-left: auto; + margin-right: auto; +} +--fcc-editable-region-- + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25%; +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +.address { + margin-bottom: 5px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + +# --solutions-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+ coffee icon +
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+ pie icon +
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +img { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: -25px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25%; +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +.address { + margin-bottom: 5px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md new file mode 100644 index 00000000000000..9eb535b31e8864 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md @@ -0,0 +1,119 @@ +--- +id: 5f716ad029ee4053c7027a7a +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Nest two `p` elements inside your `article` element. The first one's text should be `Donut`, and the second's text `1.50`. Put both of them on the same line making sure there is no space between them. + +# --hints-- + +You should not change your existing `article` element. + +```js +assert($('article').length === 6); +``` + +Your new `article` element should have two `p` elements. + +```js +assert($('article').last().children('p').length === 2); +``` + +Your first `p` element should have the text `Donut`. + +```js +assert($('article').last().children('p')[0].innerText.match(/Donut/i)); +``` + +Your second `p` element should have the text `1.50`. + +```js +assert($('article').last().children('p')[1].innerText.match(/1\.50/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md new file mode 100644 index 00000000000000..16855858d71152 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md @@ -0,0 +1,145 @@ +--- +id: 5f716bee5838c354c728a7c5 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Below the dessert you just added, add the rest of the desserts and prices using three more `article` elements, each with two nested `p` elements. Each element should have the correct dessert and price text, and all of them should have the correct classes. + +```bash +Cherry Pie 2.75 +Cheesecake 3.00 +Cinnamon Roll 2.50 +``` + +# --hints-- + +You should have four `.dessert` elements. + +```js +assert($('.dessert').length === 4); +``` + +You should have four new `.price` elements. + +```js +assert($('section').last().find('.price').length === 4); +``` + +Your `section` element should have eight `p` elements. + +```js +assert($('section').last().find('p').length === 8); +``` + +Your `.dessert` elements should have the text `Donut`, `Cherry Pie`, `Cheesecake`, and `Cinnamon Roll`. + +```js +const dessert = $('.dessert'); +assert(dessert[0].innerText.match(/donut/i)); +assert(dessert[1].innerText.match(/cherry pie/i)); +assert(dessert[2].innerText.match(/cheesecake/i)); +assert(dessert[3].innerText.match(/cinnamon roll/i)); +``` + +Your new `.price` elements should have the text `1.50`, `2.75`, `3.00`, and `2.50`. + +```js +const prices = $('section').last().find('.price'); +assert(prices[0].innerText.match(/1\.50/)); +assert(prices[1].innerText.match(/2\.75/)); +assert(prices[2].innerText.match(/3\.00/)); +assert(prices[3].innerText.match(/2\.50/)); +``` + +You should not have any spaces between your `p` elements. + +```js +assert(!code.match(/<\/p>\s+

+ + + + + Cafe Menu + + + +

+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+--fcc-editable-region-- +
+

Donut

1.50

+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md new file mode 100644 index 00000000000000..aed7ab9240d672 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md @@ -0,0 +1,100 @@ +--- +id: 5f7691dafd882520797cd2f0 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Next, position the other `p` elements to be on the same line with no space between them. + +# --hints-- + +You should not have any spaces between your `p` elements. + +```js +assert(!code.match(/<\/p>\s+

+ + + + + Cafe Menu + + + +

+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+--fcc-editable-region-- +
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 50%; +} + +.price { + text-align: right; + width: 50%; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md new file mode 100644 index 00000000000000..f70f580db64241 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md @@ -0,0 +1,126 @@ +--- +id: 5f7692f7c5b3ce22a57788b6 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +To complete the styling, add the applicable class names `flavor` and `price` to all the remaining `p` elements. + +# --hints-- + +You should have five `.flavor` elements. + +```js +assert($('.flavor').length === 5); +``` + +You should have five `.price` elements. + +```js +assert($('.price').length === 5); +``` + +Your `.flavor` elements should be your `p` elements with the text `French Vanilla`, `Caramel Macchiato`, `Pumpkin Spice`, `Hazelnut`, and `Mocha`. + +```js +const p = $('p'); +const flavor = $('.flavor'); +assert(p[1] === flavor[0]); +assert(p[3] === flavor[1]); +assert(p[5] === flavor[2]); +assert(p[7] === flavor[3]); +assert(p[9] === flavor[4]); +``` + +Your `.price` elements should be your `p` elements with the text `3.00`, `3.75`, `3.50`, `4.00`, and `4.50`. + +```js +const p = $('p'); +const price = $('.price'); +assert(p[2] === price[0]); +assert(p[4] === price[1]); +assert(p[6] === price[2]); +assert(p[8] === price[3]); +assert(p[10] === price[4]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+--fcc-editable-region-- +
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 50%; +} + +.price { + text-align: right; + width: 50%; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md new file mode 100644 index 00000000000000..855f82c8a908d3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md @@ -0,0 +1,105 @@ +--- +id: 5f769541be494f25449b292f +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Using your new `flavor` class as a selector, set the `text-align` property's value to `left`. + +# --hints-- + +You should have a `flavor` class selector. + +```js +const hasFlavor = new __helpers.CSSHelp(document).getStyle('.flavor'); +assert(hasFlavor); +``` + +You should set the `text-align` property to `left`. + +```js +const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'left'); +assert(hasTextAlign); +``` + +Your `flavor` class selector should set the `text-align` property to `left`. + +```js +const flavorTextAlign = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('text-align'); +assert(flavorTextAlign === 'left'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md new file mode 100644 index 00000000000000..34cfa5ec1619f8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md @@ -0,0 +1,102 @@ +--- +id: 5f76967fad478126d6552b0d +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Next, you want to align the price to the right. Add a class named `price` to your `p` element that has `3.00` as its text. + +# --hints-- + +You should add the `price` class to your `p` element. + +```js +assert(code.match(//i)); +``` + +You should only have one element with the `price` class. + +```js +assert($('.price').length === 1); +``` + +Your `price` class should be on the `p` element with the text `3.00`. + +```js +assert($('.price')[0].innerText.match(/3\.00/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

+--fcc-editable-region-- +

3.00

+--fcc-editable-region-- +
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.flavor { + text-align: left; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md new file mode 100644 index 00000000000000..957e0cb414a557 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md @@ -0,0 +1,106 @@ +--- +id: 5f769702e6e33127d14aa120 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Now align the text to the `right` for the elements with the `price` class. + +# --hints-- + +You should have a `price` class selector. + +```js +assert(code.match(/\.price\s*{/i)); +``` + +Your `price` class selector should set the `text-align` property to `right`. + +```js +assert(code.match(/\.price\s*{\s*text-align:\s*right;?/i)); +``` + +Your `.price` element should be aligned to the right. + +```js +assert($('.price').css('text-align') === 'right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.flavor { + text-align: left; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md new file mode 100644 index 00000000000000..26816b1d36b11d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md @@ -0,0 +1,120 @@ +--- +id: 5f7b87422a560036fd03ccff +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +For the two `p` elements you just added, add `dessert` as the value of the first `p` element's `class` attribute and the value `price` as the second `p` elements `class` attribute. + +# --hints-- + +You should have one `p` element with the `dessert` class. + +```js +assert($('.dessert').length === 1); +``` + +Your `p` element with the text `Donut` should have the `dessert` class. + +```js +assert($('.dessert')[0].innerText.match(/donut/i)); +``` + +Your `p` element with the text `1.50` should have the `price` class. + +```js +assert($('.price').last().text().match(/1\.50/)); +``` + +You should not have any spaces between your `p` elements. + +```js +assert(!code.match(/<\/p>\s+

+ + + + + Cafe Menu + + + +

+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+--fcc-editable-region-- +

Donut

1.50

+--fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md new file mode 100644 index 00000000000000..99d08142301870 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md @@ -0,0 +1,104 @@ +--- +id: 5f7b88d37b1f98386f04edc0 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Something does not look right. You added the correct `class` attribute value to the `p` element with `Donut` as its text, but you have not defined a selector for it. + +Since the `flavor` class selector already has the properties you want, just add the `dessert` class name to it. + +# --hints-- + +You should add the `.dessert` selector to your `.flavor` selector. + +```js +const selector = new __helpers.CSSHelp(document).getStyle('.flavor, .dessert') || new __helpers.CSSHelp(document).getStyle('.dessert, .flavor'); +assert(selector) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +--fcc-editable-region-- +.flavor { + text-align: left; + width: 75%; +} +--fcc-editable-region-- + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md new file mode 100644 index 00000000000000..8489e252ab6f24 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md @@ -0,0 +1,178 @@ +--- +id: 6140c7e645d8e905819f1dd4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Begin with the standard boilerplate. Add your `DOCTYPE` declaration, your `html` element, your `head` and `body` elements. + +Add your `meta` element for the correct `charset`, your `title` element, and a `link` element for the `./styles.css` file. + +Set the `title` to `Ferris Wheel`. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `DOCTYPE` declaration should be at the beginning of your HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +The `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +The `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +The `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +Your code should have a `meta` element. + +```js +const meta = document.querySelector('meta'); +assert.exists(meta); +``` + +Your `meta` element should have a `charset` attribute with the value `UTF-8`. + +```js +assert.match(code, //i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / child?.localName === 'div'); +assert(divs?.length === 1); +``` + +Your `div` within your `body` element should have a `class` of `wheel`. + +```js +assert(document.querySelector('body div')?.classList?.contains('wheel')); +``` + +Your `.wheel` element should have six `span` elements within. + +```js +assert(document.querySelectorAll('.wheel span')?.length === 6); +``` + +Your six `span` elements within the `.wheel` element should have a `class` of `line`. + +```js +const spans = [...document.querySelectorAll('.wheel span')]; +assert(spans?.every(span => span?.classList?.contains('line'))); +assert(document.querySelectorAll('.line')?.length === 6); +``` + +Your `.wheel` element should have six `div` elements within. + +```js +assert(document.querySelectorAll('.wheel div')?.length === 6); +``` + +Your six `div` elements within the `.wheel` element should have a `class` of `cabin`. + +```js +const divs = [...document.querySelectorAll('.wheel div')]; +assert(divs?.every(div => div?.classList?.contains('cabin'))); +assert(document.querySelectorAll('.cabin')?.length === 6); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md new file mode 100644 index 00000000000000..7594bdcbf0bfc5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md @@ -0,0 +1,74 @@ +--- +id: 6140cbeec34e970dfe75e710 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Create a selector for your `.wheel` element. Start by setting the `border` to `2px solid black`, the `border-radius` to `50%`, and the `margin-left` to `50px`. + +# --hints-- + +You should have a `.wheel` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')); +``` + +Your `.wheel` selector should have a `border` property set to `2px solid black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.border === '2px solid black'); +``` + +Your `.wheel` selector should have a `border-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.borderRadius === '50%'); +``` + +Your `.wheel` selector should have a `margin-left` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.marginLeft === '50px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md new file mode 100644 index 00000000000000..b323863a2458b0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md @@ -0,0 +1,72 @@ +--- +id: 6140cd32d018ed0f600eefce +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Set the `position` property of the `.wheel` selector to `absolute`. Set the `height` and `width` both to `55vw`. + +# --hints-- + +Your `.wheel` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.position === 'absolute'); +``` + +Your `.wheel` selector should have a `height` property set to `55vw`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.height === '55vw'); +``` + +Your `.wheel` selector should have a `width` property set to `55vw`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.width === '55vw'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md new file mode 100644 index 00000000000000..2d6bb9b6c8f98e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md @@ -0,0 +1,85 @@ +--- +id: 6140cdebd39d6a101e747529 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Create a selector for your `.line` elements. Start by setting the `background-color` to `black`, the `width` to `50%`, and the `height` to `2px`. + +# --hints-- + +You should have a `.line` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')); +``` + +Your `.line` selector should have a `background-color` property set to `black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')?.backgroundColor === "black"); +``` + +Your `.line` selector should have a `width` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')?.width === "50%"); +``` + +Your `.line` selector should have a `height` property set to `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')?.height === "2px"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md new file mode 100644 index 00000000000000..e9f7f54053bbf4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md @@ -0,0 +1,83 @@ +--- +id: 6140cfc08ca9c5128c3e6478 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Set the `.line` selector's `position` property to `absolute`, the `left` property to `50%`, and the `top` property to `50%`. + +# --hints-- + +Your `.line` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')?.position === 'absolute'); +``` + +Your `.line` selector should have a `left` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')?.left === '50%'); +``` + +Your `.line` selector should have a `top` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')?.top === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +--fcc-editable-region-- +.line { + background-color: black; + width: 50%; + height: 2px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md new file mode 100644 index 00000000000000..adc4d901e5c225 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md @@ -0,0 +1,77 @@ +--- +id: 6140d0069049f5139d78da40 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +The `transform-origin` property is used to set the point around which a CSS transformation is applied. For example, when performing a `rotate` (which you will do later in this project), the `transform-origin` determines around which point the element is rotated. + +Give the `.line` selector a `transform-origin` property of `0% 0%`. This will offset the origin point by `0%` from the left and `0%` from the top, setting it to the top left corner of the element. + +# --hints-- + +Your `.line` selector should have a `transform-origin` property set to `0% 0%`. + +```js +const transformOrigin = new __helpers.CSSHelp(document).getStyle('.line')?.transformOrigin; +assert(transformOrigin === '0% 0%' || transformOrigin === '0% 0% 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +--fcc-editable-region-- +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md new file mode 100644 index 00000000000000..bb48aef21858fa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md @@ -0,0 +1,85 @@ +--- +id: 6140d10d50636e14695013b2 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Create a selector to target your second `.line` element. Set the `transform` property to `rotate(60deg)`. + +Remember that the `transform` property allows you to manipulate the shape of an element. In this case, using the `rotate(60deg)` value will rotate the element around its `transform-origin` point by 60 degrees clockwise. + +# --hints-- + +You should create a `.line:nth-of-type(2)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')); +``` + +Your `.line:nth-of-type(2)` selector should have a `transform` property set to `rotate(60deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform === 'rotate(60deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md new file mode 100644 index 00000000000000..0630732d3440f3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md @@ -0,0 +1,126 @@ +--- +id: 6140d1a351e88f159ed54fca +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Using the same pattern, create a separate selector for the third `.line`, the fourth `.line`, the fifth `.line`, and the sixth `.line`. + +Set the `transform` property for the third `.line` to `rotate(120deg)`, the fourth to `rotate(180deg)`, the fifth to `rotate(240deg)`, and the sixth to `rotate(300deg)`. + +# --hints-- + +You should create a `.line:nth-of-type(3)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')); +``` + +Your `.line:nth-of-type(3)` selector should have a `transform` property set to `rotate(120deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')?.transform === 'rotate(120deg)'); +``` + +You should create a `.line:nth-of-type(4)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')); +``` + +Your `.line:nth-of-type(4)` selector should have a `transform` property set to `rotate(180deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')?.transform === 'rotate(180deg)'); +``` + +You should create a `.line:nth-of-type(5)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')); +``` + +Your `.line:nth-of-type(5)` selector should have a `transform` property set to `rotate(240deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')?.transform === 'rotate(240deg)'); +``` + +You should create a `.line:nth-of-type(6)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')); +``` + +Your `.line:nth-of-type(6)` selector should have a `transform` property set to `rotate(300deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')?.transform === 'rotate(300deg)'); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md new file mode 100644 index 00000000000000..3f71bf53cc0759 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md @@ -0,0 +1,111 @@ +--- +id: 6140d263016325162fd076fe +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Create a `.cabin` selector. Set the `background-color` to `red`, the `width` to `20%`, and the `height` to `20%`. + +# --hints-- + +You should have a `.cabin` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')); +``` + +Your `.cabin` selector should have a `background-color` property set to `red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.backgroundColor === 'red'); +``` + +Your `.cabin` selector should have a `width` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.width === '20%'); +``` + +Your `.cabin` selector should have a `height` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.height === '20%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d2b687a2cd17bac5730c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d2b687a2cd17bac5730c.md new file mode 100644 index 00000000000000..2db916709a96bb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d2b687a2cd17bac5730c.md @@ -0,0 +1,103 @@ +--- +id: 6140d2b687a2cd17bac5730c +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Give the `.cabin` a `position` of `absolute`, and a `border` of `2px solid`. + +# --hints-- + +Your `.cabin` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.position === 'absolute'); +``` + +Your `.cabin` selector should have a `border` property set to `2px solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.border === '2px solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +--fcc-editable-region-- +.cabin { + background-color: red; + width: 20%; + height: 20%; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md new file mode 100644 index 00000000000000..2fefadb892bcc4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md @@ -0,0 +1,100 @@ +--- +id: 6140d36b8b747718b50d4b7a +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Set the `.cabin` to have a `transform-origin` property of `50% 0%`. This will set the origin point to be offset `50%` from the left and `0%` from the top, placing it in the middle of the top edge of the element. + +# --hints-- + +Your `.cabin` selector should have a `transform-origin` property set to `50% 0%`. + +```js +const transformOrigin = new __helpers.CSSHelp(document).getStyle('.cabin')?.transformOrigin; +assert(transformOrigin === '50% 0%' || transformOrigin === '50% 0% 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +--fcc-editable-region-- +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d3dc359b371b1a21d783.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d3dc359b371b1a21d783.md new file mode 100644 index 00000000000000..64e9db2c49166f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d3dc359b371b1a21d783.md @@ -0,0 +1,117 @@ +--- +id: 6140d3dc359b371b1a21d783 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Time to position the cabins around the wheel. Select the first `.cabin` element. Set the `right` property to `-8.5%` and the `top` property to `50%`. + +# --hints-- + +You should have a `.cabin:nth-of-type(1)` selector. + +```js +const def = (s) => new __helpers.CSSHelp(document).getStyle(s) +assert.exists(def('.cabin:first-of-type') || def('.cabin:nth-of-type(1)')); +``` + +Your `.cabin:nth-of-type(1)` selector should have a `right` property set to `-8.5%`. + +```js +const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right +assert.equal(right('.cabin:nth-of-type(1)') || right('.cabin:first-of-type'), '-8.5%'); +``` + +Your `.cabin:nth-of-type(1)` selector should have a `top` property set to `50%`. + +```js +const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top +assert.equal(top('.cabin:nth-of-type(1)') || top('.cabin:first-of-type'),'50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d4bc9db3c81c51a09ab7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d4bc9db3c81c51a09ab7.md new file mode 100644 index 00000000000000..0dc354de2ff2ee --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d4bc9db3c81c51a09ab7.md @@ -0,0 +1,199 @@ +--- +id: 6140d4bc9db3c81c51a09ab7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Continuing the pattern, select the following `.cabin` elements and apply the specific rules to them: + +- The second `.cabin` should have the `right` property set to `17%` and the `top` property set to `93.5%`. +- The third `.cabin` should have the `right` property set to `67%` and the `top` property set to `93.5%`. +- The fourth `.cabin` should have the `left` property set to `-8.5%` and the `top` property set to `50%`. +- The fifth `.cabin` should have the `left` property set to `17%` and the `top` property set to `7%`. +- The sixth `.cabin` should have the `right` property set to `17%` and the `top` property set to `7%`. + +# --hints-- + +You should have a `.cabin:nth-of-type(2)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')); +``` + +Your `.cabin:nth-of-type(2)` selector should have a `right` property set to `17%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.right === '17%'); +``` + +Your `.cabin:nth-of-type(2)` selector should have a `top` property set to `93.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.top === '93.5%'); +``` + +You should have a `.cabin:nth-of-type(3)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')); +``` + +Your `.cabin:nth-of-type(3)` selector should have a `right` property set to `67%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.right === '67%'); +``` + +Your `.cabin:nth-of-type(3)` selector should have a `top` property set to `93.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.top === '93.5%'); +``` + +You should have a `.cabin:nth-of-type(4)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')); +``` + +Your `.cabin:nth-of-type(4)` selector should have a `left` property set to `-8.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.left === '-8.5%'); +``` + +Your `.cabin:nth-of-type(4)` selector should have a `top` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.top === '50%'); +``` + +You should have a `.cabin:nth-of-type(5)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')); +``` + +Your `.cabin:nth-of-type(5)` selector should have a `left` property set to `17%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.left === '17%'); +``` + +Your `.cabin:nth-of-type(5)` selector should have a `top` property set to `7%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.top === '7%'); +``` + +You should have a `.cabin:nth-of-type(6)` selector. + +```js +const def = (s) => new __helpers.CSSHelp(document).getStyle(s) +assert(def('.cabin:nth-of-type(6)') || def('.cabin:last-of-type')); +``` + +Your `.cabin:nth-of-type(6)` selector should have a `right` property set to `17%`. + +```js +const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right +assert.equal(right('.cabin:nth-of-type(6)') || right('.cabin:last-of-type'),'17%'); +``` + +Your `.cabin:nth-of-type(6)` selector should have a `top` property set to `7%`. + +```js +const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top +assert.equal(top('.cabin:nth-of-type(6)') || top('.cabin:last-of-type'),'7%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md new file mode 100644 index 00000000000000..afd0b465c1b558 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md @@ -0,0 +1,137 @@ +--- +id: 6140d94b5fab7f1d73c9bedb +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +The `@keyframes` at-rule is used to define the flow of a CSS animation. Within the `@keyframes` rule, you can create selectors for specific points in the animation sequence, such as `0%` or `25%`, or use `from` and `to` to define the start and end of the sequence. + +`@keyframes` rules require a name to be assigned to them, which you use in other rules to reference. For example, the `@keyframes freeCodeCamp { }` rule would be named `freeCodeCamp`. + +Time to start animating. Create a `@keyframes` rule named `wheel`. + +# --hints-- + +You should have a `@keyframes` rule. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 1); +``` + +Your new `@keyframes` rule should be named `wheel`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md new file mode 100644 index 00000000000000..d2e823fe314b9e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md @@ -0,0 +1,139 @@ +--- +id: 6140dc5e13d0c81e7496f182 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +You now need to define how your animation should start. To do this, create a `0%` rule within your `@keyframes wheel` rule. The properties you set in this nested selector will apply at the beginning of your animation. + +As an example, this would be a `12%` rule: + +```css +@keyframes freecodecamp { + 12% { + color: green; + } +} +``` + +# --hints-- + +Your `@keyframes wheel` rule should have a `0%` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.keyText === '0%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +--fcc-editable-region-- +@keyframes wheel { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md new file mode 100644 index 00000000000000..9995f36296aa28 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md @@ -0,0 +1,131 @@ +--- +id: 6140dd77e0bc5a1f70bd7466 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Give the `0%` rule a `transform` property set to `rotate(0deg)`. This will start the animation with no rotation. + +# --hints-- + +Your `0%` selector should have a `transform` property set to `rotate(0deg)`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +--fcc-editable-region-- +@keyframes wheel { + 0% { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md new file mode 100644 index 00000000000000..fa09153254fdd6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md @@ -0,0 +1,146 @@ +--- +id: 6140de31b1f5b420410728ff +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Now give the `@keyframes wheel` rule a `100%` selector. Within that, set the `transform` to `rotate(360deg)`. By doing this, your animation will now complete a full rotation. + +# --hints-- + +Your `@keyframes wheel` rule should have a `100%` selector. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules +assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%'); +``` + +Your `100%` selector should come after your `0%` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText === '100%') +``` + +Your `100%` selector should have a `transform` property set to `rotate(360deg)`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform === 'rotate(360deg)') +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +--fcc-editable-region-- +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md new file mode 100644 index 00000000000000..8d46278544bcf5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md @@ -0,0 +1,142 @@ +--- +id: 6140df547f09402144e40b92 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +The `animation-name` property is used to link a `@keyframes` rule to a CSS selector. The value of this property should match the name of the `@keyframes` rule. Give your `.wheel` selector an `animation-name` property set to `wheel`. + +The `animation-duration` property is used to set how long the animation should sequence to complete. The time should be specified in either seconds (`s`) or milliseconds (`ms`). Set your `.wheel` selector to have an `animation-duration` property of `10s`. + +# --hints-- + +Your `.wheel` selector should have an `animation-name` property set to `wheel`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationName === 'wheel'); +``` + +Your `.wheel` selector should have an `animation-duration` property set to `10s`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationDuration === '10s'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} +--fcc-editable-region-- + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md new file mode 100644 index 00000000000000..c52cfccd3f04b5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md @@ -0,0 +1,144 @@ +--- +id: 6140e0d875ec16262f26432b +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +The `animation-iteration-count` property sets how many times your animation should repeat. This can be set to a number, or to `infinite` to indefinitely repeat the animation. Your Ferris wheel should never stop, so set the `.wheel` selector to have an `animation-iteration-count` of `infinite`. + +The `animation-timing-function` property sets how the animation should progress over time. There are a few different values for this property, but you want the Ferris wheel animation to run at the same rate from start to finish. Set the `animation-timing-function` to `linear` in your `.wheel` selector. + +# --hints-- + +Your `.wheel` selector should have an `animation-iteration-count` property set to `infinite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationIterationCount === 'infinite'); +``` + +Your `.wheel` selector should have an `animation-timing-function` property set to `linear`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationTimingFunction === 'linear'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; +} +--fcc-editable-region-- + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md new file mode 100644 index 00000000000000..c4620baae2f12b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md @@ -0,0 +1,191 @@ +--- +id: 6140f4b5c1555a2960de1e5f +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Create another `@keyframes` rule with the name `cabins`. Use the same properties as your `@keyframes wheel`, copying both the `0%` and `100%` rules, but set the `transform` property of the `100%` selector to `rotate(-360deg)`. + +# --hints-- + +You should have a `@keyframes` rule. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 2); +``` + +Your new `@keyframes` rule should be named `cabins`. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes'); +assert(rules?.[0]?.name === 'cabins' || rules?.[1]?.name === 'cabins'); +``` + +Your new `@keyframes` rule should come after your `@keyframes wheel` rule. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.name === 'cabins'); +``` + +You should not change the name of your `@keyframes wheel` rule. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel'); +``` + +Your `@keyframes cabins` rule should have a `0%` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.keyText === '0%'); +``` + +Your `0%` selector should have a `transform` property set to `rotate(0deg)`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)'); +``` + +Your `@keyframes cabins` rule should have a `100%` selector. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules +assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%'); +``` + +Your `100%` selector should come after your `0%` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '100%') +``` + +Your `100%` selector should have a `transform` property set to `rotate(-360deg)`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.transform === 'rotate(-360deg)') +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md new file mode 100644 index 00000000000000..b737efa3c64330 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md @@ -0,0 +1,149 @@ +--- +id: 614100d7d335bb2a5ff74f1f +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +With your `.wheel` selector, you created four different properties to control the animation. For your `.cabin` selector, you can use the `animation` property to set these all at once. + +Set the `animation` property of the `.cabin` rule to `cabins 10s linear infinite`. This will set the `animation-name`, `animation-duration`, `animation-timing-function`, and `animation-iteration-count` properties in that order. + +# --hints-- + +Your `.cabin` selector should have an `animation` property set to `cabins 10s linear infinite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s linear 0s infinite normal none running cabins'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +--fcc-editable-region-- +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} +--fcc-editable-region-- + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-360deg); + } +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md new file mode 100644 index 00000000000000..ba956856fa70f3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md @@ -0,0 +1,151 @@ +--- +id: 61410126fa3a6d2b3cda502e +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +To make your cabin animation seem more like a natural swinging motion, you can use the `ease-in-out` timing function. This setting will tell the animation to start and end at a slower pace, but move more quickly in the middle of the cycle. + +Replace `linear` to `ease-in-out` in the `.cabin` selector. + +# --hints-- + +Your `.cabin` selector should have an `animation` property set to `cabins 10s ease-in-out infinite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins'); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +--fcc-editable-region-- +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s linear infinite; +} +--fcc-editable-region-- + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-360deg); + } +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md new file mode 100644 index 00000000000000..fa8f53a0a0c4dc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md @@ -0,0 +1,148 @@ +--- +id: 6141019eadec6d2c6c6f007b +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +You can use `@keyframes` rules to control more than just the transformation of an element. In the `0%` selector of your `@keyframes cabins`, set the `background-color` to `yellow`. + +# --hints-- + +Your `0%` selector should have a `background-color` property set to `yellow`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor === 'yellow'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +--fcc-editable-region-- +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-360deg); + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md new file mode 100644 index 00000000000000..3e4365297b2f9b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md @@ -0,0 +1,291 @@ +--- +id: 6141026ec9882f2d39dcf2b8 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Between the `0%` and `100%` selectors, add a `50%` selector. This will apply in the middle of the animation cycle. Set the `background-color` to `purple`. + +# --hints-- + +You should create a new `50%` selector in your `@keyframes cabins` rule. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules; +assert(rules?.[0]?.keyText === '50%' || rules?.[1]?.keyText === '50%' || rules?.[2]?.keyText === '50%'); +``` + +Your `50%` selector should be between your `0%` and `100%` selectors. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '50%'); +``` + +Your `50%` selector should have a `background-color` property set to `purple`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'purple'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +--fcc-editable-region-- +@keyframes cabins { + 0% { + transform: rotate(0deg); + background-color: yellow; + } + 100% { + transform: rotate(-360deg); + } +} +--fcc-editable-region-- +``` + +## --solutions-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes cabins { + 0% { + transform: rotate(0deg); + background-color: yellow; + } + 50% { + background-color: purple; + } + 100% { + transform: rotate(-360deg); + } +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md new file mode 100644 index 00000000000000..8bba5c8a713bf5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md @@ -0,0 +1,154 @@ +--- +id: 6169ab1aaeb4cd1174def700 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Because the animation is on an infinite loop and the start and end colors are not the same, the transition appears jerky when it switches back to yellow from red. + +To start fixing this, remove the `background-color` from your `0%` selector. + +# --hints-- + +Your `0%` selector should not have a `background-color` property. + +```js +assert(!new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +--fcc-editable-region-- +@keyframes cabins { + 0% { + transform: rotate(0deg); + background-color: yellow; + } + 50% { + background-color: purple; + } + 100% { + transform: rotate(-360deg); + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md new file mode 100644 index 00000000000000..428dde46e7aaae --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md @@ -0,0 +1,164 @@ +--- +id: 6169b1357fcb701bb5efc619 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Create a new `25%` selector between your `0%` and `50%` selectors. Give this new selector the `background-color` property set to `yellow`. + +# --hints-- + +You should create a new `25%` selector in your `@keyframes cabins` rule. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules; +assert(rules?.[0]?.keyText === '25%' || rules?.[1]?.keyText === '25%' || rules?.[2]?.keyText === '25%' || rules?.[3]?.keyText === '25%'); +``` + +Your `25%` selector should be between your `0%` and `50%` selectors. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '25%'); +``` + +Your `25%` selector should have a `background-color` property set to `yellow`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'yellow'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +--fcc-editable-region-- +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 50% { + background-color: purple; + } + 100% { + transform: rotate(-360deg); + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md new file mode 100644 index 00000000000000..a92317cd12e898 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md @@ -0,0 +1,304 @@ +--- +id: 6169b284950e171d8d0bb16a +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Finally, create a new `75%` selector between your `50%` and `100%` selectors. Give this new selector a `background-color` property set to `yellow.` + +With that, your animation is much smoother and your Ferris wheel is complete. + +# --hints-- + +You should create a new `75%` selector in your `@keyframes cabins` rule. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules; +assert(rules?.[0]?.keyText === '75%' || rules?.[1]?.keyText === '75%' || rules?.[2]?.keyText === '75%' || rules?.[3]?.keyText === '75%' || rules?.[4]?.keyText === '75%'); +``` + +Your `75%` selector should be between your `50%` and `100%` selectors. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.keyText === '75%'); +``` + +Your `75%` selector should have a `background-color` property set to `yellow`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.style?.backgroundColor === 'yellow'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +--fcc-editable-region-- +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 25% { + background-color: yellow; + } + 50% { + background-color: purple; + } + 100% { + transform: rotate(-360deg); + } +} +--fcc-editable-region-- +``` + +## --solutions-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 0%; +} + +.line:nth-of-type(2) { + transform: rotate(60deg); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 25% { + background-color: yellow; + } + 50% { + background-color: purple; + } + 75% { + background-color: yellow; + } + 100% { + transform: rotate(-360deg); + } +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md new file mode 100644 index 00000000000000..5058aca6d76c22 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md @@ -0,0 +1,69 @@ +--- +id: 617ace7d831f9c16a569b38a +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Give your `.wheel` selector a `max-height` and `max-width` property both set to `500px`. + +# --hints-- + +Your `.wheel` selector should have a `max-height` property set to `500px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxHeight === '500px'); +``` + +Your `.wheel` selector should have a `max-width` property set to `500px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxWidth === '500px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md new file mode 100644 index 00000000000000..f89df517d905df --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md @@ -0,0 +1,66 @@ +--- +id: 61695197ac34f0407e339882 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +As you've seen in the previous projects, webpages should start with a `DOCTYPE html` declaration, followed by an `html` element. + +Add a `DOCTYPE html` declaration at the top of the document, and an `html` element after that. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/gi)); +``` + +Your `DOCTYPE` declaration should be at the beginning of your HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md new file mode 100644 index 00000000000000..20f457eb26683b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md @@ -0,0 +1,67 @@ +--- +id: 61695ab9f6ffe951c16d03dd +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Nest a `head` element within the `html` element. Just after the `head` element, add a `body` element. + +# --hints-- + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +Your `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +Your `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +Your `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md new file mode 100644 index 00000000000000..52510787c8075c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md @@ -0,0 +1,56 @@ +--- +id: 61695c4aad56f95497c19583 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Remember that the `title` element gives search engines extra information about the page. It also tells browsers what text to display in the title bar when the page is open, and on the tab for the page. + +Within the `head` element, nest a `title` element with the text `Colored Markers`. + +# --hints-- + +You should have an opening `title` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `title` tag. + +```js +assert(code.match(/<\/title\s*>/i)); +``` + +Your project should have the title `Colored Markers`. + +```js +const title = document.querySelector('title'); +assert.equal(title?.text?.trim()?.toLowerCase(), 'colored markers') +``` + +Remember, casing and spelling matter for the title text. + +```js +const title = document.querySelector('title'); +assert.equal(title?.text?.trim(), 'Colored Markers'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md new file mode 100644 index 00000000000000..b379d09aefbb25 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md @@ -0,0 +1,52 @@ +--- +id: 61695d1fbc003856628bf561 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +To tell browsers how to encode characters on your page, set the `charset` to `utf-8`. `utf-8` is a universal character set that includes almost every character from all human languages. + +Inside the `head` element, nest a `meta` element with the attribute `charset` set to `utf-8`. Remember that `meta` elements are self-closing, and do not need a closing tag. + +# --hints-- + +You should have one `meta` element. + +```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 1); +``` + +Your `meta` element should be a self-closing element. + +```js +assert(code.match(/<\/meta>/i) === null); +``` + +Your `meta` element should have a `charset` attribute set to `utf-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +assert.exists(target); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + Colored Markers + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md new file mode 100644 index 00000000000000..dd53e198beebd5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md @@ -0,0 +1,53 @@ +--- +id: 616965351e74d4689eb6de30 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Finally, use a `viewport` `` tag to make sure your page looks the same on all devices. + +Nest a self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0`. + +# --hints-- + +You should have two `meta` elements. + +```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 2); +``` + +Your new `meta` element should be a self-closing element. + +```js +assert(code.match(/<\/meta>/i) === null); +``` + +Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0'); +assert.exists(target); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Colored Markers + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md new file mode 100644 index 00000000000000..f63e30df5d33f8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md @@ -0,0 +1,72 @@ +--- +id: 616968c2c94c8071b349c146 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Now you're ready to start adding content to the page. + +Within the `body`, nest an `h1` element with the text `CSS Color Markers`. + +# --hints-- + +Your code should have an `h1` element. + +```js +const title = document.querySelector('h1'); +assert.exists(title); +``` + +You should have an opening `h1` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `h1` tag. + +```js +assert(code.match(/<\/h1\s*>/i)); +``` + +Your `h1` element should be within the `body` element. + +```js +assert(document.querySelector('h1')?.parentElement?.localName === 'body'); +``` + +Your `h1` element should have the text `CSS Color Markers`. + +```js +const h1 = document.querySelector('h1'); +assert.equal(h1?.textContent?.trim()?.toLowerCase(), 'css color markers') +``` + +Remember, the casing and spelling matter for the `h1` text. + +```js +const h1 = document.querySelector('h1'); +assert.equal(h1?.textContent?.trim(), 'CSS Color Markers'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md new file mode 100644 index 00000000000000..d8724965b77226 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md @@ -0,0 +1,74 @@ +--- +id: 61696ef7ac756c829f9e4048 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +In this project you'll work with an external CSS file to style the page. We've already created a `styles.css` file for you. But before you can use it, you'll need to link it to the page. + +Nest a `link` element within the `head`. Give it a `rel` attribute set to `stylesheet`, a `type` attribute set to `text/css`, and an `href` attribute set to `styles.css`. + +# --hints-- + +Your code should have one `link` element. + +```js +assert(code.match(//i) === null); +``` + +Your `link` element should be within your `head` element. + +```js +const head = code.match(/(.|\r|\n)*<\/head>/i)?.[0]; +assert(head.match(/ + + --fcc-editable-region-- + + + + Colored Markers + + --fcc-editable-region-- + +

CSS Color Markers

+ + +``` + +```css +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md new file mode 100644 index 00000000000000..3f5889a4404cba --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md @@ -0,0 +1,59 @@ +--- +id: 616971b3cd990186b66c99a1 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Now that your external CSS file is set up, you can start styling the page. + +As a reminder, here's how to target a paragraph element and align it to the right: + +```css +p { + text-align: right; +} +``` + +Create a new CSS rule that targets the `h1` element, and set its `text-align` property to `center`. + +# --hints-- + +You should use an `h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +Your `h1` CSS rule should have a `text-align` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md new file mode 100644 index 00000000000000..3ba912b35ef092 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md @@ -0,0 +1,71 @@ +--- +id: 616d3a67ccf800ad94ec89ae +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Now you'll add some elements that you'll eventually style into color markers. + +First, within the `body`, add a `div` element and set its `class` attribute to `container`. Make sure the `div` element is below the `h1` element. + +# --hints-- + +You should have an opening `div` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `div` tag. + +```js +assert(code.match(/<\/div\s*>/i)); +``` + +Your `div` element should be within your `body` element. + +```js +assert(document.querySelector('div')?.parentElement?.localName === 'body'); +``` + +Your `div` element should be after the `h1` element. + +```js +assert.exists(document.querySelector('h1 + div')); +``` + +Your `div` element should have a `class` attribute set to `container`. + +```js +assert(document.querySelector('div')?.classList?.contains('container')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + +--fcc-editable-region-- + +

CSS Color Markers

+ +--fcc-editable-region-- + +``` + +```css +h1 { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md new file mode 100644 index 00000000000000..dac8c85d719a09 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md @@ -0,0 +1,66 @@ +--- +id: 616d47bc9eedc4bc7f621bec +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Next, within the `div`, add another `div` element and give it a class of `marker`. + +# --hints-- + +Your new `div` element should have an opening tag. + +```js +assert([...code.matchAll(//gi)][1]); +``` + +Your new `div` element should have a closing tag. + +```js +assert([...code.matchAll(/<\/div\s*>/gi)][1]); +``` + +You should nest your new `div` element within the `div` with the class `container`. + +```js +assert(document.querySelector('.container')?.children[0]?.localName === 'div'); +``` + +You should give your new `div` element a class of `marker`. + +```js +const containerChildren = [...document.querySelector('.container')?.children]; +assert(containerChildren.every(child => child.classList?.contains('marker'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + +--fcc-editable-region-- + +

CSS Color Markers

+
+
+ +--fcc-editable-region-- + +``` + +```css +h1 { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md new file mode 100644 index 00000000000000..acc265adee723a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md @@ -0,0 +1,68 @@ +--- +id: 616d4a84b756d9c4b8255093 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +It's time to add some color to the page. Remember that one way to add color to an element is to use a color keyword like `black`, `cyan`, or `yellow`. + +As a reminder, here's how to target the class `freecodecamp`: + +```css +.freecodecamp { + +} +``` + +Create a new CSS rule that targets the class `marker`, and set its `background-color` property to `red`. + +# --hints-- + +You should create a class selector to target the `marker` class. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')); +``` + +Your `.marker` CSS rule should have a `background-color` property set to `red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor === 'red'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md new file mode 100644 index 00000000000000..253276485b8a8b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md @@ -0,0 +1,62 @@ +--- +id: 616d50b93ba424d6282c99cf +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the marker `div` element is empty, it doesn't have any width or height by default. + +In your `.marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`. + +# --hints-- + +Your `.marker` CSS rule should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.width === '200px'); +``` + +Your `.marker` CSS rule should have a `height` property set to `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.height === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.marker { + background-color: red; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md new file mode 100644 index 00000000000000..8ef151f86cb235 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md @@ -0,0 +1,60 @@ +--- +id: 616d525007b8c5d8b3308b1c +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Your marker would look better if it was centered on the page. An easy way to do that is with the `margin` shorthand property. + +In the last project, you set the margin area of elements separately with properties like `margin-top` and `margin-left`. The `margin` shorthand property makes it easy to set multiple margin areas at the same time. + +To center your marker on the page, set its `margin` property to `auto`. This sets `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` all to `auto`. + +# --hints-- + +Your `.marker` CSS rule should have a `margin` property set to `auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.marker { + width: 200px; + height: 25px; + background-color: red; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md new file mode 100644 index 00000000000000..8d6ed3e35cfd1a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md @@ -0,0 +1,91 @@ +--- +id: 616d55bd160a95e22453a081 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Now that you've got one marker centered with color, it's time to add the other markers. + +In the `container` `div`, add two more `div` elements and give them each a class of `marker`. + +# --hints-- + +Your first new `div` element should have an opening tag. + +```js +assert([...code.matchAll(//gi)][2]); +``` + +Your first new `div` element should have a closing tag. + +```js +assert([...code.matchAll(/<\/div\s*>/gi)][2]); +``` + +Your second new `div` element should have an opening tag. + +```js +assert([...code.matchAll(//gi)][3]); +``` + +Your second new `div` element should have a closing tag. + +```js +assert([...code.matchAll(/<\/div\s*>/gi)][3]); +``` + +Your new `div` elements should be within the `div` with the class `container`. + +```js +const containerChildren = [...document.querySelector('.container')?.children]; +assert(containerChildren.every(child => child?.localName === 'div') && containerChildren.length === 3); +``` + +Your new `div` elements should both have a class of `marker`. + +```js +const containerChildren = [...document.querySelector('.container')?.children]; +assert(containerChildren.every(child => child?.classList?.contains('marker'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+--fcc-editable-region-- +
+
+
+
+--fcc-editable-region-- + + +``` + +```css +h1 { + text-align: center; +} + +.marker { + width: 200px; + height: 25px; + background-color: red; + margin: auto; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md new file mode 100644 index 00000000000000..4b95071fc6c6c6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md @@ -0,0 +1,65 @@ +--- +id: 616d595270d902f0e7086e18 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +While you have three separate marker `div` elements, they look like one big rectangle. You should add some space between them to make it easier to see each element. + +When the shorthand `margin` property has two values, it sets `margin-top` and `margin-bottom` to the first value, and `margin-left` and `margin-right` to the second value. + +In your `.marker` CSS rule, set the `margin` property to `10px auto`. + +# --hints-- + +Your `.marker` CSS rule should have a `margin` property set to `10px auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === '10px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.marker { + width: 200px; + height: 25px; + background-color: red; + margin: auto; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md new file mode 100644 index 00000000000000..77d0dd6b15b1ee --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md @@ -0,0 +1,73 @@ +--- +id: 61764c602bee6974e7790f35 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +In school, you might have learned that red, yellow, and blue are primary colors, and learned how to create new colors by mixing those. However, this is an outdated model. + +These days, there are two main color models: the additive RGB (red, green, blue) model used in electronic devices, and the subtractive CMYK (cyan, magenta, yellow, black) model used in print. In this project you'll work with the RGB model. + +First, add the `class` `one` to the first marker `div` element. + +# --hints-- + +You should add the class `one` to the first marker `div` element. + +```js +const containerFirstChild = [...document.querySelector('.container')?.children][0]; +assert(containerFirstChild?.classList?.contains('one')); +``` + +Your first marker `div` should have the classes `marker` and `one`. + +```js +const containerFirstChild = [...document.querySelector('.container')?.children][0]; +assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('one')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.marker { + width: 200px; + height: 25px; + background-color: red; + margin: 10px auto; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f23ea21477b76f3b80f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f23ea21477b76f3b80f.md new file mode 100644 index 00000000000000..3542ededcf9db5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f23ea21477b76f3b80f.md @@ -0,0 +1,61 @@ +--- +id: 61764f23ea21477b76f3b80f +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Next, remove the `background-color` property and its value from the `.marker` CSS rule. + +# --hints-- + +Your `.marker` CSS rule should not have a `background-color` property and value. + +```js +assert(!code.includes('background-color') && !new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.marker { + width: 200px; + height: 25px; + background-color: red; + margin: 10px auto; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md new file mode 100644 index 00000000000000..8fb1f9ab1e0c1f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md @@ -0,0 +1,68 @@ +--- +id: 61764f7e5240eb7ccc7f6a0a +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Then, create a new CSS rule that targets the class `one` and set its `background-color` property to `red`. + +# --hints-- + +You should use a class selector to target the class `one`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')); +``` + +Your `.one` CSS rule should have a `background-color` property set to `red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'red'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764fdda535587e1fefb3aa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764fdda535587e1fefb3aa.md new file mode 100644 index 00000000000000..2a61c6dd37d78d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764fdda535587e1fefb3aa.md @@ -0,0 +1,86 @@ +--- +id: 61764fdda535587e1fefb3aa +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Add the class `two` to the second marker `div`, and the class `three` to the third marker `div`. + +# --hints-- + +You should add the class `two` to the second marker `div` element in the `container` `div`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(containerSecondChild?.classList?.contains('two')); +``` + +Your second marker `div` should have the classes `marker` and `two`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild.classList?.contains('two')); +``` + +You should add the class `three` to the third marker `div` element in the `container` `div`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(containerThirdChild?.classList?.contains('three')); +``` + +Your third marker `div` should have the classes `marker` and `three`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('three')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: red; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md new file mode 100644 index 00000000000000..3a574feeffa51e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md @@ -0,0 +1,86 @@ +--- +id: 6176519636a76b810ab1219a +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Create a CSS rule that targets the class `two` and set its `background-color` property to `green`. + +Also, create a separate CSS rule that targets the class `three` and set its `background-color` to `blue`. + +# --hints-- + +You should use a class selector to target the class `two`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')); +``` + +Your `.two` CSS rule should have a `background-color` property set to `green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green'); +``` + +You should use a class selector to target the class `three`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')); +``` + +Your `.three` CSS rule should have a `background-color` property set to `blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'blue'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: red; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md new file mode 100644 index 00000000000000..2ee46d062d1e25 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md @@ -0,0 +1,84 @@ +--- +id: 617b65579ce424bf5f02ca73 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Earlier you learned that the RGB color model is additive. This means that colors begin as black, and change as different levels of red, green, and blue are introduced. + +An easy way to see this is with the CSS `rgb` function. + +Create a new CSS rule that targets the class `container` and set its `background-color` to black with `rgb(0, 0, 0)`. + +# --hints-- + +You should use a class selector to target the class `container`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')); +``` + +Your `.container` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: red; +} + +.two { + background-color: green; +} + +.three { + background-color: blue; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md new file mode 100644 index 00000000000000..a48b9691f61072 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md @@ -0,0 +1,90 @@ +--- +id: 617b8b38f32bf2080a140675 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +A function is a piece of code that can take an input and perform a specific action. The CSS `rgb` function accepts values, or arguments, for red, green, and blue, and produces a color: + +```css +rgb(red, green, blue); +``` + +Each red, green, and blue value is a number from `0` to `255`. `0` means that there's 0% of that color, and is black. `255` means that there's 100% of that color. + +In the `.one` CSS rule, replace the color keyword `red` with the `rgb` function. For the `rgb` function, set the value for red to `255`, the value for green to `0`, and the value for blue to `0`. + +# --hints-- + +Your `.one` CSS rule should not use the `red` color keyword to set the `background-color` property. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor !== 'red'); +``` + +Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(0, 0, 0); +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: red; +} +--fcc-editable-region-- + +.two { + background-color: green; +} + +.three { + background-color: blue; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md new file mode 100644 index 00000000000000..0f2209762e71ba --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md @@ -0,0 +1,98 @@ +--- +id: 617b8e0d93a8d10d9a90e720 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Notice that the `background-color` for your marker is still red. This is because you set the red value of the `rgb` function to the max of `255`, or 100% red, and set both the green and blue values to `0`. + +Now use the `rgb` function to set the other colors. + +In the `.two` CSS rule, use the `rgb` function to set the `background-color` to the max value for green, and `0` for the other values. And in the `.three` CSS rule, use the `rgb` function to set the `background-color` to the max value for blue, and `0` for the other values. + +# --hints-- + +Your `.two` CSS rule should not use the `green` color keyword to set the `background-color` property. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor !== 'green'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)'); +``` + +Your `.three` CSS rule should not use the `blue` color keyword to set the `background-color` property. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor !== 'blue'); +``` + +Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(0, 0, 0); +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.two { + background-color: green; +} + +.three { + background-color: blue; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md new file mode 100644 index 00000000000000..186877a3bb6250 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md @@ -0,0 +1,78 @@ +--- +id: 617b92b9de349513466f6156 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +While the red and blue markers look the same, the green one is much lighter than it was before. This is because the `green` color keyword is actually a darker shade, and is about halfway between black and the maximum value for green. + +In the `two` CSS rule, set the green value in the `rgb` function to `127` to lower its intensity. + +# --hints-- + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(0, 0, 0); +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(0, 255, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md new file mode 100644 index 00000000000000..00eb70358c8cc9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md @@ -0,0 +1,84 @@ +--- +id: 617b954d9f4f6217a749380e +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Now add a little more vertical space between your markers and the edge of the `container` element they're in. + +In the `.container` CSS rule, use the shorthand `padding` property to add `10px` of top and bottom padding, and set the left and right padding to `0`. This works similarly to the shorthand `margin` property you used earlier. + +# --hints-- + +You should not remove the `background-color` property and its value from the `.container` CSS rule. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your `.container` CSS rule should have a `padding` property set to `10px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.padding === '10px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.container { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 127, 0); +} + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md new file mode 100644 index 00000000000000..aca3dbc2ee12b0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md @@ -0,0 +1,79 @@ +--- +id: 617b97abd9f3f61d1590b815 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +In the additive RGB color model, primary colors are colors that, when combined, create pure white. But for this to happen, each color needs to be at its highest intensity. + +Before you combine colors, set your green marker back to pure green. For the `rgb` function in the `.two` CSS rule, set green back to the max value of `255`. + +# --hints-- + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(0, 0, 0); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(0, 127, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md new file mode 100644 index 00000000000000..49f5515ce1d872 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md @@ -0,0 +1,79 @@ +--- +id: 617b9ad735109e217284e095 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Now that you have the primary RGB colors, it's time to combine them. + +For the `rgb` function in the `.container` rule, set the red, green, and blue values to the max of `255`. + +# --hints-- + +Your `.container` CSS rule should have a `background-color` property set to `rgb(255, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(255, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.container { + background-color: rgb(0, 0, 0); + padding: 10px 0; +} +--fcc-editable-region-- + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 255, 0); +} + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md new file mode 100644 index 00000000000000..d777f3c1b9ff5a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md @@ -0,0 +1,79 @@ +--- +id: 617bb5624a75e86463b7e638 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Secondary colors are the colors you get when you combine primary colors. You might have noticed some secondary colors in the last step as you changed the red, green, and blue values. + +To create the first secondary color, yellow, update the `rgb` function in the `.one` CSS rule to combine pure red and pure green. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 255, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.two { + background-color: rgb(0, 255, 0); +} + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md new file mode 100644 index 00000000000000..937acb8a9fbb34 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md @@ -0,0 +1,77 @@ +--- +id: 617bb77353188166af43f3ac +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +To create the next secondary color, cyan, update the `rgb` function in the `.two` CSS rule to combine pure green and pure blue. + +# --hints-- + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 255, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(0, 255, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md new file mode 100644 index 00000000000000..f5658b7232c9a3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md @@ -0,0 +1,77 @@ +--- +id: 617bb9fdef27bc6aa0470ac2 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +To create the final secondary color, magenta, update the `rgb` function in the `.three` CSS rule to combine pure blue and pure red. + +# --hints-- + +Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 255, 0); +} + +.two { + background-color: rgb(0, 255, 255); +} + +--fcc-editable-region-- +.three { + background-color: rgb(0, 0, 255); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md new file mode 100644 index 00000000000000..0544007c86489a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md @@ -0,0 +1,79 @@ +--- +id: 617bbb6b97a83f6d1f7d6e38 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Now that you're familiar with secondary colors, you'll learn how to create tertiary colors. Tertiary colors are created by combining a primary with a nearby secondary color. + +To create the tertiary color orange, update the `rgb` function in the `.one` CSS rule so that red is at the max value, and set green to `127`. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 127, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 255, 0); +} +--fcc-editable-region-- + +.two { + background-color: rgb(0, 255, 255); +} + +.three { + background-color: rgb(255, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md new file mode 100644 index 00000000000000..744273afa6cb6c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md @@ -0,0 +1,79 @@ +--- +id: 617bc3386dc7d07d6469bf20 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Notice that, to create orange, you had to increase the intensity of red and decrease the intensity of the green `rgb` values. This is because orange is the combination of red and yellow, and falls between the two colors on the color wheel. + +To create the tertiary color spring green, combine cyan with green. Update the `rgb` function in the `.two` CSS rule so that green is at the max value, and set blue to `127`. + +# --hints-- + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 127)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 127)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 127, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(0, 255, 255); +} +--fcc-editable-region-- + +.three { + background-color: rgb(255, 0, 255); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md new file mode 100644 index 00000000000000..f82f866598f697 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md @@ -0,0 +1,77 @@ +--- +id: 617bc4824e233180553a8069 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +And to create the tertiary color violet, combine magenta with blue. Update the `rgb` function in the `.three` CSS rule so that blue is at the max value, and set red to `127`. + +# --hints-- + +Your `.three` CSS rule should have a `background-color` property set to `rgb(127, 0, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(127, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 127, 0); +} + +.two { + background-color: rgb(0, 255, 127); +} + +--fcc-editable-region-- +.three { + background-color: rgb(255, 0, 255); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md new file mode 100644 index 00000000000000..5f6b3d4abe73d2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md @@ -0,0 +1,95 @@ +--- +id: 617bd6ec666b1da2587e4e37 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +There are three more tertiary colors: chartreuse green (green + yellow), azure (blue + cyan), and rose (red + magenta). + +To create chartreuse green, update the `rgb` function in the `.one` rule so that red is at `127`, and set green to the max value. + +For azure, update the `rgb` function in the `.two` rule so that green is at `127` and blue is at the max value. + +And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` rule so that blue is at `127` and red is at the max value. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(127, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(127, 255, 0)'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 255)'); +``` + +Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 127)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 127)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 127, 0); +} + +.two { + background-color: rgb(0, 255, 127); +} + +.three { + background-color: rgb(127, 0, 255); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md new file mode 100644 index 00000000000000..4ec9cb4d658415 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md @@ -0,0 +1,91 @@ +--- +id: 618a00ed1ca871a2b3aca0cb +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Now that you've gone through all the primary, secondary, and tertiary colors on a color wheel, it'll be easier to understand other color theory concepts and how they impact design. + +First, in the rules `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. Remember that the `rgb` function uses the additive color model, where colors start as black and change as the values of red, green, and blue increase. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(127, 255, 0); +} + +.two { + background-color: rgb(0, 127, 255); +} + +.three { + background-color: rgb(255, 0, 127); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md new file mode 100644 index 00000000000000..39db2f41f7da24 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md @@ -0,0 +1,87 @@ +--- +id: 618a0927005553b74bfa05ae +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +A color wheel is a circle where similar colors, or hues, are near each other, and different ones are further apart. For example, pure red is between the hues rose and orange. + +Two colors that are opposite from each other on the color wheel are called complementary colors. If two complementary colors are combined, they produce gray. But when they are placed side-by-side, these colors produce strong visual contrast and appear brighter. + +In the `rgb` function for the `.one` CSS rule, set the red value to the max of `255` to produce pure red. In the `rgb` function for `.two` CSS rule, set the values for green and blue to the max of `255` to produce cyan. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md new file mode 100644 index 00000000000000..fc602176d75500 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md @@ -0,0 +1,87 @@ +--- +id: 618a0b2befb143baefab632b +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Notice that the red and cyan colors are very bright right next to each other. This contrast can be distracting if it's overused on a website, and can make text hard to read if it's placed on a complementary-colored background. + +It's better practice to choose one color as the dominant color, and use its complementary color as an accent to bring attention to certain content on the page. + +First, in the `h1` rule, use the `rgb` function to set its background color to cyan. + +# --hints-- + +You should not remove or modify the `text-align` property or its value. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); +``` + +Your `h1` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor === 'rgb(0, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +h1 { + text-align: center; +} +--fcc-editable-region-- + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 255, 255); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md new file mode 100644 index 00000000000000..8e1b9429a58b5c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md @@ -0,0 +1,84 @@ +--- +id: 618a1275e873dcc803c2d1aa +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Next, in the `.one` rule, use the `rgb` function to set the `background-color` to black. And in the `.two` rule, use the `rgb` function to set the `background-color` to red. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; + background-color: rgb(0, 255, 255); +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 255, 255); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md new file mode 100644 index 00000000000000..cfe737240c0e63 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md @@ -0,0 +1,82 @@ +--- +id: 618a132676346ac9f7fd59dd +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Notice how your eyes are naturally drawn to the red color in the center? When designing a site, you can use this effect to draw attention to important headings, buttons, or links. + +There are several other important color combinations outside of complementary colors, but you'll learn those a bit later. + +For now, use the `rgb` function in the `.two` rule to set the `background-color` to black. + +# --hints-- + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; + background-color: rgb(0, 255, 255); +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(0, 0, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md new file mode 100644 index 00000000000000..2cd6faab064ce3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md @@ -0,0 +1,79 @@ +--- +id: 618a16873520a8d088ffdf44 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +And in the `h1` rule, remove the `background-color` property and value to go back to the default white color. + +# --hints-- + +Your `h1` CSS rule should not have a `background-color` property or value. + +```js +const backgroundColorInstances = code.match(/background-color:.*;/gi); +assert(backgroundColorInstances.length === 4 && !new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +h1 { + text-align: center; + background-color: rgb(0, 255, 255); +} +--fcc-editable-region-- + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md new file mode 100644 index 00000000000000..acad95102187cb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md @@ -0,0 +1,87 @@ +--- +id: 618a16d21bd3dad1bb3aa8ef +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Now it's time to add other details to the markers, starting with the first one. + +In the first marker `div` element, change the class `one` to `red`. + +# --hints-- + +Your first marker `div` should not have the class `one`. + +```js +const containerFirstChild = [...document.querySelector('.container')?.children][0]; +assert(!containerFirstChild?.classList?.contains('one')); +``` + +Your first marker `div` should have the classes `marker` and `red`. + +```js +const containerFirstChild = [...document.querySelector('.container')?.children][0]; +assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('red')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+
+
+
+ --fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md new file mode 100644 index 00000000000000..9f18cab9cd0ece --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md @@ -0,0 +1,89 @@ +--- +id: 619b72a0db211f1c29afb906 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Update the `.one` class selector to target the new `red` class. + +# --hints-- + +Your code should no longer have a `.one` class selector. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.one')); +``` + +You should use a class selector to target the class `red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')); +``` + +Your `.red` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md new file mode 100644 index 00000000000000..ad28baa6ee8fb3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md @@ -0,0 +1,77 @@ +--- +id: 619b7396e57b771f903be90d +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +And update the `rgb` function in the `.red` rule so that the red value is at the max. + +# --hints-- + +Your `.red` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md new file mode 100644 index 00000000000000..35f8bac901d6d7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md @@ -0,0 +1,99 @@ +--- +id: 619b7424f43ec9215e538afe +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Next, change the class `two` to `green` in the second marker `div`, and the class `three` to `blue` in the third marker `div`. + +# --hints-- + +Your second marker `div` should not have the class `two`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(!containerSecondChild?.classList?.contains('two')); +``` + +Your second marker `div` should have the classes `marker` and `green`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green')); +``` + +Your third marker `div` should not have the class `three`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(!containerThirdChild?.classList?.contains('three')); +``` + +Your third marker `div` should have the classes `marker` and `blue`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('blue')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+
+
+
+ --fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md new file mode 100644 index 00000000000000..8c5e2685501d2a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md @@ -0,0 +1,107 @@ +--- +id: 619b74fa777a2b2473c94f82 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Update the CSS class selector `.two` so it targets the new `green` class. And update the `.three` selector so it targets the new `blue` class. + +# --hints-- + +Your code should no longer have a `.two` class selector. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.two')); +``` + +You should use a class selector to target the class `green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')); +``` + +Your `.green` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your code should no longer have a `.three` class selector. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.three')); +``` + +You should use a class selector to target the class `blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')); +``` + +Your `.blue` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md new file mode 100644 index 00000000000000..76f5b6fd0c98f1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md @@ -0,0 +1,81 @@ +--- +id: 619b761916dac02643940022 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +A very common way to apply color to an element with CSS is with hexadecimal or hex values. While hex values sound complicated, they're really just another form of RGB values. + +Hex color values start with a `#` character and take six characters from 0-9 and A-F. The first pair of characters represent red, the second pair represent green, and the third pair represent blue. For example, `#4B5320`. + +In the `.green` CSS rule, set the `background-color` property to a hex color code with the values `00` for red, `FF` for green, and `00` blue. + +# --hints-- + +Your `.green` CSS rule should have a `background-color` property set to `#00FF00`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 255, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.green { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +.blue { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md new file mode 100644 index 00000000000000..0abd3e727f67f8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md @@ -0,0 +1,85 @@ +--- +id: 619b7c3c83de403126b69c1e +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +You may already be familiar with decimal, or base 10 values, which go from 0 - 9. Hexadecimal, or base 16 values, go from 0 - 9, then A - F: + +``` +0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F +``` + +With hex colors, `00` is 0% of that color, and `FF` is 100%. So `#00FF00` translates to 0% red, 100% green, and 0% blue, and is the same as `rgb(0, 255, 0)`. + +Lower the intensity of green by setting green value of the hex color to `7F`. + +# --hints-- + +Your `.green` CSS rule should have a `background-color` property set to `#007F00`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.green { + background-color: #00FF00; +} +--fcc-editable-region-- + +.blue { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md new file mode 100644 index 00000000000000..6ee8443a6b2fb6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md @@ -0,0 +1,87 @@ +--- +id: 619b7fd56aa2253778bcf5f7 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The HSL color model, or hue, saturation, and lightness, is another way to represent colors. + +The CSS `hsl` function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness. + +If you imagine a color wheel, the hue red is at 0 degrees, green is at 120 degrees, and blue is at 240 degrees. + +Saturation is the intensity of a color from 0%, or gray, to 100% for pure color. + +Lightness is how bright a color appears, from 0%, or complete black, to 100%, complete white, with 50% being neutral. + +In the `.blue` CSS rule, use the `hsl` function to change the `background-color` property to pure blue. Set the hue to `240`, the saturation to `100%`, and the lightness to `50%`. + +# --hints-- + +Your `.blue` CSS rule should have a `background-color` property set to `hsl(240, 100%, 50%)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +.green { + background-color: #007F00; +} + +--fcc-editable-region-- +.blue { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md new file mode 100644 index 00000000000000..e0d08c837b7791 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md @@ -0,0 +1,83 @@ +--- +id: 61a489b8579e87364b2d2cdb +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +You've learned a few ways to set flat colors in CSS, but you can also use a color transition, or gradient, on an element. + +A gradient is when one color transitions into another. The CSS `linear-gradient` function lets you control the direction of the transition along a line, and which colors are used. + +One thing to remember is that the `linear-gradient` function actually creates an `image` element, and is usually paired with the `background` property which can accept an image as a value. + +In the `.red` CSS rule, change the `background-color` property to `background`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property with the value `rgb(255, 0, 0)`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.red').cssText, 'background: rgb(255, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background-color: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md new file mode 100644 index 00000000000000..317eb2d0ecaae4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md @@ -0,0 +1,87 @@ +--- +id: 61a493ead935c148d2b76312 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +The `linear-gradient` function is very flexible -- here is the basic syntax you'll use in this tutorial: + +```css +linear-gradient(gradientDirection, color1, color2, ...); +``` + +`gradientDirection` is the direction of the line used for the transition. `color1` and `color2` are color arguments, which are the colors that will be used in the transition itself. These can be any type of color, including color keywords, hex, `rgb`, or `hsl`. + +Now you'll apply a red-to-green gradient along a 90 degree line to the first marker. + +First, in the `.red` CSS rule, set the `background` property to `linear-gradient()`, and pass it the value `90deg` as the `gradientDirection`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg)`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md new file mode 100644 index 00000000000000..3b5ca08bde0c22 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md @@ -0,0 +1,79 @@ +--- +id: 61a498399534644f59cff05e +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +As you can see, the `linear-gradient` function produced a smooth red-green gradient. While the `linear-gradient` function needs a minimum of two color arguments to work, it can accept many color arguments. + +Use the `rgb` function to add pure blue as the third color argument to the `linear-gradient` function. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))`. + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md new file mode 100644 index 00000000000000..071ed1df692b65 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md @@ -0,0 +1,85 @@ +--- +id: 61a49d15bdbb5e57cc6fd280 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Color-stops allow you to fine-tune where colors are placed along the gradient line. They are a length unit like `px` or percentages that follow a color in the `linear-gradient` function. + +For example, in this red-black gradient, the transition from red to black takes place at the 90% point along the gradient line, so red takes up most of the available space: + +```css +linear-gradient(90deg, red 90%, black); +``` + +In the `linear-gradient` function, add a `75%` color stop after the first red color argument. Do not add color stops to the other colors arguments. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`. + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md new file mode 100644 index 00000000000000..4f5d1112224b36 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md @@ -0,0 +1,79 @@ +--- +id: 61a4a53c4459446dc134a1c6 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Now that you know the basics of how the `linear-gradient` function and color-stops work, you can use them to make the markers look more realistic. + +In the `linear-gradient` function, set `gradientDirection` to `180deg`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`. + +```js +assert.include(['linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md new file mode 100644 index 00000000000000..762f8303eaec9a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md @@ -0,0 +1,77 @@ +--- +id: 61a4a6e908bc34725b4c25ac +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Next, set the color-stop for red to `0%`, the color-stop for green to `50%`, and the color-stop for blue to `100%`; + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`. + +```js +assert.include(['linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md new file mode 100644 index 00000000000000..8d4a79c76183fd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md @@ -0,0 +1,79 @@ +--- +id: 61a4a7877da33a73a1c1723e +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now that the color-stops are set, you'll apply different shades of red to each color argument in the `linear-gradient` function. The shades on the top and bottom edges of the marker will be darker, while the one in the middle will be lighter, as if there's a light above it. + +For the first color argument, which is currently pure red, update the `rgb` function so the value for red is `122`, the value for green is `74`, and the value for blue is `14`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`. + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md new file mode 100644 index 00000000000000..dbf997b5363fa8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md @@ -0,0 +1,79 @@ +--- +id: 61a4ac092eb21e7dbfe61c33 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Now modify the second color argument in the `linear-gradient` function, which is currently pure green. + +Update the `rgb` function so the value for red is `245`, the value of green is `62`, and the value of blue is `113`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%)`. + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md new file mode 100644 index 00000000000000..b1b45450da6b25 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md @@ -0,0 +1,79 @@ +--- +id: 61a4acbb5587197f68544d00 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Finally, modify the third color argument in the `linear-gradient` function, which is currently pure blue. + +Update the `rgb` function so the value for red is `162`, the value of green is `27`, and the value of blue is `27`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%)`. + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md new file mode 100644 index 00000000000000..e76ee3a41f0977 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md @@ -0,0 +1,79 @@ +--- +id: 61a4ada3aabeec822b2975d9 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +The red marker is looking much more realistic. Now you'll do the same for the green marker, using a combination of the `linear-gradient` function and hex colors. + +In the `.green` CSS rule, change the `background-color` property to `background`. + +# --hints-- + +Your `.green` CSS rule should have a `background` property with the value `#007F00`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.green').cssText, 'background: rgb(0, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background-color: #007F00; +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md new file mode 100644 index 00000000000000..0cd2dbfedf8fe1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md @@ -0,0 +1,79 @@ +--- +id: 61a4ae5f29eb5584187201c3 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +For this marker, you'll use hex color codes for your gradient. + +Use the `linear-gradient` function and set `gradientDirection` to `180deg`. And for the first color argument, use a hex color code with the values `55` for red, `68` for green, and `0D` for blue. + +# --hints-- + +Your `.green` CSS rule should have a `background` property with the value `linear-gradient(180deg, #55680D)`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:linear-gradient\(180deg,#55680D\)/i); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: #007F00; +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md new file mode 100644 index 00000000000000..7ddc5efcf8cc8c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md @@ -0,0 +1,79 @@ +--- +id: 61a5be9833e7dc178de2af10 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +That's looking better, but the bottom edge of the green marker needs to be darker to add a little more dimension. + +In the same `linear-gradient` function, add a hex color code with the values `11` for red, `6C` for green, and `31` for blue as the third color argument. + +# --hints-- + +Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E, #116C31)`. + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(180deg, #55680D, #71F53E); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md new file mode 100644 index 00000000000000..0c4984223d48c1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md @@ -0,0 +1,81 @@ +--- +id: 61a5bfe091060f1d6a629dd0 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Even without the color-stops, you might have noticed that the colors for the green marker transition at the same points as the red marker. The first color is at the start (0%), the second is in the middle (50%), and the last is at the end (100%) of the gradient line. + +The `linear-gradient` function automatically calculates these values for you, and places colors evenly along the gradient line by default. + +In the `.red` CSS rule, remove the three color stops from the `linear-gradient` function to clean up your code a bit. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. + +```js +assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} +--fcc-editable-region-- + +.green { + background: linear-gradient(180deg, #55680D, #71F53E, #116C31); +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md new file mode 100644 index 00000000000000..f5eea79d8ab74d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md @@ -0,0 +1,91 @@ +--- +id: 61a5c906ab73313316e342f0 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +If no `gradientDirection` argument is provided to the `linear-gradient` function, it arranges colors from top to bottom, or along a 180 degree line, by default. + +Clean up your code a little more by removing the `gradientDirection` argument from both `linear-gradient` functions. + +# --hints-- + +You should remove the `gradientDirection` arguments from the `linear-gradient` functions in your `.red` and `.green` CSS rules. + +```js +assert(!code.match(/linear-gradient\s*\(\s*180deg/gi)); +``` + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. + +```js +assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +Your `.green` CSS rule should have a `background` property set to `linear-gradient(#55680D, #71F53E, #116C31)`. + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(180deg, #55680D, #71F53E, #116C31); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md new file mode 100644 index 00000000000000..a734d04b0a5611 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md @@ -0,0 +1,79 @@ +--- +id: 61a5ca57f50ded36d33eef96 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Now you'll apply a gradient to the blue marker, this time using the `hsl` function as color arguments. + +In the `.blue` CSS rule, change the `background-color` property to `background`. + +# --hints-- + +Your `.blue` CSS rule should have a `background` property with the value `hsl(240, 100%, 50%)`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.blue').cssText, 'background: rgb(0, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background-color: hsl(240, 100%, 50%); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md new file mode 100644 index 00000000000000..058d6e81f78d4d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md @@ -0,0 +1,77 @@ +--- +id: 61a5d594b887335228ee6533 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Use the `linear-gradient` function, and pass in the `hsl` function with the values `186` for hue, `76%` for saturation, and `16%` for lightness as the first color argument. + +# --hints-- + +Your `.blue` CSS rule should have a `background` property with the value `linear-gradient(hsl(186, 76%, 16%))`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:linear-gradient\(hsl\(186,76%,16%\)\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: hsl(240, 100%, 50%); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md new file mode 100644 index 00000000000000..e82ad2175b7b41 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md @@ -0,0 +1,77 @@ +--- +id: 61a5d6701ee08953ca375243 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +As the second color argument, pass in the `hsl` function with the values `223` for hue, `90%` for saturation, and `60%` for lightness. + +# --hints-- + +Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%))`. + +```js +assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md new file mode 100644 index 00000000000000..c79ab37d381def --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md @@ -0,0 +1,77 @@ +--- +id: 61a5d79c858bef560e26c685 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +And as the third color argument, pass in the `hsl` function with the values `240` for hue, `56%` for saturation, and `42%` for lightness. + +# --hints-- + +Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))`. + +```js +assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md new file mode 100644 index 00000000000000..768d6784853703 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md @@ -0,0 +1,87 @@ +--- +id: 61a5d7ef1cfcf45764df07a2 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker. + +Inside the red marker `div`, create a new `div` and give it a class of `sleeve`. + +# --hints-- + +Your new `div` element should be within the red marker's `div` element. + +```js +const redMarkerChildren = [...document.querySelector('.red')?.children]; +assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1); +``` + +Your new `div` element should have a class of `sleeve`. + +```js +const redMarkerChild = [...document.querySelector('.red')?.children][0]; +assert(redMarkerChild?.classList?.contains('sleeve')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+ --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md new file mode 100644 index 00000000000000..2f1dfabe801130 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md @@ -0,0 +1,92 @@ +--- +id: 61adc60b69cd4b87739d2174 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Create a new CSS rule that targets the class `sleeve`. Set the `width` property to `110px`, and the `height` property to `25px`. + +# --hints-- + +You should use a class selector to target class `sleeve`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')); +``` + +Your `.sleeve` CSS rule should have a `width` property set to `110px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.width === '110px'); +``` + +Your `.sleeve` CSS rule should have a `height` property set to `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.height === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md new file mode 100644 index 00000000000000..ad7567ddaa7fdb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md @@ -0,0 +1,98 @@ +--- +id: 61adc91467b5d59328b9f781 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +In the last project, you learned a little bit about borders and the `border-color` property. + +All HTML elements have borders, though they're usually set to `none` by default. With CSS, you can control all aspects of an element's border, and set the border on all sides, or just one side at a time. For a border to be visible, you need to set its width and style. + +In the `.sleeve` CSS rule, add the `border-left-width` property with the value `10px`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left-width` property and with the value `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftWidth === '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md new file mode 100644 index 00000000000000..041dd4629ae2f1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md @@ -0,0 +1,97 @@ +--- +id: 61add79e739a5faee9d96080 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Borders have several styles to choose from. You can make your border a solid line, but you can also use a dashed or dotted line if you prefer. Solid border lines are probably the most common. + +In the `.sleeve` CSS rule, add the `border-left-style` property with the value `solid`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left-style` property and with the value `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md new file mode 100644 index 00000000000000..c1b319d7535388 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md @@ -0,0 +1,100 @@ +--- +id: 61add929e41980b1edbdba7e +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Your border should be visible now. If no color is set, black is used by default. + +But to make your code more readable, it's better to set the border color explicitly. + +In the `.sleeve` CSS rule, add the `border-left-color` property with the value `black`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left-color` property and with the value `black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftColor === 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; + border-left-style: solid; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md new file mode 100644 index 00000000000000..f01a67153e3ce4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md @@ -0,0 +1,123 @@ +--- +id: 61addaf7e83988b59a7d18ff +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +The `border-left` shorthand property lets you to set the left border's width, style, and color at the same time. + +Here is the syntax: + +```css +border-left: width style color; +``` + +In the `.sleeve` CSS rule, replace the `border-left-width`, `border-left-style`, and `border-left-color` properties with the `border-left` shorthand property. The values for the width, style, and color of the left border should be the same. + +# --hints-- + +Your `.sleeve` CSS rule should not have a `border-left-width` property and value. + +```js +assert(!/border-left-width/g.test(code)); +``` + +Your `.sleeve` CSS rule should not have a `border-left-style` property and value. + +```js +assert(!/border-left-style/g.test(code)); +``` + +Your `.sleeve` CSS rule should not have a `border-left-color` property and value. + +```js +assert(!/border-left-color/g.test(code)); +``` + +Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px solid black`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft, '10px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; + border-left-style: solid; + border-left-color: black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md new file mode 100644 index 00000000000000..19048d7a175b35 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md @@ -0,0 +1,97 @@ +--- +id: 61ade49b2dad60c076cbd32d +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Your marker is looking good. But to make it look even more realistic, you can change the border style to double solid borders. + +For the `border-left` shorthand property, change the border style value from `solid` to `double`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px solid black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md new file mode 100644 index 00000000000000..764ea946442f5b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md @@ -0,0 +1,85 @@ +--- +id: 61b092eb9e7fc020b43b1bb2 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +To make the marker look more realistic, give the sleeve a transparent white color. + +First, set the sleeve element's `background-color` to `white`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `background-color` property set to `white`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md new file mode 100644 index 00000000000000..264f0f5531e70d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md @@ -0,0 +1,88 @@ +--- +id: 61b093179e7fc020b43b1bb3 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Opacity describes how opaque, or non-transparent, something is. For example, a solid wall is opaque, and no light can pass through. But a drinking glass is much more transparent, and you can see through the glass to the other side. + +With the CSS `opacity` property, you can control how opaque or transparent an element is. With the value `0`, or 0%, the element will be completely transparent, and at `1.0`, or 100%, the element will be completely opaque like it is by default. + +In the `.sleeve` CSS rule, set the `opacity` property to `0.5`. + +# --hints-- + +Your `.sleeve` CSS rule should have an `opacity` property set to `0.5`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity === '0.5'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md new file mode 100644 index 00000000000000..93cdc0bfa9dabc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md @@ -0,0 +1,89 @@ +--- +id: 61b093219e7fc020b43b1bb4 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Another way to set the opacity for an element is with the alpha channel. Similar to the `opacity` property, the alpha channel controls how transparent or opaque a color is. + +You've already set sleeve's opacity with a named color and the `opacity` property, but you can add an alpha channel to the other CSS color properties. + +Inside the `.sleeve` rule, remove the `opacity` property and value. + +# --hints-- + +Your `.sleeve` CSS rule should not have an `opacity` property and value. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; + opacity: 0.5; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md new file mode 100644 index 00000000000000..c45976bdcb72c2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md @@ -0,0 +1,92 @@ +--- +id: 61b093329e7fc020b43b1bb5 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +You're already familiar with using the `rgb` function to set colors. To add an alpha channel to an `rgb` color, use the `rgba` function instead. + +The `rgba` function works just like the `rgb` function, but takes one more number from `0` to `1.0` for the alpha channel: + +```css +rgba(redValue, greenValue, blueValue, alphaValue); +``` + +In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity. + +# --hints-- + +Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md new file mode 100644 index 00000000000000..ec8be74a9254e6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md @@ -0,0 +1,103 @@ +--- +id: 61b093429e7fc020b43b1bb6 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Your sleeve is looking good, but it would look even better if it was positioned more toward the right side of the marker. One way to do that is to add another element before the sleeve to push it to the right. + +Add a new `div` with the class `cap` before the sleeve `div` element. + +# --hints-- + +Your new `div` element should be within the red marker `div`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2); +``` + +Your new `div` element should have a class of `cap`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +assert(redMarkerChildren.some(child => child?.classList?.contains('cap'))); +``` + +Your cap `div` should be before the sleeve `div`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +const cap = document.querySelector('div.cap'); +const sleeve = document.querySelector('div.sleeve'); +assert(redMarkerChildren.indexOf(cap) < redMarkerChildren.indexOf(sleeve)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+ --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md new file mode 100644 index 00000000000000..f9ee6e25855340 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md @@ -0,0 +1,99 @@ +--- +id: 61b0934c9e7fc020b43b1bb7 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Create a new CSS rule to target the class `cap`. In the new rule, set the `width` property to `60px`, and the `height` to `25px`. + +# --hints-- + +You should use a class selector to target the class `cap`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')); +``` + +Your `.cap` CSS rule should have a `width` property set to `60px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')?.width === '60px'); +``` + +Your `.cap` CSS rule should have a `height` property set to `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')?.height === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md new file mode 100644 index 00000000000000..efc078c2b6745c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md @@ -0,0 +1,104 @@ +--- +id: 61b0936d9e7fc020b43b1bb8 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +It looks like your sleeve disappeared, but don't worry -- it's still there. What happened is that your new cap `div` is taking up the entire width of the marker, and is pushing the sleeve down to the next line. + +This is because the default `display` property for `div` elements is `block`. So when two `block` elements are next to each other, they stack like actual blocks. For example, your marker elements are all stacked on top of each other. + +To position two `div` elements on the same line, set their `display` properties to `inline-block`. + +Create a new rule to target both the `cap` and `sleeve` classes, and set `display` to `inline-block`. + +# --hints-- + +You should use a class selector to target both the `cap` and `sleeve` classes. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve') || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')); +``` + +Your CSS rule should have a `display` property set to `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve')?.display === 'inline-block' || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')?.display === 'inline-block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md new file mode 100644 index 00000000000000..86e62e58584822 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md @@ -0,0 +1,79 @@ +--- +id: 61b095989e7fc020b43b1bb9 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +You'll use the `rgb` function for the colors of this gradient. + +In the `linear-gradient` function, use the `rgb` function to set the first color argument to pure red. + +# --hints-- + +Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg, rgb(255, 0, 0))`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg,rgb\(255,0,0\)\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md new file mode 100644 index 00000000000000..2feee34f4becae --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md @@ -0,0 +1,79 @@ +--- +id: 61b095a79e7fc020b43b1bba +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +You won't see gradient yet because the `linear-gradient` function needs at least two color arguments to work. + +In the same `linear-gradient` function, use the `rgb` function to set the second color argument to pure green. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0))`. + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md new file mode 100644 index 00000000000000..df827472464e42 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md @@ -0,0 +1,77 @@ +--- +id: 61b095c79e7fc020b43b1bbb +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +For the second color argument, use a hex color code with the values `71` for red, `F5` for green, and `3E` for blue. + +# --hints-- + +Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E)`. + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(180deg, #55680D); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md new file mode 100644 index 00000000000000..991db53fbf6adc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md @@ -0,0 +1,97 @@ +--- +id: 61b09f739aa6572d2064f9b8 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +The black color of your border looks pretty harsh against the more transparent sleeve. You can use an alpha channel to lower the opacity of the black border. + +For the `border-left` shorthand property, use the `rgba` function to set the color value to pure black with 75% opacity. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double rgba(0, 0, 0, 0.75)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double rgba(0, 0, 0, 0.75)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md new file mode 100644 index 00000000000000..8d04e6f5a58885 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md @@ -0,0 +1,123 @@ +--- +id: 61b0a1b2af494934b7ec1a72 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Awesome. Your red marker is looking good. Now all you need to do is add the caps and sleeves to your other markers. + +Add a cap and sleeve to both the green and blue markers. You can just copy the `div` elements from the red marker and paste them into the other two markers. + +# --hints-- + +Your green marker `div` should contain two `div` elements. + +```js +const greenMarkerChildren = [...document.querySelector('.green')?.children]; +assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2); +``` + +Your green marker's cap `div` element should be before the sleeve `div` element. + +```js +const greenMarkerChildren = [...document.querySelector('.green')?.children]; +const greenMarkerCap = document.querySelector('.green .cap'); +const greenMarkerSleeve = document.querySelector('.green .sleeve'); +assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve)); +``` + +Your blue marker `div` should contain two `div` elements. + +```js +const blueMarkerChildren = [...document.querySelector('.blue')?.children]; +assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2); +``` + +Your green marker's cap `div` element should be before the sleeve `div` element. + +```js +const blueMarkerChildren = [...document.querySelector('.blue')?.children]; +const blueMarkerCap = document.querySelector('.blue .cap'); +const blueMarkerSleeve = document.querySelector('.blue .sleeve'); +assert(blueMarkerChildren.indexOf(blueMarkerCap) < blueMarkerChildren.indexOf(blueMarkerSleeve)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+
+
+
+
+
+ --fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md new file mode 100644 index 00000000000000..bdfaac6c189174 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md @@ -0,0 +1,109 @@ +--- +id: 61b0a44a6b865738ba49b9fb +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +The last thing you'll do is add a slight shadow to each marker to make them look even more realistic. + +The `box-shadow` property lets you apply one or more shadows around an element. Here is basic syntax: + +```css +box-shadow: offsetX offsetY color; +``` + +Start by adding a simple shadow to the red marker. + +In the `.red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`. + +# --hints-- + +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md new file mode 100644 index 00000000000000..5c65376f1273bc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md @@ -0,0 +1,104 @@ +--- +id: 61b306305810f1c9040ce5a2 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +As you can see, you added a simple red shadow around your marker that's 5 pixels to the right, and 5 pixels down. + +But what if you wanted to position your shadow on the opposite side? You can do that by using negative values for `offsetX` and `offsetY`. + +Update the values for the `box-shadow` property, and set `offsetX` to `-5px`, and `offsetY` to `-5px`. + +# --hints-- + +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `-5px -5px red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red -5px -5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 5px 5px red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md new file mode 100644 index 00000000000000..493568d18aec54 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md @@ -0,0 +1,108 @@ +--- +id: 61b30995968123ceb6b76167 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Notice that the edges of the shadow are sharp. This is because there is an optional `blurRadius` value for the `box-shadow` property: + +```css +box-shadow: offsetX offsetY blurRadius color; +``` + +If a `blurRadius` value isn't included, it defaults to `0` and produces sharp edges. The higher the value of `blurRadius`, the greater the blurring effect is. + +In the `.green` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, `5px` for `blurRadius`, and `green` for `color`. + +# --hints-- + +Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px 5px green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 5px 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} +--fcc-editable-region-- + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md new file mode 100644 index 00000000000000..00b6d4bb92a65d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md @@ -0,0 +1,111 @@ +--- +id: 61b30a286c228bd0c493c09a +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +But what if you wanted to expand the shadow out further? You can do that with the optional `spreadRadius` value: + +```css +box-shadow: offsetX offsetY blurRadius spreadRadius color; +``` + +Like `blurRadius`, `spreadRadius` defaults to `0` if it isn't included. + +Practice by adding a 5 pixel shadow directly around the blue marker. + +In the `.blue` CSS rule, add the `box-shadow` property with the values `0` for `offsetX`, `0` for `offsetY`, `0` for `blurRadius`, `5px` for `spreadRadius`, and `blue` for `color`. + +# --hints-- + +Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 0 5px blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 0px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md new file mode 100644 index 00000000000000..0aa6701e7b1d61 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md @@ -0,0 +1,104 @@ +--- +id: 61b31287fb580ae75a486047 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Now that you're familiar with the `box-shadow` property you can finalize the shadows, starting with the one for the red marker. + +In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, `spreadRadius` is `0`, and `color` is `red`. + +# --hints-- + +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md new file mode 100644 index 00000000000000..a1cfec051adfb8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md @@ -0,0 +1,104 @@ +--- +id: 61b315e76a63b3ecbbb11b75 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Next, update the `color` value of the red marker's `box-shadow` property. + +Replace the named color with the `rgba` function. Use the values `83` for red, `14` for green, `14` for `blue` and `0.8` for the alpha channel. + +# --hints-- + +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 rgba(83, 14, 14, 0.8)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'rgba(83, 14, 14, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md new file mode 100644 index 00000000000000..7889c2783a9c71 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md @@ -0,0 +1,110 @@ +--- +id: 61b3183655ec10efd8c0bb07 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +The shadows for your green and blue markers will have the same position, blur, and spread. The only difference will be the colors. + +In the `.green` and `.blue` CSS rules, update the values for the `box-shadow` properties so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. Leave the colors as `green` and `blue` for now. + +# --hints-- + +Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px'); +``` + +Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md new file mode 100644 index 00000000000000..0101ed45263c19 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md @@ -0,0 +1,102 @@ +--- +id: 61b31a451057fff645ec09be +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +For the green marker's `box-shadow` property, replace the named color with a hex color code. Use the values `3B` for red, `7E` for green, `20` for blue, and `CC` for the alpha channel. + +# --hints-- + +Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 #3B7E20CC`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'rgba(59, 126, 32, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 green; +} +--fcc-editable-region-- + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 blue; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md new file mode 100644 index 00000000000000..167c34d9024cbc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md @@ -0,0 +1,184 @@ +--- +id: 61b31cd7b0c76bfc076b4719 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Finally, for the blue marker's `box-shadow` property, replace the named color with the `hsla` function. Use the values `223` for hue, `59%` for saturation, `31%` for lightness, and `0.8` for the alpha channel. + +And with that, your set of colored markers is complete! Well done. + +# --hints-- + +Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 hsla(223, 59%, 31%, 0.8)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'rgba(32, 59, 126, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 #3B7E20CC; +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 blue; +} +--fcc-editable-region-- + +``` + +# --solutions-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 #3B7E20CC; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md new file mode 100644 index 00000000000000..1536fe8e56de47 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md @@ -0,0 +1,110 @@ +--- +id: 61537485c4f2a624f18d7794 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Begin with your standard HTML boilerplate. Add a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `DOCTYPE` declaration should be at the beginning of your HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +The `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +The `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +The `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md new file mode 100644 index 00000000000000..bf692c5d3629e7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md @@ -0,0 +1,58 @@ +--- +id: 61537a8054753e2f1f2a1574 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Within your `head` element, add a `meta` tag with the `name` set to `viewport` and the `content` set to `width=device-width, initial-scale=1`. + +Also add a `meta` tag with the `charset` set to `UTF-8`. + +# --hints-- + +You should have two `meta` elements. + +```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 2); +``` + +One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content').match(/width=device-width,\s?initial-scale=1(.0)?/) && !m?.getAttribute('charset')); +assert.exists(target); +``` + +Your other `meta` element should have the `charset` attribute set to `UTF-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +assert.exists(target); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + + + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md new file mode 100644 index 00000000000000..70596f83160531 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md @@ -0,0 +1,62 @@ +--- +id: 61537bb9b1a29430ac15ad38 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Within your `head` element, add a `title` element with the text set to `Photo Gallery`, and a `link` element to add your `styles.css` file to the page. + +# --hints-- + +Your `link` element should have an `href` attribute with the value `styles.css`. + +```js +assert.match(code, / + + + + + + + + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md new file mode 100644 index 00000000000000..e213c5aed9798a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md @@ -0,0 +1,62 @@ +--- +id: 61537c5f81f0cf325b4a854c +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Within the `body` element, create a `div` with the `class` set to `header`. + +Inside the `.header` element nest an `h1` element with the text `CSS FLEXBOX PHOTO GALLERY`. + +# --hints-- + +You should have a `div` element within your `body` element. + +```js +assert.exists(document.querySelector('body')?.querySelector('div')) +``` + +Your `div` element should have the `class` set to `header`. + +```js +assert(document?.querySelector('body')?.querySelector('div')?.classList?.contains('header')) +``` + +Your `.header` element should have an `h1` element. + +```js +assert.exists(document.querySelector('.header')?.querySelector('h1')); +``` + +Your `h1` should have the text `CSS FLEXBOX PHOTO GALLERY`. Remember that casing matters. + +```js +assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'CSS FLEXBOX PHOTO GALLERY') +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + + Photo Gallery + + + + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md new file mode 100644 index 00000000000000..e1167f8ba62cee --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md @@ -0,0 +1,65 @@ +--- +id: 61537c9eecea6a335db6da79 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Below your `.header` element, create a new `div` element with the `id` set to `gallery`. + +In that `#gallery` element, create ten `img` elements. + +# --hints-- + +You should create a second `div` element in your `body` element. + +```js +assert(document.querySelector('body')?.querySelectorAll('div')?.length === 2); +``` + +Your new `div` element should come after your `.header` element. + +```js +assert(document.querySelector('body')?.querySelectorAll('div')?.[0]?.classList?.contains('header')); +``` + +Your new `div` element should have an `id` set to `gallery`. + +```js +assert(document.querySelector('body')?.querySelectorAll('div')?.[1]?.id === 'gallery'); +``` + +Your `#gallery` element should have ten `img` elements. + +```js +assert(document.querySelector('#gallery')?.querySelectorAll('img')?.length === 10); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md new file mode 100644 index 00000000000000..34949c840f8bcb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md @@ -0,0 +1,120 @@ +--- +id: 61537d86bdc3dd343688fceb +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Now you need to give each `img` element a `src` attribute. You are going to use the format `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/#.jpg`, replacing `#` with the `img` element order. + +So your first `img` element would use `1.jpg`, your second would use `2.jpg`, and so on. + +# --hints-- + +All ten of your `img` elements should have a `src` attribute. + +```js +const images = [...document.querySelectorAll('img')]; +assert(images.every(image => image.getAttribute('src'))); +``` + +Your first `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. + +```js +assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg'); +``` + +Your second `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg`. + +```js +assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg'); +``` + +Your third `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg`. + +```js +assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg'); +``` + +Your fourth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg`. + +```js +assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg'); +``` + +Your fifth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg`. + +```js +assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg'); +``` + +Your sixth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg`. + +```js +assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg'); +``` + +Your seventh `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg`. + +```js +assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg'); +``` + +Your eighth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg`. + +```js +assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg'); +``` + +Your ninth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`. + +```js +assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg'); +``` + +Your tenth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg`. + +```js +assert(document.querySelectorAll('img')?.[9]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md new file mode 100644 index 00000000000000..2121d83e2e2442 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md @@ -0,0 +1,63 @@ +--- +id: 615380dff67172357fcf0425 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Normalize your box model by creating a `*` selector and setting the `box-sizing` property to `border-box`. + +# --hints-- + +You should have a `*` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +Your `*` selector should have a `box-sizing` property set to `border-box`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md new file mode 100644 index 00000000000000..a92194e651c8d8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md @@ -0,0 +1,78 @@ +--- +id: 6153893900438b4643590367 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Remove the margin from your `body` element, set the font to `Arial`, and give it a background color of `#EBE7E7`. + +# --hints-- + +You should have a `body` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('body')) +``` + +Your `body` selector should have a `font-family` property set to `Arial`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'Arial'); +``` + +Your `body` selector should have a `background-color` property set to `#EBE7E7`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(235, 231, 231)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md new file mode 100644 index 00000000000000..6fba2d7482b571 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md @@ -0,0 +1,90 @@ +--- +id: 6153897c27f6334716ee5abe +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Align your `.header` text in the center, give it a padding of `32px` on all sides, and set the background to `#E0DDDD`. + +# --hints-- + +You should have a `.header` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +``` + +Your `.header` selector should have a `text-align` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); +``` + +Your `.header` selector should have a `padding` property set to `32px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); +``` + +Your `.header` selector should have a `background-color` property set to `#E0DDDD`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(224, 221, 221)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md new file mode 100644 index 00000000000000..a29ef153ae05a4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md @@ -0,0 +1,86 @@ +--- +id: 615389bd81347947ea7ba896 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Flexbox is a one-dimensional CSS layout approach that focuses on the flow of content. It offers the ability to control the way items are spaced and aligned within a container. + +To set an element to use Flexbox, you give it a `display` property set to `flex`. Create a `#gallery` selector and give it that property. + +# --hints-- + +You should have a `#gallery` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery')); +``` + +Your `#gallery` selector should have a `display` property set to `flex`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md new file mode 100644 index 00000000000000..884da24b220c65 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md @@ -0,0 +1,82 @@ +--- +id: 6153908a366afb4d57185c8d +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Flexbox can be thought of as having two axes, the main axis and the cross axis. The main axis is determined by the `flex-direction` property. If `flex-direction` is set to `row` or `row-reverse`, the main axis is horizontal. If `flex-direction` is set to `column` or `column-reverse`, the main axis is vertical. + +Give your `#gallery` selector a `flex-direction` property set to `row`. + +# --hints-- + +Your `#gallery` selector should have a `flex-direction` property set to `row`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === 'row'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +--fcc-editable-region-- +#gallery { + display: flex; +} +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md new file mode 100644 index 00000000000000..17c497e33ac297 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md @@ -0,0 +1,85 @@ +--- +id: 615392916d83fa4f02f7e2cf +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +You may have noticed that your images have all moved onto the same row. + +The `flex-wrap` property determines how your items should behave when the flex container is too small. Setting this property to `wrap` will allow your items to wrap to the next row/column (depending on your main axis), where `nowrap` will prevent your items from wrapping. When this is set to `nowrap`, items may either shrink to fit or overflow. + +Give the `#gallery` selector a `flex-wrap` property set to `wrap`. You should see your images take a four-column layout. This is because you set their `width` to `25%` in an earlier step. + +# --hints-- + +Your `#gallery` selector should have a `flex-wrap` property set to `wrap`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +--fcc-editable-region-- +#gallery { + display: flex; + flex-direction: row; +} +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md new file mode 100644 index 00000000000000..a298de6a4aba64 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md @@ -0,0 +1,84 @@ +--- +id: 6153938dce8b294ff8f5a4e9 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them. + +Give your `#gallery` selector a `justify-content` property set to `center`. + +# --hints-- + +Your `#gallery` selector should have a `justify-content` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +--fcc-editable-region-- +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md new file mode 100644 index 00000000000000..46b176542fbe8c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md @@ -0,0 +1,85 @@ +--- +id: 6153947986535e5117e60615 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +The `align-items` property positions the flex content along the cross axis. In this case, with your `flex-direction` set to `row`, your cross axis would be vertical. + +To vertically center your images, give your `#gallery` selector an `align-items` property set to `center`. + +# --hints-- + +Your `#gallery` selector should have an `align-items` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +--fcc-editable-region-- +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md new file mode 100644 index 00000000000000..358354332f3c7c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md @@ -0,0 +1,87 @@ +--- +id: 61539e07e7430b528fbffe21 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Give your `#gallery` selector a `padding` property set to `0 4px`. + +# --hints-- + +Your `#gallery` selector should have a `padding` property set to `0 4px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingTop, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingBottom, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingLeft, '4px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight, '4px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +--fcc-editable-region-- +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md new file mode 100644 index 00000000000000..fe7642b8f3feb8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md @@ -0,0 +1,87 @@ +--- +id: 61539f32a206bd53ec116465 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Notice how some of your images have become distorted. This is because the images have different aspect ratios. Rather than setting each aspect ratio individually, you can use the `object-fit` property to determine how images should behave. + +Give your `#gallery img` selector the `object-fit` property and set it to `cover`. This will tell the image to fill the `img` container while maintaining aspect ratio, resulting in cropping to fit. + +# --hints-- + +Your `#gallery img` selector should have an `object-fit` property set to `cover`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === 'cover'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0 4px; +} + +--fcc-editable-region-- +#gallery img { + width: 25%; + height: 300px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md new file mode 100644 index 00000000000000..0154ed9493f862 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md @@ -0,0 +1,94 @@ +--- +id: 6153a04847abee57a3a406ac +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Your images need some space between them. + +Give your `#gallery img` selector a `margin-top` property of `8px` and a `padding` property of `0 4px`. + +# --hints-- + +Your `#gallery img` selector should have a `margin-top` property of `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.marginTop === '8px'); +``` + +Your `#gallery img` selector should have a `padding` property of `0 4px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0px 4px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0 4px; +} + +--fcc-editable-region-- +#gallery img { + width: 25%; + height: 300px; + object-fit: cover; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md new file mode 100644 index 00000000000000..1fdd256a020a06 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md @@ -0,0 +1,88 @@ +--- +id: 6153a3485f0b20591d26d2a1 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Smooth out your images a bit by giving the `#gallery img` selector a `border-radius` property of `10px`. + +# --hints-- + +Your `#gallery img` selector should have a `border-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius === '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0 4px; +} + +--fcc-editable-region-- +#gallery img { + width: 25%; + height: 300px; + object-fit: cover; + margin-top: 8px; + padding: 0 4px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md new file mode 100644 index 00000000000000..a89369dd15933d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md @@ -0,0 +1,112 @@ +--- +id: 6153a3952facd25a83fe8083 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Create a media query for screens smaller than `800px` in width. In that media query, create a `#gallery img` rule and set the `width` property to `50%`. This will convert your gallery to a two-column layout. + +# --hints-- + +You should add a new `@media` query. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1); +``` + +Your new `@media` query should have a `max-width` of `800px`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)'); +``` + +Your `@media` query should have a `#gallery img` rule. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)'); +assert(rules?.find(rule => rule.selectorText === '#gallery img')); +``` + +Your `#gallery img` rule should have a `width` property set to `50%`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)'); +const imgRule = rules?.find(rule => rule.selectorText === '#gallery img'); +assert(imgRule?.style.width === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0 4px; +} + +#gallery img { + width: 25%; + height: 300px; + object-fit: cover; + margin-top: 8px; + padding: 0 4px; + border-radius: 10px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md new file mode 100644 index 00000000000000..c9a77e0f85f32b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md @@ -0,0 +1,207 @@ +--- +id: 6153a3ebb4f7f05b8401b716 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Resize the preview to see the layout change from your media query. + +Finally, create another media query for screens smaller than `600px` wide. In that media query, create a `#gallery img` rule and set the `width` property to `100%`. This will give your gallery a single-column layout. + +Your CSS Flexbox Photo Gallery is now complete. + +# --hints-- + +You should have a second `@media` query. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2); +``` + +Your new `@media` query should come after your existing one. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)'); +``` + +Your new `@media` query should have a `max-width` of `600px`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === '(max-width: 600px)'); +``` + +Your new `@media` query should have a `#gallery img` selector. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)'); +assert(rules?.find(rule => rule?.selectorText === '#gallery img')); +``` + +Your `#gallery img` rule should have a `width` property set to `100%`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)'); +const imgRule = rules?.find(rule => rule?.selectorText === '#gallery img'); +assert(imgRule?.style?.width === '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0 4px; +} + +#gallery img { + width: 25%; + height: 300px; + object-fit: cover; + margin-top: 8px; + padding: 0 4px; + border-radius: 10px; +} + +@media (max-width: 800px) { + #gallery img { + width: 50%; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +# --solutions-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0; +} + +#gallery img { + width: 25%; + height: 300px; + object-fit: cover; + margin-top: 8px; + padding: 0 4px; + border-radius: 10px; +} + +@media (max-width: 800px) { + #gallery img { + width: 50%; + } +} + +@media (max-width: 600px) { + #gallery img { + width: 100%; + } +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md new file mode 100644 index 00000000000000..1c70338424ecc3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md @@ -0,0 +1,77 @@ +--- +id: 615f171d05def3218035dc85 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Your images are currently too large, and you will not be able to see your CSS changes. + +Create a `#gallery img` selector to target your images. Give it a `width` property set to `25%`. + +Also set the `height` property to `300px` to keep your images a uniform size. + +# --hints-- + +You should have a `#gallery img` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('#gallery img')) +``` + +Your `#gallery img` selector should have a `width` property set to `25%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.width === '25%') +``` + +Your `#gallery img` selector should have a `height` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.height === '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md new file mode 100644 index 00000000000000..380660bfae5dfe --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md @@ -0,0 +1,135 @@ +--- +id: 61437d575fb98f57fa8f7f36 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Begin with your standard HTML boilerplate. Add a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element. + +Add a `` tag with the appropriate `charset` and a `` tag for mobile responsiveness within the `head` element. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `DOCTYPE` declaration should be at the beginning of your HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +You should have an opening `` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +The `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +The `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +The `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +You should have two `meta` elements. + +```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 2); +``` + +One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); +assert.exists(target); +``` + +The other `meta` element should have the `charset` attribute set to `UTF-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +assert.exists(target); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md new file mode 100644 index 00000000000000..4b5f29e0f4bea7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md @@ -0,0 +1,102 @@ +--- +id: 614385513d91ae5c251c2052 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Add a `title` element with the text `Magazine`, a `link` element for the `https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&display=swap` font stylesheet, a `link` for the `https://use.fontawesome.com/releases/v5.8.2/css/all.css` FontAwesome stylesheet, and a `link` for your `./styles.css` stylesheet. + +Your font stylesheet will load three separate fonts: `Anton`, `Baskervville`, and `Raleway`. + +# --hints-- + +Your code should have three `link` elements. + +```js +assert(code.match(//i) === null); +``` + +Your `link` elements should be within your `head` element. + +```js +const head = code.match(/(.|\r|\n)*<\/head>/i)?.[0]; +assert(head.match(/ link.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&display=swap')); +``` + +One of your link elements should have the `href` set to `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. + +```js +const links = [...document.querySelectorAll('link')]; +assert(links.find(link => link.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css')); +``` + +One of your `link` elements should have an `href` attribute with the value `styles.css`. + +```js +assert.match(code, / + +--fcc-editable-region-- + + + + +--fcc-editable-region-- + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md new file mode 100644 index 00000000000000..713416750cc186 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md @@ -0,0 +1,75 @@ +--- +id: 6143862a5e54455d262c212e +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Within your `body`, create a `main` element. Then in that element, create a `section` with a `class` set to `heading`. + +# --hints-- + +You should have a `main` element. + +```js +assert.exists(document.querySelector('main')); +``` + +Your `main` element should be within your `body` element. + +```js +assert(document.querySelector('main')?.parentElement?.localName === 'body'); +``` + +You should have a `section` element. + +```js +assert.exists(document.querySelector('section')); +``` + +Your `section` element should be within your `main` element. + +```js +assert(document.querySelector('section')?.parentElement?.localName === 'main'); +``` + +Your `section` element should have the `class` set to `heading`. + +```js +assert(document.querySelector('section')?.classList?.contains('heading')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md new file mode 100644 index 00000000000000..3bf03b08cf209c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md @@ -0,0 +1,109 @@ +--- +id: 6143869bb45bd85e3b1926aa +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Within your `.heading` element, create a `header` element with the `class` set to `hero`. + +In that element, create an `img` element with the `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`, the `alt` set to `freecodecamp logo`, and the `class` set to `hero-img`. + +The `loading` attribute on an `img` element can be set to `lazy` to tell the browser not to fetch the image resource until it is needed (as in, when the user scrolls the image into view). As an additional benefit, lazy loaded elements will not load until the non-lazy elements are loaded - this means users with slow internet connections can view the content of your page without having to wait for the images to load. + +Give your new `img` element a `loading` attribute set to `lazy`. + +# --hints-- + +You should create a `header` element. + +```js +assert.exists(document.querySelector('header')); +``` + +Your `header` element should be within your `.heading` element. + +```js +assert(document.querySelector('header')?.parentElement?.className === 'heading'); +``` + +Your `header` element should have the `class` set to `hero`. + +```js +assert(document.querySelector('header')?.className === 'hero'); +``` + +You should create an `img` element. + +```js +assert.exists(document.querySelector('img')); +``` + +Your `img` element should be within your `header` element. + +```js +assert(document.querySelector('img')?.parentElement?.localName === 'header'); +``` + +Your `img` element should have the `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`. + +```js +assert(document.querySelector('img')?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png'); +``` + +Your `img` element should have the `alt` set to `freecodecamp logo`. + +```js +assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo'); +``` + +Your `img` element should have the `loading` attribute set to `lazy`. + +```js +assert(document.querySelector('img')?.getAttribute('loading') === 'lazy'); +``` + +Your `img` element should have the `class` set to `hero-img`. + +```js +assert(document.querySelector('img')?.className === 'hero-img'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +--fcc-editable-region-- +
+
+ +
+
+--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md new file mode 100644 index 00000000000000..0284a61c0b0c98 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md @@ -0,0 +1,152 @@ +--- +id: 614387cbefeeba5f3654a291 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +After your `header` element, create a `div` with the `class` set to `author`. + +Within that `div`, create a `p` element with the `class` set to `author-name` and give it the text `By freeCodeCamp`. Wrap the `freeCodeCamp` portion in an `a` element with the `href` set to `https://freecodecamp.org`, and the `target` set to `_blank`. + + +Below that, add a second `p` element with the class `publish-date` and the text `March 7, 2019`. + +# --hints-- + +You should create a new `div` element. + +```js +assert.exists(document.querySelector('div')); +``` + +Your `div` element should come after your `header` element. + +```js +assert(document.querySelector('div')?.previousElementSibling?.localName === 'header'); +``` + +Your `div` element should have the `class` set to `author`. + +```js +assert(document.querySelector('div')?.className === 'author'); +``` + +You should create two new `p` elements. + +```js +assert(document.querySelectorAll('p')?.length === 3); +``` + +Your two new `p` elements should be within your `div` element. + +```js +assert.exists(document.querySelector('div')?.querySelectorAll('p')?.length === 2); +``` + +Your first new `p` element should have a `class` set to `author-name`. + +```js +assert(document.querySelector('div')?.querySelector('p')?.className === 'author-name'); +``` + +Your first new `p` element should have the text `By freeCodeCamp`. + +```js +assert(document.querySelector('div')?.querySelector('p')?.innerText === 'By freeCodeCamp'); +``` + +Your second new `p` element should have a `class` set to `publish-date`. + +```js +assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.className === 'publish-date'); +``` + +Your second new `p` element should have the text `March 7, 2019`. + +```js +assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.innerText === 'March 7, 2019'); +``` + +You should create a new `a` element. + +```js +assert.exists(document.querySelector('a')); +``` + +Your `a` element should be within your first new `p` element. + +```js +assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.localName === 'a'); +``` + +Your `a` element should have the `href` set to `https://freecodecamp.org`. + +```js +assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('href') === 'https://freecodecamp.org'); +``` + +Your `a` element should have the `target` set to `_blank`. + +```js +assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('target') === '_blank'); +``` + +Your `a` element should surround the text `freeCodeCamp`. + +```js +assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.textContent === 'freeCodeCamp'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+--fcc-editable-region-- + +
+
+--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md new file mode 100644 index 00000000000000..dd2fb1d3b02512 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md @@ -0,0 +1,134 @@ +--- +id: 614389f601bb4f611db98563 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Below your `.author` element, create a new `div` element with the class `social-icons`. + +Add five `a` elements within that new `div`, and give them the following `href` attributes. + +- The first `a` element should have an `href` set to `https://www.facebook.com/freecodecamp`. +- The second `a` element should have an `href` set to `https://twitter.com/freecodecamp`. +- The third `a` element should have an `href` set to `https://instagram.com/freecodecamp`. +- The fourth `a` element should have an `href` set to `https://www.linkedin.com/school/free-code-camp`. +- The fifth `a` element should have an `href` set to `https://www.youtube.com/freecodecamp`. + +# --hints-- + +You should create a new `div` element. + +```js +assert(document.querySelectorAll('div')?.length === 2); +``` + +Your new `div` element should come after your `.author` element. + +```js +assert(document.querySelector('.author')?.nextElementSibling?.localName === 'div'); +``` + +Your new `div` element should have the class `social-icons`. + +```js +assert(document.querySelector('.author')?.nextElementSibling?.classList?.contains('social-icons')); +``` + +Your `.social-icons` element should have five `a` elements. + +```js +assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.length === 5); +``` + +Your first `a` element should have an `href` set to `https://www.facebook.com/freecodecamp`. + +```js +assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[0]?.getAttribute('href')?.includes('https://www.facebook.com/freecodecamp')); +``` + +Your second `a` element should have an `href` set to `https://twitter.com/freecodecamp`. + +```js +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[1]?.getAttribute('href'), 'https://twitter.com/freecodecamp'); +``` + +Your third `a` element should have an `href` set to `https://instagram.com/freecodecamp`. + +```js +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[2]?.getAttribute('href'), 'https://instagram.com/freecodecamp'); +``` + +Your fourth `a` element should have an `href` set to `https://www.linkedin.com/school/free-code-camp`. + +```js +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[3]?.getAttribute('href'), 'https://www.linkedin.com/school/free-code-camp'); +``` + +Your fifth `a` element should have an `href` set to `https://www.youtube.com/freecodecamp`. + +```js +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[4]?.getAttribute('href'), 'https://www.youtube.com/freecodecamp'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md new file mode 100644 index 00000000000000..b5737eefde904c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md @@ -0,0 +1,139 @@ +--- +id: 61438b5b66d76a6264430f2a +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Within each of your new `a` elements, add an `i` element and give them the following classes: + +- Your first `i` element should have the class `fab fa-facebook-f` +- Your second `i` element should have the class `fab fa-twitter` +- Your third `i` element should have the class `fab fa-instagram` +- Your fourth `i` element should have the class `fab fa-linkedin-in` +- Your fifth `i` element should have the class `fab fa-youtube` + +# --hints-- + +You should have five `i` elements. + +```js +assert(document.querySelectorAll('i')?.length === 5); +``` + +Each `a` element should only have one `i` element. + +```js +const aaaaa = [...document.querySelectorAll('.social-icons a')]; +assert(aaaaa?.every(a => a?.children?.length === 1 && a?.children?.[0]?.localName === 'i')); +``` + +Each `i` element should have a `class` attribute which includes `fab`. + +```js +const iiiii = [...document.querySelectorAll('i')]; +assert(iiiii?.every(i => i?.classList?.contains('fab'))); +``` + +The first `i` element should have a `class` attribute which includes `fa-facebook-f`. + +```js +assert(document.querySelectorAll('i')?.[0]?.classList?.contains('fa-facebook-f')); +``` + +The second `i` element should have a `class` attribute which includes `fa-twitter`. + +```js +assert(document.querySelectorAll('i')?.[1]?.classList?.contains('fa-twitter')); +``` + +The third `i` element should have a `class` attribute which includes `fa-instagram`. + +```js +assert(document.querySelectorAll('i')?.[2]?.classList?.contains('fa-instagram')); +``` + +The fourth `i` element should have a `class` attribute which includes `fa-linkedin-in`. + +```js +assert(document.querySelectorAll('i')?.[3]?.classList?.contains('fa-linkedin-in')); +``` + +The fifth `i` element should have a `class` attribute which includes `fa-youtube`. + +```js +assert(document.querySelectorAll('i')?.[4]?.classList?.contains('fa-youtube')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md new file mode 100644 index 00000000000000..37aebf80b3d557 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md @@ -0,0 +1,129 @@ +--- +id: 61438ec09438696391076d6a +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below your `.heading` element, create a new `section` element with the `class` set to `text`. Within that, create a `p` element with the `class` set to `first-paragraph` and the following text: + +```markup +Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +``` + +# --hints-- + +You should create a new `section` element. + +```js +assert(document.querySelectorAll('section')?.length === 2); +``` + +Your new `section` element should come after your `.heading` element. + +```js +assert(document.querySelectorAll('section')?.[1]?.previousElementSibling?.className === 'heading'); +``` + +Your new `section` element should have the `class` set to `text`. + +```js +assert(document.querySelectorAll('section')?.[1]?.className === 'text'); +``` + +You should create a new `p` element within your `.text` element. + +```js +assert(document.querySelector('.text')?.querySelectorAll('p')?.length === 1); +``` + +Your new `p` element should have the `class` set to `first-paragraph`. + +```js +assert(document.querySelector('.text p')?.className === 'first-paragraph'); +``` + +Your new `p` element should have the provided text. + +```js +assert(document.querySelector('.first-paragraph')?.innerText === 'Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you\'ll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md new file mode 100644 index 00000000000000..84ab07157343ab --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md @@ -0,0 +1,109 @@ +--- +id: 61439dc084fa5f659cf75d7c +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Create another `p` element below your `.first-paragraph` element, and give it the following text: + +```markup +After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +``` + +# --hints-- + +You should create a second `p` element within your `.text` element. + +```js +assert(document.querySelectorAll('.text p')?.length === 2) +``` + +Your second `p` element should have the provided text. + +```js +assert(document.querySelectorAll('.text p')?.[1]?.innerText === 'After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+--fcc-editable-region-- +
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+
+--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md new file mode 100644 index 00000000000000..e1a5ed66e45061 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md @@ -0,0 +1,113 @@ +--- +id: 61439dfc811e12666b04be6f +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Add a third `p` element at the end of your `.text` element, and give it the following text: + +```markup +It wasn't as dramatic as Doc's revelation in Back to the Future. It just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +``` + +# --hints-- + +You should create a third `p` element in your `.text` element. + +```js +assert(document.querySelectorAll('.text p')?.length === 3); +``` + +Your third `p` element should have the provided text. + +```js +assert(document.querySelectorAll('.text p')?.[2]?.innerText === "It wasn't as dramatic as Doc's revelation in Back to the Future. It just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md new file mode 100644 index 00000000000000..410007a122d2be --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md @@ -0,0 +1,148 @@ +--- +id: 61439e33e4fb7967609e0c83 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +After the three `p` elements within your `.text` element, create a `blockquote` element. Within that, add an `hr` element, a `p` element with the `class` set to `quote`, and a second `hr` element. + +Give the `.quote` element the text `The entire curriculum should be a series of projects`. + +# --hints-- + +You should create a new `blockquote` element within your `.text` element. + +```js +assert.exists(document.querySelector('.text blockquote')); +``` + +Your `blockquote` element should come after your three `p` elements. + +```js +assert(document.querySelector('.text')?.children?.[3]?.localName === 'blockquote'); +``` + +Your `blockquote` element should have two `hr` elements. + +```js +assert(document.querySelectorAll('.text blockquote hr')?.length === 2); +``` + +Your `blockquote` element should have a `p` element. + +```js +assert.exists(document.querySelector('.text blockquote p')); +``` + +Your `blockquote` children should be in the correct order. + +```js +const children = document.querySelector('.text blockquote')?.children; +assert(children?.[0]?.localName === 'hr'); +assert(children?.[1]?.localName === 'p'); +assert(children?.[2]?.localName === 'hr'); +``` + +Your new `p` element should have the `class` set to `quote`. + +```js +assert(document.querySelector('.text blockquote p')?.className === 'quote'); +``` + +Your new `p` element should have the text `The entire curriculum should be a series of projects`. + +```js +assert(document.querySelector('.text blockquote p')?.innerText === 'The entire curriculum should be a series of projects'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md new file mode 100644 index 00000000000000..c41d001e6a3c0a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md @@ -0,0 +1,130 @@ +--- +id: 6143a1a228f7d068ab16a130 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Below your `blockquote` element, add another `p` element with the following text: + +```markup +No more walls of explanatory text. No more walls of tests. Just one test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +``` + +# --hints-- + +You should add a fourth `p` element to your `.text` element. + +```js +assert(document.querySelectorAll('.text p')?.length === 5); +``` + +Your new `p` element should come after your `blockquote` element. + +```js +assert(document.querySelectorAll('.text p')?.[4]?.previousElementSibling?.localName === 'blockquote'); +``` + +Your new `p` element should have the provided text. + +```js +assert(document.querySelectorAll('.text p')?.[4]?.innerText === 'No more walls of explanatory text. No more walls of tests. Just one test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there\'s plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md new file mode 100644 index 00000000000000..572fcd58996138 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md @@ -0,0 +1,128 @@ +--- +id: 6143a73279ce6369de4b9bcc +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Create a fifth `p` element at the end of your `.text` element, and give it the following text: + +```markup +The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +``` + +# --hints-- + +You should add a fifth `p` element. + +```js +assert(document.querySelectorAll('.text p')?.length === 6); +``` + +Your new `p` element should have the provided text. + +```js +assert(document.querySelectorAll('.text p')?.[5]?.innerText === 'The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md new file mode 100644 index 00000000000000..4516f295b47779 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md @@ -0,0 +1,135 @@ +--- +id: 6143a778bffc206ac6b1dbe3 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Create one final `p` element at the end of your `.text` element and give it the following text: + +```markup +Instead of a series of coding challenges, people will be in their code +editor passing one test after another, quickly building up a project. +People will get into a real flow state, similar to what they +experience when they build the required projects at the end of each +certification. They'll get that sense of forward progress right from +the beginning. And freeCodeCamp will be a much smoother experience. +``` + +# --hints-- + +You should add a sixth `p` element to the `.text` element. + +```js +assert(document.querySelectorAll('.text p')?.length === 7) +``` + +Your sixth `p` element should have the provided text. + +```js +assert(document.querySelectorAll('.text p')?.[6]?.innerText === 'Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They\'ll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+--fcc-editable-region-- +
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+
+--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md new file mode 100644 index 00000000000000..79117e58831227 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md @@ -0,0 +1,166 @@ +--- +id: 6143a83fcc32c26bcfae3efa +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Below your `.text` element, create a new `section` element and give it a `class` of `text text-with-images`. Within that, create an `article` element with a `class` set to `brief-history`, and an `aside` element with the `class` set to `image-wrapper`. + +# --hints-- + +You should create a new `section` element. + +```js +assert(document.querySelectorAll('section')?.length === 3) +``` + +Your new `section` element should come after your `.text` element. + +```js +assert(document.querySelectorAll('section')?.[2]?.previousElementSibling?.className === 'text') +``` + +Your new `section` element should have the `class` set to `text text-with-images`. + +```js +assert(document.querySelectorAll('section')?.[2]?.className === 'text text-with-images') +``` + +Your new `section` element should have an `article` element. + +```js +assert.exists(document.querySelector('.text-with-images article')); +``` + +Your new `section` element should have an `aside` element. + +```js +assert.exists(document.querySelector('.text-with-images aside')); +``` + +The `article` element should come before the `aside` element. + +```js +assert(document.querySelector('.text-with-images article')?.nextElementSibling?.localName === 'aside'); +``` + +Your `article` element should have the `class` set to `brief-history`. + +```js +assert(document.querySelector('.text-with-images article')?.className === 'brief-history'); +``` + +Your `aside` element should have the `class` set to `image-wrapper`. + +```js +assert(document.querySelector('.text-with-images aside')?.className === 'image-wrapper'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md new file mode 100644 index 00000000000000..2e0bebef4268c6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md @@ -0,0 +1,174 @@ +--- +id: 6143b97c06c3306d23d5da47 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Within your `article` element, create an `h3` element with the `class` set to `list-title` and the text of `A Brief History`. Below that, create a `p` element with the text `Of the Curriculum`. Then create a `ul` element with the class `lists`. + +# --hints-- + +You should create an `h3` element within your `article` element. + +```js +assert.exists(document.querySelector('article h3')); +``` + +You should create a `p` element within your `article` element. + +```js +assert.exists(document.querySelector('article p')); +``` + +You should create a `ul` element within your `article` element. + +```js +assert.exists(document.querySelector('article ul')); +``` + +Your elements within the `article` element should be in the correct order. + +```js +const children = document.querySelector('article')?.children; +assert(children?.[0]?.localName === 'h3'); +assert(children?.[1]?.localName === 'p'); +assert(children?.[2]?.localName === 'ul'); +``` + +Your new `h3` element should have the `class` set to `list-title`. + +```js +assert(document.querySelector('article h3')?.className === 'list-title'); +``` + +Your new `h3` element should have the text of `A Brief History`. + +```js +assert(document.querySelector('article h3')?.innerText === 'A Brief History'); +``` + +Your new `p` element should have the text of `Of the Curriculum`. + +```js +assert(document.querySelector('article p')?.innerText === 'Of the Curriculum'); +``` + +Your new `ul` element should have the `class` set to `lists`. + +```js +assert(document.querySelector('article ul')?.className === 'lists'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- + +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md new file mode 100644 index 00000000000000..ed17f21eaf5fce --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md @@ -0,0 +1,228 @@ +--- +id: 6143b9e1f5035c6e5f2a8231 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Within your `ul` element, create six `li` elements. Add an `h4` element with a `class` set to `list-subtitle` and a `p` element to each of your `li` elements. + +Then give the `h4` and `p` elements the following text content, in order, with each `h4` using what's on the left side of the colon, and each `p` using what's on the right: + +- `V1 - 2014`: `We launched freeCodeCamp with a simple list of 15 resources, including Harvard's CS50 and Stanford's Database Class.` +- `V2 - 2015`: `We added interactive algorithm challenges.` +- `V3 - 2015`: `We added our own HTML+CSS challenges (before we'd been relying on General Assembly's Dash course for these).` +- `V4 - 2016`: `We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School.` +- `V5 - 2017`: `We added the back end and data visualization challenges.` +- `V6 - 2018`: `We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.` + +# --hints-- + +Your `ul` element should have six `li` elements. + +```js +assert(document.querySelectorAll('.lists li')?.length === 6); +``` + +Each of your new `li` elements should have an `h4` and `p` element. + +```js +const lis = [...document.querySelectorAll('.lists li')]; +assert(lis?.every(li => li?.children?.[0]?.localName === 'h4' && li?.children?.[1]?.localName === 'p')); +``` + +Your first `h4` should have the text `V1 - 2014`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[0]?.innerText === 'V1 - 2014'); +``` + +Your first `p` should have the text `We launched freeCodeCamp with a simple list of 15 resources, including Harvard's CS50 and Stanford's Database Class.` + +```js +assert(document.querySelectorAll('.lists li p')?.[0]?.innerText === 'We launched freeCodeCamp with a simple list of 15 resources, including Harvard\'s CS50 and Stanford\'s Database Class.'); +``` + +Your second `h4` should have the text `V2 - 2015`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[1]?.innerText === 'V2 - 2015'); +``` + +Your second `p` should have the text `We added interactive algorithm challenges.` + +```js +assert(document.querySelectorAll('.lists li p')?.[1]?.innerText === 'We added interactive algorithm challenges.'); +``` + +Your third `h4` should have the text `V3 - 2015`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[2]?.innerText === 'V3 - 2015'); +``` + +Your third `p` should have the text `We added our own HTML+CSS challenges (before we'd been relying on General Assembly's Dash course for these).` + +```js +assert(document.querySelectorAll('.lists li p')?.[2]?.innerText === 'We added our own HTML+CSS challenges (before we\'d been relying on General Assembly\'s Dash course for these).'); +``` + +Your fourth `h4` should have the text `V4 - 2016`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[3]?.innerText === 'V4 - 2016'); +``` + +Your fourth `p` should have the text `We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School`. + +```js +assert(document.querySelectorAll('.lists li p')?.[3]?.innerText === 'We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School.'); +``` + +Your fifth `h4` should have the text `V5 - 2017`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[4]?.innerText === 'V5 - 2017'); +``` + +Your fifth `p` should have the text `We added the back end and data visualization challenges.` + +```js +assert(document.querySelectorAll('.lists li p')?.[4]?.innerText === 'We added the back end and data visualization challenges.'); +``` + +Your sixth `h4` should have the text `V6 - 2018`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[5]?.innerText === 'V6 - 2018'); +``` + +Your sixth `p` should have the text `We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.` + +```js +assert(document.querySelectorAll('.lists li p')?.[5]?.innerText === 'We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.'); +``` + +Your six `h4` elements should each have the class `list-subtitle`. + +```js +const h4s = [...document.querySelectorAll('.lists li h4')]; +assert(h4s?.every(h4 => h4?.classList?.contains('list-subtitle'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+--fcc-editable-region-- +
+

A Brief History

+

Of the Curriculum

+
    + +
+
+--fcc-editable-region-- + +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md new file mode 100644 index 00000000000000..3ee5aa3aaa459a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md @@ -0,0 +1,195 @@ +--- +id: 6143bb50e8e48c6f5ef9d8d5 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Within your `aside` element, create two `img` elements, a `blockquote` element, and a third `img` element. Give the `blockquote` element a `class` set to `image-quote`. + +# --hints-- + +You should create three `img` elements within your `aside` element. + +```js +assert(document.querySelectorAll('aside img')?.length === 3); +``` + +You should create a `blockquote` element within your `aside` element. + +```js +assert.exists(document.querySelector('aside blockquote')); +``` + +Your `blockquote` element should have a `class` set to `image-quote`. + +```js +assert(document.querySelector('aside blockquote')?.classList?.contains('image-quote')); +``` + +Your new elements should be in the correct order. + +```js +const children = document.querySelector('aside')?.children; +assert(children?.[0]?.localName === 'img'); +assert(children?.[1]?.localName === 'img'); +assert(children?.[2]?.localName === 'blockquote'); +assert(children?.[3]?.localName === 'img'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md new file mode 100644 index 00000000000000..9a8fc621dbf2dc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md @@ -0,0 +1,206 @@ +--- +id: 6143c2a363865c715f1a3f72 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Within the `.image-wrapper` element, give your first `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`, an `alt` of `image of the quote machine project`, a `class` of `image-1`, a `loading` attribute set to `lazy`, a `width` attribute of `600`, and a `height` attribute of `400`. + +# --hints-- + +Your first `img` element should have a `src` attribute set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png'); +``` + +Your first `img` element should have an `alt` attribute set to `image of the quote machine project`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('alt') === 'image of the quote machine project'); +``` + +Your first `img` element should have a `class` attribute set to `image-1`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.classList?.contains('image-1')); +``` + +Your first `img` element should have a `loading` attribute set to `lazy`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('loading') === 'lazy'); +``` + +Your first `img` element should have a `width` attribute set to `600`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('width') === '600'); +``` + +Your first `img` element should have a `height` attribute set to `400`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('height') === '400'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md new file mode 100644 index 00000000000000..456bf6fdad9581 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md @@ -0,0 +1,213 @@ +--- +id: 6143cd08fe927072ca3a371d +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Within your `.image-wrapper` element, give the second `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, an `alt` of `image of a calculator project`, a `loading` attribute set to `lazy`, a `class` set to `image-2`, a `width` attribute set to `400`, and a `height` attribute set to `400`. + +# --hints-- + +Your second `img` element should have a `src` set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png'); +``` + +Your second `img` element should have an `alt` set to `image of a calculator project`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('alt') === 'image of a calculator project'); +``` + +Your second `img` element should have a `loading` attribute set to `lazy`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('loading') === 'lazy'); +``` + +Your second `img` element should have a `class` set to `image-2`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.classList?.contains('image-2')); +``` + +Your second `img` element should have a `width` set to `400`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('width') === '400'); +``` + +Your second `img` element should have a `height` set to `400`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('height') === '400'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md new file mode 100644 index 00000000000000..b4e3707727a06e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md @@ -0,0 +1,220 @@ +--- +id: 6143cdf48b634a747de42104 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Within your `.image-wrapper` element, give your third `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`, an `alt` of `four people working on code`, a `loading` attribute of `lazy`, a `class` set to `image-3`, a `width` attribute set to `600`, and a `height` attribute set to `400`. + +# --hints-- + +Your third `img` element should have a `src` set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg'); +``` + +Your third `img` element should have an `alt` set to `four people working on code`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('alt') === 'four people working on code'); +``` + +Your third `img` element should have a `loading` attribute set to `lazy`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('loading') === 'lazy'); +``` + +Your third `img` element should have a `class` set to `image-3`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.classList?.contains('image-3')); +``` + +Your third `img` element should have a `width` attribute set to `600`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('width') === '600'); +``` + +Your third `img` element should have a `height` attribute set to `400`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('height') === '400'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md new file mode 100644 index 00000000000000..7599f61f627072 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md @@ -0,0 +1,226 @@ +--- +id: 6143d003ad9e9d76766293ec +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Within your `.image-quote` element, nest an `hr` element, a `p` element and a second `hr` element. Give the `p` element a `class` set to `quote` and the text `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`. + +# --hints-- + +You should add two `hr` elements to your `.image-quote` element. + +```js +assert(document.querySelectorAll('.image-quote hr')?.length === 2); +``` + +You should add a `p` element to your `.image-quote` element. + +```js +assert(document.querySelectorAll('.image-quote p')?.length === 1); +``` + +Your `.image-quote` children should be in the correct order. + +```js +const children = document.querySelector('.image-quote')?.children; +assert(children?.[0]?.localName === 'hr'); +assert(children?.[1]?.localName === 'p'); +assert(children?.[2]?.localName === 'hr'); +``` + +Your new `p` element should have a `class` set to `quote`. + +```js +assert(document.querySelector('.image-quote p')?.classList.contains('quote')); +``` + +Your new `p` element should have the text `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`. + +```js +assert(document.querySelector('.image-quote p')?.innerText === 'The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md new file mode 100644 index 00000000000000..bbb64429cf3daa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md @@ -0,0 +1,217 @@ +--- +id: 6143d2842b497779bad947de +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +To start your CSS, normalize the CSS rules by targeting all elements with `*`, including the `::before` and `::after` pseudo-selectors. Set the `padding` property and `margin` property both to `0`. + +# --hints-- + +You should have a `*, ::before, ::after` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')); +``` + +Your `*, ::before, ::after` selector should have a `padding` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.padding === '0px'); +``` + +Your `*, ::before, ::after` selector should have a `margin` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.margin === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md new file mode 100644 index 00000000000000..e3f21ca5f036ce --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md @@ -0,0 +1,226 @@ +--- +id: 6144d66a5358db0c80628757 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Create an `html` selector and give it a `font-size` property set to `62.5%`. This will set the default font size for your web page to 10px (the browser default is 16px). + +This will make it easier for you to work with `rem` units later, as `2rem` would be 20px. + +Also, set the `box-sizing` property to `border-box`. + +# --hints-- + +You should create an `html` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')); +``` + +Your `html` selector should have a `font-size` property set to `62.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '62.5%'); +``` + +Your `html` selector should have a `box-sizing` property set to `border-box`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md new file mode 100644 index 00000000000000..b39d0b503cfa77 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md @@ -0,0 +1,234 @@ +--- +id: 6144d7dbdd3e580da730ff45 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Create a `body` selector. Set the `font-family` property to `Baskervville`, with a fallback of `serif`. Set the `color` property to `linen` and the `background-color` property to `rgb(20, 30, 40)`. + +# --hints-- + +You should have a `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` selector should have a `font-family` property set to `Baskervville`, with a fallback of `serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('body')?.fontFamily; +assert(fontFamily === 'Baskervville, serif' || fontFamily === `"Baskervville", serif`); +``` + +Your `body` selector should have a `color` property set to `linen`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'linen'); +``` + +Your `body` selector should have a `background-color` property set to `rgb(20, 30, 40)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(20, 30, 40)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md new file mode 100644 index 00000000000000..03fef6e32d147d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md @@ -0,0 +1,228 @@ +--- +id: 6144de308591ec10e27d5383 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Create an `h1` selector, and set the `font-family` property to `Anton` with the fallback of `sans-serif`. + +# --hints-- + +You should have an `h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +Your `h1` selector should have a `font-family` property set to `Anton` with the fallback of `sans-serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('h1')?.fontFamily; +assert(fontFamily === 'Anton, sans-serif' || fontFamily === `"Anton", sans-serif`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md new file mode 100644 index 00000000000000..6ac73369c9559b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md @@ -0,0 +1,232 @@ +--- +id: 6144e1ba93e435127a7f516d +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Create an `h2, h3, h4, h5, h6` selector. Give it a `font-family` property set to `Raleway` with a fallback of `sans-serif`. + +# --hints-- + +You should have an `h2, h3, h4, h5, h6` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6')); +``` + +Your `h2, h3, h4, h5, h6` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6')?.fontFamily; +assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md new file mode 100644 index 00000000000000..65402717cdb998 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md @@ -0,0 +1,241 @@ +--- +id: 6144ee46a9d6e614c598cc05 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Create an `a` selector, and give it a `text-decoration` property set to `none` and a `color` property set to `linen`. + +# --hints-- + +You should have an `a` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('a')); +``` + +Your `a` selector should have a `text-decoration` property set to `none`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('a')?.textDecoration === 'none'); +``` + +Your `a` selector should have a `color` property set to `linen`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('a')?.color === 'linen'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md new file mode 100644 index 00000000000000..cd0e14f70c46f8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md @@ -0,0 +1,242 @@ +--- +id: 6144ee790af79815ad15a832 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Now you are ready to start putting together the grid layout. CSS Grid offers a two-dimensional grid-based layout, allowing you to center items horizontally and vertically while still retaining control to do things like overlap elements. + +Begin by creating a `main` selector and giving it a `display` property set to `grid`. + +# --hints-- + +You should have a `main` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('main')); +``` + +Your `main` selector should have a `display` property set to `grid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('main')?.display === 'grid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md new file mode 100644 index 00000000000000..d3aa2f20d38ed4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md @@ -0,0 +1,238 @@ +--- +id: 6144f1410990ea17187a722b +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Now you can style the layout of your grid. CSS Grid is similar to Flexbox in that it has a special property for both the parent and child elements. + +In this case, your parent element is the `main` element. Set the content to have a three-column layout by adding a `grid-template-columns` property with a value of `1fr 94rem 1fr`. This will create three columns where the middle column is `94rem` wide, and the first and last columns are both 1 fraction of the remaining space in the grid container. + +# --hints-- + +Your `main` section should have a `grid-template-columns` property set to `1fr 94rem 1fr`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === '1fr 94rem 1fr'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +--fcc-editable-region-- +main { + display: grid; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md new file mode 100644 index 00000000000000..de3ca483f6cbc5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md @@ -0,0 +1,239 @@ +--- +id: 6144f3818bfbc51844152e36 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Use the `minmax` function to make your columns responsive on any device. The `minmax` function takes two arguments, the first being the minimum value and the second being the maximum. These values could be a length, percentage, `fr`, or even a keyword like `max-content`. + +Wrap each of your already defined values of the `grid-template-columns` property in a `minmax` function, using each value as the second argument. The first argument should be `2rem`, `min-content`, and `2rem` respectively. + +# --hints-- + +Your `main` selector should have a `grid-template-columns` property set to `minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === 'minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +--fcc-editable-region-- +main { + display: grid; + grid-template-columns: 1fr 94rem 1fr; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md new file mode 100644 index 00000000000000..3504f51cc85d43 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md @@ -0,0 +1,237 @@ +--- +id: 6144f42204c8c8195f1f3345 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +To add space between rows in the grid layout, you can use the `row-gap` property. Give the `main` selector a `row-gap` property of `3rem`. + +# --hints-- + +Your `main` selector should have a `row-gap` property of `3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('main')?.rowGap === '3rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +--fcc-editable-region-- +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md new file mode 100644 index 00000000000000..d4da3e505b1dac --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md @@ -0,0 +1,250 @@ +--- +id: 6144f47b7c631e1a6f304dd5 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Your magazine will have three primary sections. You already set the overall layout in the `main` rule, but you can adjust the placement in the child rules. + +One option is the `grid-column` property, which is shorthand for `grid-column-start` and `grid-column-end`. The `grid-column` property tells the grid item which grid line to start and end at. + +Create a `.heading` rule and set the `grid-column` property to `2 / 3`. This will tell the `.heading` element to start at grid line 2 and end at grid line 3. + +# --hints-- + +You should have a `.heading` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.heading')); +``` + +Your `.heading` selector should have a `grid-column` property set to `2 / 3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridColumn === '2 / 3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md new file mode 100644 index 00000000000000..dceea75f81b6d9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md @@ -0,0 +1,250 @@ +--- +id: 6148b07081759c2c691166a9 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Create a `.text` selector and give it a `grid-column` property set to `2 / 3`. + +# --hints-- + +You should have a `.text` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')); +``` + +Your `.text` selector should have a `grid-column` property set to `2 / 3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.gridColumn === '2 / 3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +.heading { + grid-column: 2 / 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md new file mode 100644 index 00000000000000..09ee85437d1355 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md @@ -0,0 +1,248 @@ +--- +id: 6148b0d764e4192e5712ed92 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +For additional control over the layout of your content, you can have a CSS Grid within a CSS Grid. + +Set the `display` property of your `.heading` selector to `grid`. + +# --hints-- + +Your `.heading` selector should have a `display` property set to `grid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.heading')?.display === 'grid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +--fcc-editable-region-- +.heading { + grid-column: 2 / 3; +} +--fcc-editable-region-- + +.text { + grid-column: 2 / 3; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md new file mode 100644 index 00000000000000..83db19da46d4cf --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md @@ -0,0 +1,253 @@ +--- +id: 6148b185ef37522f688316b0 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Now you can style the content of the `.heading` element with CSS Grid. + +The CSS `repeat()` function is used to repeat a value, rather than writing it out manually, and is helpful for grid layouts. For example, setting the `grid-template-columns` property to `repeat(20, 200px)` would create 20 columns each `200px` wide. + +Give your `.heading` element a `grid-template-columns` property set to `repeat(2, 1fr)` to create two columns of equal width. + +# --hints-- + +Your `.heading` selector should have a `grid-template-columns` property set to `repeat(2, 1fr)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridTemplateColumns === 'repeat(2, 1fr)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +--fcc-editable-region-- +.heading { + grid-column: 2 / 3; + display: grid; +} +--fcc-editable-region-- + +.text { + grid-column: 2 / 3; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md new file mode 100644 index 00000000000000..c27bf327ac5e80 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md @@ -0,0 +1,250 @@ +--- +id: 6148b30464daf630848c21d4 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Give your `.heading` selector a `row-gap` property set to `1.5rem`. + +# --hints-- + +Your `.heading` selector should have a `row-gap` property set to `1.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.heading')?.rowGap === '1.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +--fcc-editable-region-- +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); +} +--fcc-editable-region-- + +.text { + grid-column: 2 / 3; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md new file mode 100644 index 00000000000000..c3bd091a36bbed --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md @@ -0,0 +1,261 @@ +--- +id: 6148b4b150434734143db6f2 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Remember that the `grid-column` property determines which columns an element starts and ends at. There may be times where you are unsure of how many columns your grid will have, but you want an element to stop at the last column. To do this, you can use `-1` for the end column. + +Create a `.hero` selector and give it a `grid-column` property set to `1 / -1`. This will tell the element to span the full width of the grid. + +# --hints-- + +You should have a `.hero` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero')); +``` + +Your `.hero` selector should have a `grid-column` property set to `1 / -1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero')?.gridColumn === '1 / -1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md new file mode 100644 index 00000000000000..ff3f902a861688 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md @@ -0,0 +1,255 @@ +--- +id: 6148b5623efa8f369f2c3643 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Give the `.hero` selector a `position` property set to `relative`. + +# --hints-- + +Your `.hero` selector should have a `position` property set to `relative`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero')?.position === 'relative'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +--fcc-editable-region-- +.hero { + grid-column: 1 / -1; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md new file mode 100644 index 00000000000000..5f0ee63b2c614d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md @@ -0,0 +1,271 @@ +--- +id: 6148b59ef318e03875f35c4a +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Create an `img` selector and give it a `width` property set to `100%`, and an `object-fit` property set to `cover`. + +The `object-fit` property tells the browser how to position the element within its container. In this case, `cover` will set the image to fill the container, cropping as needed to avoid changing the aspect ratio. + +# --hints-- + +You should have an `img` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('img')); +``` + +Your `img` selector should have a `width` property set to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('img')?.width === '100%'); +``` + +Your `img` selector should have an `object-fit` property set to `cover`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('img')?.objectFit === 'cover'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md new file mode 100644 index 00000000000000..7896296cfa247b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md @@ -0,0 +1,280 @@ +--- +id: 6148bd62bbb8c83a5f1fc1b3 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Create a `.hero-title` selector and give it a `text-align` property set to `center`, a `color` property set to `orangered` and a `font-size` property set to `8rem`. + +# --hints-- + +You should have a `.hero-title` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-title')); +``` + +Your `.hero-title` selector should have a `text-align` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.textAlign === 'center'); +``` + +Your `.hero-title` selector should have a `color` property set to `orangered`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.color === 'orangered'); +``` + +Your `.hero-title` selector should have a `font-size` property set to `8rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.fontSize === '8rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md new file mode 100644 index 00000000000000..bbe53bc825bedc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md @@ -0,0 +1,286 @@ +--- +id: 6148be3d605d6b3ca9425d11 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +The subtitle also needs to be styled. Create a `.hero-subtitle` selector and give it a `font-size` property set to `2.4rem`, a `color` property set to `orangered`, and a `text-align` property set to `center`. + +# --hints-- + +You should have a `.hero-subtitle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')); +``` + +Your `.hero-subtitle` selector should have a `font-size` property set to `2.4rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.fontSize === '2.4rem'); +``` + +Your `.hero-subtitle` selector should have a `color` property set to `orangered`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.color === 'orangered'); +``` + +Your `.hero-subtitle` selector should have a `text-align` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.textAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md new file mode 100644 index 00000000000000..cff011bb025cdd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md @@ -0,0 +1,287 @@ +--- +id: 6148be82ca63c63daa8cca49 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Create an `.author` selector and give it a `font-size` property set to `2rem` and a `font-family` property set to `Raleway` with a fallback of `sans-serif`. + +# --hints-- + +You should have an `.author` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.author')); +``` + +Your `.author` selector should have a `font-size` property set to `2rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.author')?.fontSize === '2rem'); +``` + +Your `.author` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('.author')?.fontFamily; +assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md new file mode 100644 index 00000000000000..fa6cf78cd2ff9a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md @@ -0,0 +1,287 @@ +--- +id: 6148bf49fcc7913f05dbf9b7 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Create a `.author-name a:hover` selector and give it a `background-color` property set to `#306203`. + +This will create a hover effect only for the `a` element within the `.author-name`, showing the original freeCodeCamp green in the background. + +# --hints-- + +You should have an `.author-name a:hover` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover')); +``` + +Your `.author-name a:hover` selector should have a `background-color` property set to `#306203`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover')?.backgroundColor === 'rgb(48, 98, 3)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md new file mode 100644 index 00000000000000..9ce17f2be72622 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md @@ -0,0 +1,289 @@ +--- +id: 6148bfc43df3bc40fe0e6405 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Create a `.publish-date` selector and give it a `color` property of `rgba(255, 255, 255, 0.5)`. + +# --hints-- + +You should have a `.publish-date` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.publish-date')); +``` + +Your `.publish-date` selector should have a `color` property set to `rgba(255, 255, 255, 0.5)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.publish-date')?.color === 'rgba(255, 255, 255, 0.5)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md new file mode 100644 index 00000000000000..5d84a91838e611 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md @@ -0,0 +1,299 @@ +--- +id: 6148c004ffc8434252940dc3 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Create a `.social-icons` selector. Give it a `display` property set to `grid`, and a `font-size` property set to `3rem.` + +# --hints-- + +You should have a `.social-icons` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')); +``` + +Your `.social-icons` selector should have a `display` property set to `grid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.display === 'grid'); +``` + +Your `.social-icons` selector should have a `font-size` property set to `3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.fontSize === '3rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md new file mode 100644 index 00000000000000..717d1fde196d0a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md @@ -0,0 +1,290 @@ +--- +id: 6148c224ecb157439bc5247c +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +The default settings for CSS Grid will create additional rows as needed, unlike Flexbox. Give the `.social-icons` selector a `grid-template-columns` property set to `repeat(5, 1fr)` to arrange the icons in a single row. + +# --hints-- + +Your `.social-icons` selector should have a `grid-template-columns` property set to `repeat(5, 1fr)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridTemplateColumns === 'repeat(5, 1fr)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- +.social-icons { + display: grid; + font-size: 3rem; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md new file mode 100644 index 00000000000000..64b84dce9ca1ca --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md @@ -0,0 +1,295 @@ +--- +id: 6148c434bd731d45617a76c6 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +If you wanted to add more social icons, but keep them on the same row, you would need to update `grid-template-columns` to create additional columns. As an alternative, you can use the `grid-auto-flow` property. + +This property takes either `row` or `column` as the first value, with an optional second value of `dense`. `grid-auto-flow` uses an auto-placement algorithm to adjust the grid layout. Setting it to `column` will tell the algorithm to create new columns for content as needed. The `dense` value allows the algorithm to backtrack and fill holes in the grid with smaller items, which can result in items appearing out of order. + +For your `.social-icons` selector, set the `grid-auto-flow` property to `column`. + +# --hints-- + +Your `.social-icons` selector should have a `grid-auto-flow` property set to `column`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoFlow === 'column'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md new file mode 100644 index 00000000000000..47a881d12fb41b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md @@ -0,0 +1,294 @@ +--- +id: 6148c5036ddad94692a66230 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Now the auto-placement algorithm will kick in when you add a new icon element. However, the algorithm defaults the new column width to be `auto`, which will not match your current columns. + +You can override this with the `grid-auto-columns` property. Give the `.social-icons` selector a `grid-auto-columns` property set to `1fr`. + +# --hints-- + +Your `.social-icons` selector should have a `grid-auto-columns` property set to `1fr`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoColumns === '1fr'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md new file mode 100644 index 00000000000000..6f45c5b9685a5a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md @@ -0,0 +1,295 @@ +--- +id: 6148c58bace368497fb11bcf +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Much like Flexbox, with CSS Grid you can align the content of grid items with `align-items` and `justify-items`. `align-items` will align child elements along the column axis, and `justify-items` will align child elements along the row axis. + +Give the `.social-icons` selector an `align-items` property set to `center`. + +# --hints-- + +Your `.social-icons` selector should have an `align-items` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.alignItems === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md new file mode 100644 index 00000000000000..ab0275cfbd26b7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md @@ -0,0 +1,300 @@ +--- +id: 6148c6aa9981d74af202125e +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Give the `.text` selector a `font-size` property set to `1.8rem` and a `letter-spacing` property set to `0.6px`. + +# --hints-- + +Your `.text` selector should have a `font-size` property set to `1.8rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.fontSize === '1.8rem'); +``` + +Your `.text` selector should have a `letter-spacing` property set to `0.6px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.letterSpacing === '0.6px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +--fcc-editable-region-- +.text { + grid-column: 2 / 3; +} +--fcc-editable-region-- + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md new file mode 100644 index 00000000000000..d2ebeebc787a52 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md @@ -0,0 +1,298 @@ +--- +id: 6148c721e74ecd4c619ae51c +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Your `.text` element is not a CSS Grid, but you can create columns within an element without using Grid by using the `column-width` property. + +Give your `.text` selector a `column-width` property set to `25rem`. + +# --hints-- + +Your `.text` selector should have a `column-width` property set to `25rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.columnWidth === '25rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +--fcc-editable-region-- +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; +} +--fcc-editable-region-- + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md new file mode 100644 index 00000000000000..ce92865db3f221 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md @@ -0,0 +1,299 @@ +--- +id: 6148ceaf5d897d4d8b3554b3 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Magazines often use justified text in their printed content to structure their layout and control the flow of their content. While this works in printed form, justified text on websites can be an accessibility concern, for example presenting challenges for folks with dyslexia. + +To make your project look like a printed magazine, give the `.text` selector a `text-align` property set to `justify`. + +# --hints-- + +Your `.text` selector should have a `text-align` property set to `justify`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.textAlign === 'justify'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +--fcc-editable-region-- +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; +} +--fcc-editable-region-- + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md new file mode 100644 index 00000000000000..520950e1b676b4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md @@ -0,0 +1,314 @@ +--- +id: 6148cf094b3f2b4e8a032c63 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +The `::first-letter` pseudo-selector allows you to target the first letter in the text content of an element. + +Create a `.first-paragraph::first-letter` selector and set the `font-size` property to `6rem`. Also give it a `color` property set to `orangered` to make it stand out. + +# --hints-- + +You should have a `.first-paragraph::first-letter` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')); +``` + +Your `.first-paragraph::first-letter` selector should have a `font-size` property set to `6rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.fontSize === '6rem'); +``` + +Your `.first-paragraph::first-letter` selector should have a `color` property set to `orangered`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.color === 'orangered'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md new file mode 100644 index 00000000000000..a1d9a2bf4a2fa1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md @@ -0,0 +1,309 @@ +--- +id: 6148d0b863d10d50544ace0e +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +The other text has been shifted out of place. Move it into position by giving the `.first-paragraph::first-letter` selector a `float` property set to `left` and a `margin-right` property set to `1rem`. + +# --hints-- + +Your `.first-paragraph::first-letter` selector should have a `float` property set to `left`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.float === 'left'); +``` + +Your `.first-paragraph::first-letter` selector should have a `margin-right` property set to `1rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.marginRight === '1rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +--fcc-editable-region-- +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md new file mode 100644 index 00000000000000..9054c00a5013fb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md @@ -0,0 +1,313 @@ +--- +id: 6148d1bdf39c5b5186f5974b +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Create an `hr` selector, and give it a `margin` property set to `1.5rem 0`. + +# --hints-- + +You should have an `hr` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('hr')); +``` + +Your `hr` selector should have a `margin` property set to `1.5rem 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('hr')?.margin === '1.5rem 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md new file mode 100644 index 00000000000000..eb83872c2728d7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md @@ -0,0 +1,311 @@ +--- +id: 6148d1f9eb63c252e1f8acc4 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +To give the `hr` a color, you need to adjust the `border` property. Give the `hr` selector a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`. + +# --hints-- + +Your `hr` should have a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderWidth, '1px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderStyle, 'solid'); +assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderColor, 'rgba(120, 120, 120, 0.6)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +--fcc-editable-region-- +hr { + margin: 1.5rem 0; +} +--fcc-editable-region-- + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md new file mode 100644 index 00000000000000..b3432f4f885142 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md @@ -0,0 +1,330 @@ +--- +id: 6148d2444d01ab541e64a1e4 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Create a `.quote` selector. Give it a `color` property set to `#00beef`, a `font-size` property set to `2.4rem`, and a `text-align` property set to `center`. + +# --hints-- + +You should have a `.quote` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote')); +``` + +Your `.quote` selector should have a `color` property set to `#00beef`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote')?.color === 'rgb(0, 190, 239)'); +``` + +Your `.quote` selector should have a `font-size` property set to `2.4rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote')?.fontSize === '2.4rem'); +``` + +Your `.quote` selector should have a `text-align` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote')?.textAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md new file mode 100644 index 00000000000000..5ed42ac42e6279 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md @@ -0,0 +1,317 @@ +--- +id: 6148d33e31fccf558696c745 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +To make the quote text stand out more, give the `.quote` selector a `font-family` property set to `Raleway` with a fallback of `sans-serif`. + +# --hints-- + +Your `.quote` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('.quote')?.fontFamily; +assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +--fcc-editable-region-- +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md new file mode 100644 index 00000000000000..03037ebc9534cc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md @@ -0,0 +1,341 @@ +--- +id: 6148d3fff5186b57123d97e2 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +A quote is not really a quote without proper quotation marks. You can add these with CSS pseudo selectors. + +Create a `.quote::before` selector and set the `content` property to `"` with a space following it. + +Also, create a `.quote::after` selector and set the `content` property to `"` with a space preceding it. + +# --hints-- + +You should have a `.quote::before` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); +``` + +Your `.quote::before` selector should have a `content` property set to `'" '`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/)); +``` + +You should have a `.quote::after` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); +``` + +Your `.quote::after` selector should have a `content` property set to `' "'`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md new file mode 100644 index 00000000000000..1b9e5805a31e1f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md @@ -0,0 +1,335 @@ +--- +id: 6148d4d57b965358c9fa38bf +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Now to style your second `section`. Note that it has the `text` and `text-with-images` values for the `class` attribute, which means it is already inheriting the styles from your `.text` rule. + +Create a `.text-with-images` selector and set the `display` property to `grid`. + +# --hints-- + +You should have a `.text-with-images` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')); +``` + +Your `.text-with-images` selector should have a `display` property set to `grid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.display === 'grid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md new file mode 100644 index 00000000000000..a8eb1f118039d6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md @@ -0,0 +1,335 @@ +--- +id: 6148d7720f0db36775db868a +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +You will need to have a column for text and a column for images. Give the `.text-with-images` selector a `grid-template-columns` property set to `1fr 2fr`. Also set the `column-gap` property to `3rem` to provide more spacing between the columns. + +# --hints-- + +Your `.text-with-images` selector should have a `grid-template-columns` property set to `1fr 2fr`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.gridTemplateColumns === '1fr 2fr'); +``` + +Your `.text-with-images` selector should have a `column-gap` property set to `3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.columnGap === '3rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +--fcc-editable-region-- +.text-with-images { + display: grid; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md new file mode 100644 index 00000000000000..434ea948a65f06 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md @@ -0,0 +1,331 @@ +--- +id: 6148d94fdf6a5d6899f8ff15 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Give the `.text-with-images` selector a `margin-bottom` property set to `3rem`. + +# --hints-- + +Your `.text-with-images` selector should have a `margin-bottom` property set to `3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.marginBottom === '3rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +--fcc-editable-region-- +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md new file mode 100644 index 00000000000000..be459f90587f22 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md @@ -0,0 +1,340 @@ +--- +id: 6148d9825b50a3698aeee644 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Create a `.lists` selector and set the `list-style-type` property to `none`. This will get rid of the bullet points on the list items. + +# --hints-- + +You should have a `.lists` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists')); +``` + +Your `.lists` selector should have a `list-style-type` property set to `none`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists')?.listStyleType === 'none'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md new file mode 100644 index 00000000000000..93b012b2b35909 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md @@ -0,0 +1,336 @@ +--- +id: 6148e162e255676ae0da6a76 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Give the `.lists` selector a `margin-top` property set to `2rem`. + +# --hints-- + +Your `.lists` selector should have a `margin-top` property set to `2rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists')?.marginTop === '2rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +--fcc-editable-region-- +.lists { + list-style-type: none; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md new file mode 100644 index 00000000000000..0e161b7d942275 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md @@ -0,0 +1,345 @@ +--- +id: 6148e19c3e26436be0155690 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Create a `.lists li` rule to target the list items within your `.lists` element. Give it a `margin-bottom` property set to `1.5rem`. + +# --hints-- + +You should have a `.lists li` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists li')); +``` + +Your `.lists li` selector should have a `margin-bottom` property set to `1.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists li')?.marginBottom === '1.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md new file mode 100644 index 00000000000000..32e24f817501db --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md @@ -0,0 +1,349 @@ +--- +id: 6148e246146b646cf4255f0c +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Create a `.list-title, .list-subtitle` selector and set the `color` property to `#00beef`. + +# --hints-- + +You should have a `.list-title, .list-subtitle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')) +``` + +Your `.list-title, .list-subtitle` selector should have a `color` property set to `#00beef`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')?.color === 'rgb(0, 190, 239)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md new file mode 100644 index 00000000000000..581200983341de --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md @@ -0,0 +1,355 @@ +--- +id: 6148e2dcdd60306dd77d41cc +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Time to style the last section of the magazine - the images. + +The images are wrapped with an `aside` element using the `image-wrapper` class, so create an `.image-wrapper` selector. Set the `display` property to `grid`. + +# --hints-- + +You should have an `.image-wrapper` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')); +``` + +Your `.image-wrapper` selector should have a `display` property set to `grid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.display === 'grid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md new file mode 100644 index 00000000000000..81edaa4266f2d1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md @@ -0,0 +1,357 @@ +--- +id: 6148e4d6861a486f60681f36 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +The images should be within a two column, three row layout. + +Give the `.image-wrapper` selector a `grid-template-columns` property set to `2fr 1fr` and a `grid-template-rows` property set to `repeat(3, min-content)`. This will give our grid rows that adjust in height based on the content, but columns that remain a fixed width based on the container. + +# --hints-- + +Your `.image-wrapper` selector should have a `grid-template-columns` property set to `2fr 1fr`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateColumns === '2fr 1fr'); +``` + +Your `.image-wrapper` selector should have a `grid-template-rows` property set to `repeat(3, min-content)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateRows === 'repeat(3, min-content)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +--fcc-editable-region-- +.image-wrapper { + display: grid; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md new file mode 100644 index 00000000000000..22c5c3dad93a93 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md @@ -0,0 +1,353 @@ +--- +id: 6148e5a204d99e70343a63e4 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +The `gap` property is a shorthand way to set the value of `column-gap` and `row-gap` at the same time. If given one value, it sets the `column-gap` and `row-gap` both to that value. If given two values, it sets the `row-gap` to the first value and the `column-gap` to the second. + +Give the `.image-wrapper` selector a `gap` property set to `2rem`. + +# --hints-- + +Your `.image-wrapper` element should have a `gap` property set to `2rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gap === '2rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +--fcc-editable-region-- +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md new file mode 100644 index 00000000000000..55b3d446631cfa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md @@ -0,0 +1,354 @@ +--- +id: 6148e62a6f768f71c4f04828 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +The `place-items` property can be used to set the `align-items` and `justify-items` values at the same time. The `place-items` property takes one or two values. If one value is provided, it is used for both the `align-items` and `justify-items` properties. If two values are provided, the first value is used for the `align-items` property and the second value is used for the `justify-items` property. + +Give the `.image-wrapper` selector a `place-items` property set to `center`. + +# --hints-- + +Your `.image-wrapper` selector should have a `place-items` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.placeItems === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +--fcc-editable-region-- +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md new file mode 100644 index 00000000000000..34ce6ba6049740 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md @@ -0,0 +1,361 @@ +--- +id: 6148e789329dc9736ce59b85 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Create an `.image-1, .image-3` rule and give it a `grid-column` property set to `1 / -1`. This will allow the first and third images to span the full width of the grid. + +# --hints-- + +You should have an `.image-1, .image-3` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3')); +``` + +Your `.image-1, .image-3` selector should have a `grid-column` property set to `1 / -1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3')?.gridColumn === '1 / -1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md new file mode 100644 index 00000000000000..4d2f2a41afe963 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md @@ -0,0 +1,375 @@ +--- +id: 6148f34ebedc2274bceeb99c +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Now that the magazine layout is finished, you need to make it responsive. + +Start with a `@media` query for `only screen` with a `max-width` of `720px`. Inside, create an `.image-wrapper` selector and give it a `grid-template-columns` property of `1fr`. + +This will collapse the three images into one column on smaller screens. + +# --hints-- + +You should have a new `@media` rule for `only screen and (max-width: 720px)`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === 'only screen and (max-width: 720px)'); +``` + +Your new `@media` rule should have an `.image-wrapper` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.selectorText === '.image-wrapper'); +``` + +Your new `.image-wrapper` selector should have a `grid-template-columns` property of `1fr`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +.image-1, .image-3 { + grid-column: 1 / -1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md new file mode 100644 index 00000000000000..0f56bb91521261 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md @@ -0,0 +1,379 @@ +--- +id: 6148f600cde42b7670c2611f +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Create another `@media` query for `only screen` with a `max-width` of `600px`. Within, create a `.text-with-images` rule and give it a `grid-template-columns` property of `1fr`. + +This will collapse your bottom text area into a single column on smaller screens. + +# --hints-- + +You should create a new `@media` query for `only screen and (max-width: 600px)`. This should be below your previous `@media` query. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === 'only screen and (max-width: 600px)'); +``` + +Your new `@media` query should have a `.text-with-images` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.selectorText === '.text-with-images'); +``` + +Your new `.text-with-images` selector should have a `grid-template-columns` property with a value of `1fr`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +.image-1, .image-3 { + grid-column: 1 / -1; +} + +@media only screen and (max-width: 720px) { + .image-wrapper { + grid-template-columns: 1fr; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md new file mode 100644 index 00000000000000..252f2a27524101 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md @@ -0,0 +1,404 @@ +--- +id: 6148f693e0728f77c87f3020 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Create a third `@media` query for `only screen` with a `max-width` of `550px`. Within, create a `.hero-title` selector with a `font-size` set to `6rem`, a `.hero-subtitle, .author, .quote, .list-header` selector with a `font-size` set to `1.8rem`, a `.social-icons` selector with a `font-size` set to `2rem`, and a `.text` selector with a `font-size` set to `1.6rem`. + +# --hints-- + +You should have a new `@media` query for `only screen` with a `max-width` of `550px`. This should come after your previous two. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.media?.mediaText === 'only screen and (max-width: 550px)'); +``` + +Your new `@media` rule should have a `.hero-title` selector, a `.hero-subtitle, .author, .quote, .list-header` selector, a `.social-icons` selector, and a `.text` selector. These selectors should be in this order. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.selectorText === '.hero-title'); +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.selectorText === '.hero-subtitle, .author, .quote, .list-header'); +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.selectorText === '.social-icons'); +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.selectorText === '.text'); +``` + +Your `.hero-title` selector should have a `font-size` set to `6rem`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.style?.fontSize === '6rem'); +``` + +Your `.hero-subtitle, .author, .quote, .list-header` selector should have a `font-size` set to `1.8rem`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.style?.fontSize === '1.8rem'); +``` + +Your `.social-icons` selector should have a `font-size` set to `2rem`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.style?.fontSize === '2rem'); +``` + +Your `.text` selector should have a `font-size` set to `1.6rem`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.style?.fontSize === '1.6rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +.image-1, .image-3 { + grid-column: 1 / -1; +} + +@media only screen and (max-width: 720px) { + .image-wrapper { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 600px) { + .text-with-images { + grid-template-columns: 1fr; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md new file mode 100644 index 00000000000000..57245ab3d332fb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md @@ -0,0 +1,780 @@ +--- +id: 6148f6f7d8914c78e93136ca +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Create one final `@media` query for `only screen` with a `max-width` of `420px`. Within, create a `.hero-title` selector with a `font-size` property set to `4.5rem`. + +Congratulations! Your magazine is now complete. + +# --hints-- + +You should have a new `@media` query for `only screen and (max-width: 420px)`. This should be the last query in the `@media` query list. + +```js +assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.media?.mediaText, 'only screen and (max-width: 420px)'); +``` + +Your new `@media` query should have a `.hero-title` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.selectorText === '.hero-title'); +``` + +Your `.hero-title` selector should have a `font-size` property set to `4.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.style?.fontSize === '4.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +.image-1, .image-3 { + grid-column: 1 / -1; +} + +@media only screen and (max-width: 720px) { + .image-wrapper { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 600px) { + .text-with-images { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 550px) { + .hero-title { + font-size: 6rem; + } + + .hero-subtitle, + .author, + .quote, + .list-header { + font-size: 1.8rem; + } + + .social-icons { + font-size: 2rem; + } + + .text { + font-size: 1.6rem; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +# --solutions-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +.image-1, .image-3 { + grid-column: 1 / -1; +} + +@media only screen and (max-width: 720px) { + .image-wrapper { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 600px) { + .text-with-images { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 550px) { + .hero-title { + font-size: 6rem; + } + + .hero-subtitle, + .author, + .quote, + .list-header { + font-size: 1.8rem; + } + + .social-icons { + font-size: 2rem; + } + + .text { + font-size: 1.6rem; + } +} + +@media only screen and (max-width: 420px) { + .hero-title { + font-size: 4.5rem; + } +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md new file mode 100644 index 00000000000000..b309b425346ffa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md @@ -0,0 +1,256 @@ +--- +id: 614e0e503b110f76d3ac2ff6 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +You should remove the temporary `width` attribute before writing the CSS for your `.hero-img`. + +# --hints-- + +Your `.hero-img` should not have a `width` attribute. + +```js +assert.isNull(document.querySelector('.hero-img')?.getAttribute('width')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+--fcc-editable-region-- + freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+--fcc-editable-region-- +
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md new file mode 100644 index 00000000000000..f6b66931c04c9b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md @@ -0,0 +1,69 @@ +--- +id: 614e0e588f0e8a772a8a81a6 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Your image currently takes up a lot of space. To better see what you are working on, add a `width` attribute to the `img` element, with a value of `400`. + +You will remove this later on when you have worked on the CSS. + +# --hints-- + +Your `img` element should have a `width` attribute set to `400`. + +```js +assert(document.querySelector('img')?.getAttribute('width') === '400'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +--fcc-editable-region-- +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+
+--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md new file mode 100644 index 00000000000000..21e7017a11506b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md @@ -0,0 +1,104 @@ +--- +id: 6165d3b702a5d92ad970b30c +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +After your `img` element, add an `h1` element with the `class` set to `hero-title` and the text set to `OUR NEW CURRICULUM`, followed by a `p` element with the `class` set to `hero-subtitle` and the text set to `Our efforts to restructure our curriculum with a more project-based focus`. + +# --hints-- + +You should create an `h1` element. + +```js +assert.exists(document.querySelector('h1')); +``` + +Your `h1` element should come after your `img` element. + +```js +assert(document.querySelector('h1')?.previousElementSibling?.localName === 'img'); +``` + +Your `h1` element should have the `class` set to `hero-title`. + +```js +assert(document.querySelector('h1')?.className === 'hero-title'); +``` + +Your `h1` element should have the text set to `OUR NEW CURRICULUM`. + +```js +assert(document.querySelector('h1')?.textContent === 'OUR NEW CURRICULUM'); +``` + +You should create a new `p` element. + +```js +assert.exists(document.querySelector('p')); +``` + +Your `p` element should come after your `h1` element. + +```js +assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1'); +``` + +Your `p` element should have the `class` set to `hero-subtitle`. + +```js +assert(document.querySelector('p')?.className === 'hero-subtitle'); +``` + +Your `p` element should have the text set to `Our efforts to restructure our curriculum with a more project-based focus`. + +```js +assert.equal(document.querySelector('p')?.textContent?.trim()?.replace(/\s{2,}/, ' '), 'Our efforts to restructure our curriculum with a more project-based focus'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +--fcc-editable-region-- +
+
+
+ freecodecamp logo +
+
+
+--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md new file mode 100644 index 00000000000000..fef941bc8fef89 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md @@ -0,0 +1,77 @@ +--- +id: 6169cd8a558aa8434e0ad7f6 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +The `Referer` HTTP header contains information about the address or URL of a page that a user might be visiting from. This information can be used in analytics to track how many users from your page visit freecodecamp.org, for example. Setting the `rel` attribute to `noreferrer` omits this information from the HTTP request. Give your `a` element a `rel` attribute set to `noreferrer`. + +# --hints-- + +Your `a` element should have the `rel` set to `noreferrer`. + +```js +assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('rel') === 'noreferrer'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+--fcc-editable-region-- +
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+
+
+--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md new file mode 100644 index 00000000000000..f95c4903e25ada --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md @@ -0,0 +1,125 @@ +--- +id: 619665c9abd72906f3ad30f9 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +You will be building a happy Flappy Penguin, and further exploring CSS transforms and animations in the process. + +Begin with your basic HTML boilerplate. Include the `DOCTYPE` declaration, `html` element, the appropriate `meta` tags, a `head`, `body`, and `title` element. Also, link your stylesheet to the page. + +# --hints-- + +Your code should have a `` declaration. + +```js +assert(code.match(//i)); +``` + +Your code should have an `html` element. + +```js +assert.equal(document.querySelectorAll('html')?.length, 1); +``` + +Your code should have a `head` element within the `html` element. + +```js +assert.equal(document.querySelectorAll('head')?.length, 1); +``` + +Your code should have a `body` element within the `html` element. + +```js +assert.equal(document.querySelectorAll('body')?.length, 1); +``` + +Your `head` element should come before your `body` element. + +```js +assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD'); +``` + +You should have two `meta` elements. + +```js +const meta = document.querySelectorAll('meta'); +assert.equal(meta?.length, 2); +``` + +One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); +assert.exists(target); +``` + +The other `meta` element should have the `charset` attribute set to `UTF-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +assert.exists(target); +``` + +Your code should have a `title` element. + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +Your `title` should have some text. + +```js +const title = document.querySelector('title'); +assert.isAtLeast(title?.textContent?.length, 1); +``` + +Your code should have a `link` element. + +```js +assert(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / + + + + + + Penguin + + + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md new file mode 100644 index 00000000000000..be0b424bdb5fba --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md @@ -0,0 +1,53 @@ +--- +id: 61968df2acd5550bf1616c34 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Normalise your page's sizing, by removing the `body` element's `margin` and `padding`. + +# --hints-- + +You should give `body` a `margin` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); +``` + +You should give `body` a `padding` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + + + +``` + +```css +--fcc-editable-region-- +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md new file mode 100644 index 00000000000000..de1934899972d0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md @@ -0,0 +1,51 @@ +--- +id: 61968e9243a4090cc805531c +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Remove both the horizontal and vertical scrollbars, and prevent programmatic scrolling, using only one property. + +# --hints-- + +You should give `body` an `overflow` of `clip`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'clip'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + + + +``` + +```css +--fcc-editable-region-- +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md new file mode 100644 index 00000000000000..b5e240acbaadbe --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md @@ -0,0 +1,64 @@ +--- +id: 61968f8877c6720d6d61aaf5 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Within the `body`, add a `div` with a `class` of `ground`. + +# --hints-- + +You should add a new `div`. + +```js +assert.exists(document.querySelector('div')); +``` + +You should give the `div` a `class` of `ground`. + +```js +assert.include(document.querySelector('div')?.className, 'ground'); +``` + +You should place the `div` within the `body`. + +```js +assert.exists(document.querySelector('body > div.ground')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md new file mode 100644 index 00000000000000..0b400b7701384a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md @@ -0,0 +1,66 @@ +--- +id: 619691693bc14b0e528f5a20 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`. + +# --hints-- + +You should use the `.ground` selector. + +```js +assert.match(code, /\.ground\s*\{/); +``` + +You should give the `.ground` element a `width` of `100vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw'); +``` + +You should give the `.ground` element a `height` of `400px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md new file mode 100644 index 00000000000000..ac23498857194e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md @@ -0,0 +1,58 @@ +--- +id: 6196928658b6010f28c39484 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`. + +# --hints-- + +You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`. + +```js +assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.ground { + width: 100vw; + height: 400px; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md new file mode 100644 index 00000000000000..be4e21b00663a1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md @@ -0,0 +1,73 @@ +--- +id: 619692ff79f5770fc6d8c0b4 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin. + +# --hints-- + +You should add a new `div` within the `body`. + +```js +assert.equal(document.querySelectorAll('body > div')?.length, 2); +``` + +You should give the `div` a `class` of `penguin`. + +```js +assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin'); +``` + +You should place `div.penguin` before `div.ground`. + +```js +assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + +--fcc-editable-region-- + + +
+ +--fcc-editable-region-- + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md new file mode 100644 index 00000000000000..ffc20e0a9315e0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md @@ -0,0 +1,75 @@ +--- +id: 6196990f966e8f10a40094f6 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Target the `.penguin` element, and set its `width` and `height` to `300px`. + +# --hints-- + +You should use the `.penguin` selector. + +```js +assert.match(code, /\.penguin\s*\{/); +``` + +You should give `.penguin` a `width` of `300px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px'); +``` + +You should give `.penguin` a `height` of `300px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md new file mode 100644 index 00000000000000..4a3d8650b1ff1e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md @@ -0,0 +1,75 @@ +--- +id: 619699c10a0f6e11591d73c4 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`. + +# --hints-- + +You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginBottom, 'auto'); +``` + +You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.penguin { + width: 300px; + height: 300px; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md new file mode 100644 index 00000000000000..ab4f0c0c70c662 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md @@ -0,0 +1,83 @@ +--- +id: 61969aa6acef5b12200f672e +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +To create some scenery in the background, you will add two mountains. + +Above the `.penguin` element, add a `div` with a `class` of `left-mountain`. + +# --hints-- + +You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('body > div')?.length, 3); +``` + +You should give the `div` a `class` of `left-mountain`. + +```js +assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain'); +``` + +You should place `.left-mountain` before `.penguin`. + +```js +assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + +--fcc-editable-region-- + + +
+
+ +--fcc-editable-region-- + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md new file mode 100644 index 00000000000000..ca587cc993d183 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md @@ -0,0 +1,89 @@ +--- +id: 61969c487ced6f12db8fef94 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`. + +# --hints-- + +You should use the `.left-mountain` selector. + +```js +assert.match(code, /\.left-mountain\s*\{/); +``` + +You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px'); +``` + +You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px'); +``` + +You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`. + +```js +assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md new file mode 100644 index 00000000000000..aef38e05a45c32 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md @@ -0,0 +1,76 @@ +--- +id: 61969d66cfcdba137d021558 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout. + +# --hints-- + +You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md new file mode 100644 index 00000000000000..96d112e5130c03 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md @@ -0,0 +1,91 @@ +--- +id: 61969e7451455614217e901b +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by. + +Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis. + +# --hints-- + +You should give `.left-mountain` a `transform` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform); +``` + +You should use the `skew` function on `transform`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew'); +``` + +You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md new file mode 100644 index 00000000000000..73015c8fffce84 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md @@ -0,0 +1,90 @@ +--- +id: 6196adc17f77a714d51485f2 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Set the stack level of the mountain element such that it remains directly behind the `.ground` element. + +# --hints-- + +You should use the `z-index` property to change the stack level. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex); +``` + +You should set the `z-index` property to `2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2'); +``` + +You should not change the `z-index` of the `.ground` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md new file mode 100644 index 00000000000000..0983e0fd2ec4b4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md @@ -0,0 +1,86 @@ +--- +id: 6196aead7ac7bf1584b17a7f +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`. + +# --hints-- + +You should give `.left-mountain` a `margin-top` of `100px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px'); +``` + +You should give `.ground` a `margin-top` of `-58px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md new file mode 100644 index 00000000000000..c20375470a36a9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md @@ -0,0 +1,92 @@ +--- +id: 6196ce0415498d2463989e84 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`. + +# --hints-- + +You should add a new `div` within `body`. + +```js +assert.equal(document.querySelectorAll('body > div')?.length, 4); +``` + +You should give the `div` a `class` of `back-mountain`. + +```js +assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain'); +``` + +You should place `.back-mountain` after `.left-mountain`. + +```js +assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + +--fcc-editable-region-- + +
+ +
+
+ +--fcc-editable-region-- + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md new file mode 100644 index 00000000000000..b6b61bb39d5daa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md @@ -0,0 +1,100 @@ +--- +id: 6196cee94c6da1253809dff9 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`. + +# --hints-- + +You should use the `.back-mountain` selector. + +```js +assert.match(code, /\.back-mountain\s*\{/); +``` + +You should give `.back-mountain` a `width` of `300px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px'); +``` + +You should give `.back-mountain` a `height` of `300px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px'); +``` + +You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`. + +```js +assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md new file mode 100644 index 00000000000000..f591f16d485c2a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md @@ -0,0 +1,87 @@ +--- +id: 6196d00a5d7292262bc02f4c +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout. + +# --hints-- + +You should give `.back-mountain` a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +--fcc-editable-region-- +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md new file mode 100644 index 00000000000000..24f3cb2c039c48 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md @@ -0,0 +1,100 @@ +--- +id: 6196d0cda039d026f7f78d1e +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element. + +# --hints-- + +You should use the `z-index` property to change the stack level. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex); +``` + +You should set the `z-index` property to `1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1'); +``` + +You should not change the `z-index` of the `.left-mountain` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +--fcc-editable-region-- +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md new file mode 100644 index 00000000000000..ca88d5121e99c3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md @@ -0,0 +1,119 @@ +--- +id: 6196d1ac33c68d27dcda5796 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`. + +# --hints-- + +You should use the `transform` property to rotate the element. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform); +``` + +You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform, 'rotate(45deg)'); +``` + +You should give `.back-mountain` a `left` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left); +``` + +You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px'); +``` + +You should give `.back-mountain` a `top` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top); +``` + +You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +--fcc-editable-region-- +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md new file mode 100644 index 00000000000000..6f50c075cfd913 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md @@ -0,0 +1,104 @@ +--- +id: 6196d213d99f16287bff22ae +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`. + +# --hints-- + +You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('body > div')?.length, 5); +``` + +You should give the new `div` element a `class` of `sun`. + +```js +assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun'); +``` + +You should place the new `div` element immediately after the `.back-mountain` element. + +```js +assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + +--fcc-editable-region-- + +
+
+ +
+
+ +--fcc-editable-region-- + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md new file mode 100644 index 00000000000000..cfd0f6827fbe73 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md @@ -0,0 +1,112 @@ +--- +id: 6196d2c0f22ca0293107c048 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`. + +# --hints-- + +You should use the `.sun` selector. + +```js +assert.match(code, /\.sun\s*\{/); +``` + +You should give `.sun` a `width` of `200px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px'); +``` + +You should give `.sun` a `height` of `200px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px'); +``` + +You should give `.sun` a `background-color` of `yellow`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md new file mode 100644 index 00000000000000..03e1bef9eb1c4c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md @@ -0,0 +1,105 @@ +--- +id: 6196d32d1340d829f0f6f57d +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle. + +# --hints-- + +You should give `.sun` a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute'); +``` + +You should give `.sun` a `border-radius` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +--fcc-editable-region-- +.sun { + width: 200px; + height: 200px; + background-color: yellow; + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md new file mode 100644 index 00000000000000..ed1dd40c595b7b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md @@ -0,0 +1,107 @@ +--- +id: 6196d41d40bf9b2aaea5d520 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen. + +# --hints-- + +You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px'); +``` + +You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +--fcc-editable-region-- +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md new file mode 100644 index 00000000000000..954564415d33aa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md @@ -0,0 +1,118 @@ +--- +id: 6197cff995d03905b0cca8ad +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Your penguin will consist of two main sections: the head, and the body. + +Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`. + +# --hints-- + +You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin > div')?.length, 2); +``` + +You should give the first `div` a `class` of `penguin-head`. + +```js +assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head'); +``` + +You should give the second `div` a `class` of `penguin-body`. + +```js +assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md new file mode 100644 index 00000000000000..151d27cb3829cc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md @@ -0,0 +1,125 @@ +--- +id: 6197f40a16afea068c7e60c8 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`. + +# --hints-- + +You should use the `z-index` property to change the stack level. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex); +``` + +You should give the `.penguin` element a `z-index` of `4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4'); +``` + +You should give `.penguin` a `position` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position); +``` + +You should give `.penguin` a `position` of `relative`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +--fcc-editable-region-- +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md new file mode 100644 index 00000000000000..5c42c6a4819ffe --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md @@ -0,0 +1,65 @@ +--- +id: 6197f667297bb30a552ce017 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`. + +# --hints-- + +You should give `.ground` a `z-index` of `3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3'); +``` + +You should give `.ground` a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md new file mode 100644 index 00000000000000..58e601a3eefb24 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md @@ -0,0 +1,128 @@ +--- +id: 61993b72e874e709b8dfd666 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`. + +# --hints-- + +You should use the `.penguin-head` selector. + +```js +assert.match(code, /\.penguin-head\s*\{/); +``` + +You should give `.penguin-head` a `width` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%'); +``` + +You should give `.penguin-head` a `height` of `45%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%'); +``` + +You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`. + +```js +assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md new file mode 100644 index 00000000000000..81ecef3046537f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md @@ -0,0 +1,122 @@ +--- +id: 61993cf26a8e0f0a553db223 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +_Most_ penguins do not have a square head. + +Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`. + +# --hints-- + +You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`. + +```js +// Maybe check for individual border-radius properties? +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +--fcc-editable-region-- +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md new file mode 100644 index 00000000000000..fec5b8d98a38d2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md @@ -0,0 +1,139 @@ +--- +id: 61993dbb35adf30b10d49e38 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`. + +# --hints-- + +You should use the `.penguin-body` selector. + +```js +assert.match(code, /\.penguin-body\s*\{/); +``` + +You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%'); +``` + +You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%'); +``` + +You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`. + +```js +assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md new file mode 100644 index 00000000000000..df8e6a855c4394 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md @@ -0,0 +1,133 @@ +--- +id: 61993e9adc9e9a0bb4d28fff +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Another interesting fact about penguins is that they do not have square bodies. + +Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body. + +# --hints-- + +You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; +} + +--fcc-editable-region-- +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md new file mode 100644 index 00000000000000..3db2e03fda9d47 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md @@ -0,0 +1,139 @@ +--- +id: 6199409834ccaf0d10736596 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`. + +# --hints-- + +You should use the `.penguin *` selector. + +```js +assert.match(code, /\.penguin\s*\*\s*\{/); +``` + +You should give `.penguin *` a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md new file mode 100644 index 00000000000000..86896286d43a8c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md @@ -0,0 +1,154 @@ +--- +id: 6199429802b7c10dc79ff871 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent. + +# --hints-- + +You should give `.penguin-head` a `top` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top); +``` + +You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%'); +``` + +You should give `.penguin-head` a `left` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left); +``` + +You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +--fcc-editable-region-- +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md new file mode 100644 index 00000000000000..c4312988ebf7ab --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md @@ -0,0 +1,156 @@ +--- +id: 619943285a41720e6370d985 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent. + +# --hints-- + +You should give `.penguin-body` a `top` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top); +``` + +You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%'); +``` + +You should give `.penguin-body` a `left` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left); +``` + +You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; +} + +--fcc-editable-region-- +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md new file mode 100644 index 00000000000000..796857678a8dab --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md @@ -0,0 +1,146 @@ +--- +id: 619943876b706d0f35c01dbc +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element. + +# --hints-- + +You should use the `z-index` property to change the stack level. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex); +``` + +You should give the `.penguin-head` element a `z-index` of `1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +--fcc-editable-region-- +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md new file mode 100644 index 00000000000000..403d35990b22ef --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md @@ -0,0 +1,148 @@ +--- +id: 6199442866286d0ff421a4fc +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string. + +# --hints-- + +You should use the `.penguin-body::before` selector. + +```js +assert.match(code, /\.penguin-body::before\s*\{/); +``` + +You should give `.penguin-body::before` a `content` of `""`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md new file mode 100644 index 00000000000000..b5a97dad6cc903 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md @@ -0,0 +1,145 @@ +--- +id: 619bcf239fc15905ecd66fce +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Position the pseudo-element relative to its closest positioned ancestor. + +# --hints-- + +You should give `.penguin-body::before` a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +--fcc-editable-region-- +.penguin-body::before { + content: ""; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md new file mode 100644 index 00000000000000..49f5c8a1d4531e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md @@ -0,0 +1,158 @@ +--- +id: 619be73b3c806006ccc00bb0 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`. + +# --hints-- + +You should give `.penguin-body::before` a `width` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%'); +``` + +You should give `.penguin-body::before` a `height` of `45%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%'); +``` + +You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +--fcc-editable-region-- +.penguin-body::before { + content: ""; + position: absolute; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md new file mode 100644 index 00000000000000..d26ba7edc7c72e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md @@ -0,0 +1,155 @@ +--- +id: 619be7af7b0bf60770f5d2a4 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Position the pseudo-element `10%` from the top and `25%` from the left of its parent. + +# --hints-- + +You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%'); +``` + +You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +--fcc-editable-region-- +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md new file mode 100644 index 00000000000000..66497f14a392ae --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md @@ -0,0 +1,160 @@ +--- +id: 619be80062551a080e32c821 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`. + +# --hints-- + +You should use the `border-radius` property to round off the crest. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius); +``` + +You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +--fcc-editable-region-- +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md new file mode 100644 index 00000000000000..5f8b07f1745de2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md @@ -0,0 +1,152 @@ +--- +id: 619be8ce4ea49008c5bfbc30 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Increase the psuedo-element's transparency by `30%`. + +# --hints-- + +You should give `.penguin-body::before` an `opacity` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +--fcc-editable-region-- +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md new file mode 100644 index 00000000000000..f54bfa634d93ec --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md @@ -0,0 +1,166 @@ +--- +id: 619be946958c6009844f1dee +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`. + +# --hints-- + +You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2); +``` + +You should give the first `div` a `class` of `face`, but found `--fcc-actual--`. + +```js +assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face'); +``` + +You should give the second `div` a `class` of `face`, but found `--fcc-actual--`. + +```js +assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md new file mode 100644 index 00000000000000..e5add0eae5cbf8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md @@ -0,0 +1,193 @@ +--- +id: 619c155df0063a0a3fec0e32 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`. + +# --hints-- + +You should use the `.face` selector. + +```js +assert.match(code, /\.face\s*\{/); +``` + +You should give `.face` a `width` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width); +``` + +You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%'); +``` + +You should give `.face` a `height` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height); +``` + +You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%'); +``` + +You should give `.face` a `background-color` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor); +``` + +You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md new file mode 100644 index 00000000000000..b99042ce04d77b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md @@ -0,0 +1,165 @@ +--- +id: 619c16debd0c270b01c5ce38 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`. + +# --hints-- + +You should give `.face` a `border-radius` of `70% 70% 60% 60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +--fcc-editable-region-- +.face { + width: 60%; + height: 70%; + background-color: white; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md new file mode 100644 index 00000000000000..53dde86c234512 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md @@ -0,0 +1,169 @@ +--- +id: 619cfdf2e63ddf05feab86ad +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Position the `.face` elements so that they are `15%` from the top. + +# --hints-- + +You should give `.face` a `top` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top); +``` + +You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +--fcc-editable-region-- +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md new file mode 100644 index 00000000000000..1a38b59bd158ef --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md @@ -0,0 +1,171 @@ +--- +id: 619d019488f98c06acbbb71a +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Currently, the two `.face` elements are on top of each other. + +Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element. + +# --hints-- + +You should give a `class` of `left` to the first `.face` element. + +```js +assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left'); +``` + +You should give a `class` of `right` to the second `.face` element. + +```js +assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+
+
+
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md new file mode 100644 index 00000000000000..39f2459a839f69 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md @@ -0,0 +1,177 @@ +--- +id: 619d022dc8400c0763829a17 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Target the `.face` element with the `left` class, and position it `5%` left of its parent. + +# --hints-- + +You should use the `.face.left` selector. + +```js +assert.match(code, /\.face\.left\s*\{/); +``` + +You should give `.face.left` a `left` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left); +``` + +You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md new file mode 100644 index 00000000000000..71740f75f7ed54 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md @@ -0,0 +1,181 @@ +--- +id: 619d02c7bc95bf0827a5d296 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Target the `.face` element with the `right` class, and position it `5%` right of its parent. + +# --hints-- + +You should use the `.face.right` selector. + +```js +assert.match(code, /\.face\.right\s*\{/); +``` + +You should give `.face.right` a `right` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right); +``` + +You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +--fcc-editable-region-- +.face.left { + left: 5%; +} + + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md new file mode 100644 index 00000000000000..0a3d13de0322de --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md @@ -0,0 +1,184 @@ +--- +id: 619d033915012509031f309a +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Below the `.face.right` element, add a `div` element with a `class` of `chin`. + +# --hints-- + +You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3); +``` + +You should give the `div` a `class` of `chin`. + +```js +assert.exists(document.querySelector('.penguin-head > div.chin')); +``` + +You should place the `div` element below the `.face.right` element. + +```js +assert.exists(document.querySelector('.face.right + .chin')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+
+
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md new file mode 100644 index 00000000000000..b1fd72eb246b1e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md @@ -0,0 +1,210 @@ +--- +id: 619d03dadadb6509a16f4f5f +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Target the `.chin` element, and give it a `width` of `90%`, height of `70%`, and `background-color` of `white`. + +# --hints-- + +You should use the `.chin` selector. + +```js +assert.match(code, /\.chin\s*\{/); +``` + +You should give `.chin` a `width` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width); +``` + +You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%'); +``` + +You should give `.chin` a `height` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height); +``` + +You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%'); +``` + +You should give `.chin` a `background-color` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor); +``` + +You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md new file mode 100644 index 00000000000000..23655dc0882d18 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md @@ -0,0 +1,206 @@ +--- +id: 619d0503e03a790a4179d463 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`. + +# --hints-- + +You should give `.chin` a `top` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top); +``` + +You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%'); +``` + +You should give `.chin` a `left` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left); +``` + +You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%'); +``` + +You should give `.chin` a `border-radius` of `70% 70% 100% 100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +--fcc-editable-region-- +.chin { + width: 90%; + height: 70%; + background-color: white; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md new file mode 100644 index 00000000000000..a8ba349954221f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md @@ -0,0 +1,197 @@ +--- +id: 619d05c54dabca0b10058235 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +So far, the `.face` and `.chin` elements have the same `background-color`. + +Create a custom CSS property called `--penguin-face`, and set it to `white`. + +# --hints-- + +You should use the `:root` selector. + +```js +assert.match(code, /:root\s*\{/); +``` + +You should give `:root` a `--penguin-face` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face')); +``` + +You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: white; + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md new file mode 100644 index 00000000000000..fa8b62a3561857 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md @@ -0,0 +1,197 @@ +--- +id: 619d0882f54bf40bdc4671ed +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Where relevant, replace property values with your `--penguin-face` variable. + +# --hints-- + +You should give `.face` a `background-color` of `var(--penguin-face)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)'); +``` + +You should give `.chin` a `background-color` of `var(--penguin-face)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)'); +``` + +You should not use `var(--penguin-face)` in the `.penguin-body` selector. + +```js +assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: white; + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md new file mode 100644 index 00000000000000..d3e4bbd140e63b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md @@ -0,0 +1,222 @@ +--- +id: 619d090cd8d6db0c93dc5087 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`. + +# --hints-- + +You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5); +``` + +You should give the first new `div` a `class` of `eye`. + +```js +assert.exists(document.querySelector('.penguin-head > div.eye')); +``` + +You should give the second new `div` a `class` of `eye`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2); +``` + +You should give the first new `div` a `class` of `left`. + +```js +assert.exists(document.querySelector('.penguin-head > div.eye.left')); +``` + +You should give the second new `div` a `class` of `right`. + +```js +assert.exists(document.querySelector('.penguin-head > div.eye.right')); +``` + +You should place `div.eye.left` after `div.chin`. + +```js +assert.exists(document.querySelector('.chin + .eye.left')); +``` + +You should place `div.eye.right` after `div.eye.left`. + +```js +assert.exists(document.querySelector('.eye.left + .eye.right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+
+
+
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md new file mode 100644 index 00000000000000..194fbebfee0d5b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md @@ -0,0 +1,207 @@ +--- +id: 619d0b51ca42ed0d74582186 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`. + +# --hints-- + +You should use the `.eye` selector. + +```js +assert.match(code, /\.eye\s*\{/); +``` + +You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%'); +``` + +You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%'); +``` + +You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md new file mode 100644 index 00000000000000..5ef1e0c107d550 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md @@ -0,0 +1,200 @@ +--- +id: 619d0bc9cb05360e1bf549c3 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`. + +# --hints-- + +You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%'); +``` + +You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +--fcc-editable-region-- +.eye { + width: 15%; + height: 17%; + background-color: black; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md new file mode 100644 index 00000000000000..d4b3b9340ff5ce --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md @@ -0,0 +1,215 @@ +--- +id: 619d0c1594c38c0ebae75878 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent. + +# --hints-- + +You should use the `.eye.left` selector. + +```js +assert.match(code, /\.eye\.left\s*\{/); +``` + +You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%'); +``` + +You should use the `.eye.right` selector. + +```js +assert.match(code, /\.eye\.right\s*\{/); +``` + +You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md new file mode 100644 index 00000000000000..8cce4bf4b7d538 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md @@ -0,0 +1,225 @@ +--- +id: 619d0d18ca99870f884a7bff +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Within each `.eye` element, add a `div` with a `class` of `eye-lid`. + +# --hints-- + +You should add one `div` element within `.eye.left`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1); +``` + +You should add one `div` element within `.eye.right`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1); +``` + +You should give the first new `div` a `class` of `eye-lid`. + +```js +assert.exists(document.querySelector('.eye.left > div.eye-lid')); +``` + +You should give the second new `div` a `class` of `eye-lid`. + +```js +assert.exists(document.querySelector('.eye.right > div.eye-lid')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+ +
+
+ +
+
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md new file mode 100644 index 00000000000000..91bf2597bfd358 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md @@ -0,0 +1,227 @@ +--- +id: 619d0daf214542102739b0da +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`. + +# --hints-- + +You should use the `.eye-lid` selector. + +```js +assert.match(code, /\.eye-lid\s*\{/); +``` + +You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%'); +``` + +You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%'); +``` + +You should give `.eye-lid` a `background-color` of `var(--penguin-face)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md new file mode 100644 index 00000000000000..cca6de99cfe0a8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md @@ -0,0 +1,226 @@ +--- +id: 619d0e56f9ca9710fcb974e3 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`. + +# --hints-- + +You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%'); +``` + +You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%'); +``` + +You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +--fcc-editable-region-- +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md new file mode 100644 index 00000000000000..246841f262f329 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md @@ -0,0 +1,247 @@ +--- +id: 619d0eec0ac40611b41e2ccc +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`. + +# --hints-- + +You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7); +``` + +You should give the first new `div` a `class` of `blush`. + +```js +assert.exists(document.querySelector('.penguin-head > div.blush')); +``` + +You should give the second new `div` a `class` of `blush`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2); +``` + +You should give the first new `div` a `class` of `left`. + +```js +assert.exists(document.querySelector('.penguin-head > div.blush.left')); +``` + +You should give the second new `div` a `class` of `right`. + +```js +assert.exists(document.querySelector('.penguin-head > div.blush.right')); +``` + +You should place `.blush.right` after `.blush.left`. + +```js +assert.exists(document.querySelector('.blush.left + .blush.right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md new file mode 100644 index 00000000000000..a2c7b8bca46b6f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md @@ -0,0 +1,238 @@ +--- +id: 619d0fc9825c271253df28d4 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`. + +# --hints-- + +You should use the `.blush` selector. + +```js +assert.match(code, /\.blush\s*\{/); +``` + +You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%'); +``` + +You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%'); +``` + +You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md new file mode 100644 index 00000000000000..f0ecacc88a0993 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md @@ -0,0 +1,231 @@ +--- +id: 619d102d786c3d13124c37c6 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`. + +# --hints-- + +You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%'); +``` + +You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +--fcc-editable-region-- +.blush { + width: 15%; + height: 10%; + background-color: pink; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md new file mode 100644 index 00000000000000..f31cbe0a90cf09 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md @@ -0,0 +1,246 @@ +--- +id: 619d107edf7ddf13cc77106a +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent. + +# --hints-- + +You should use the `.blush.left` selector. + +```js +assert.match(code, /\.blush\.left\s*\{/); +``` + +You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%'); +``` + +You should use the `.blush.right` selector. + +```js +assert.match(code, /\.blush\.right\s*\{/); +``` + +You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md new file mode 100644 index 00000000000000..bf0c236a6611c6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md @@ -0,0 +1,271 @@ +--- +id: 619d10cc98145f14820399c5 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`. + +# --hints-- + +You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9); +``` + +You should give the first new `div` a `class` of `beak`. + +```js +assert.exists(document.querySelector('.penguin-head > div.beak')); +``` + +You should give the second new `div` a `class` of `beak`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2); +``` + +You should give the first new `div` a `class` of `top`. + +```js +assert.exists(document.querySelector('.penguin-head > div.beak.top')); +``` + +You should give the second new `div` a `class` of `bottom`. + +```js +assert.exists(document.querySelector('.penguin-head > div.beak.bottom')); +``` + +You should place `div.beak.top` after `div.blush.right`. + +```js +assert.exists(document.querySelector('.blush.right + .beak.top')); +``` + +You should place `div.beak.bottom` after `div.beak.top`. + +```js +assert.exists(document.querySelector('.beak.top + .beak.bottom')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md new file mode 100644 index 00000000000000..ce35b4d554117d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md @@ -0,0 +1,256 @@ +--- +id: 619d115e2adcd71538e82ebb +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`. + +# --hints-- + +You should use the `.beak` selector. + +```js +assert.match(code, /\.beak\s*\{/); +``` + +You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%'); +``` + +You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange'); +``` + +You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md new file mode 100644 index 00000000000000..e9d865406a4c91 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md @@ -0,0 +1,262 @@ +--- +id: 619d11e6d5ef9515d2a16033 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent. + +# --hints-- + +You should use the `.beak.top` selector. + +```js +assert.match(code, /\.beak\.top\s*\{/); +``` + +You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%'); +``` + +You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%'); +``` + +You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md new file mode 100644 index 00000000000000..a93da9151c040d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md @@ -0,0 +1,267 @@ +--- +id: 619d129a417d0716a94de913 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`. + +# --hints-- + +You should use the `.beak.bottom` selector. + +```js +assert.match(code, /\.beak\.bottom\s*\{/); +``` + +You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%'); +``` + +You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%'); +``` + +You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +--fcc-editable-region-- +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md new file mode 100644 index 00000000000000..71e033623bb273 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md @@ -0,0 +1,267 @@ +--- +id: 619d1340361095175f4b5115 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element. + +# --hints-- + +You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin > div')?.length, 3); +``` + +You should give the new `div` a `class` of `shirt`. + +```js +assert.exists(document.querySelector('.penguin > div.shirt')); +``` + +You should place the new `div` before `.penguin-body`. + +```js +assert.exists(document.querySelector('.shirt + .penguin-body')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md new file mode 100644 index 00000000000000..1b21e208fb1632 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md @@ -0,0 +1,263 @@ +--- +id: 619d15797b580c1828b05426 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Within the `.shirt` element, add a `div` with the following emoji as content: 💜 + +# --hints-- + +You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.shirt > div')?.length, 1); +``` + +You should give the new `div` a content of `💜`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelector('.shirt > div')?.textContent, '💜'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md new file mode 100644 index 00000000000000..a76d3f48276acb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md @@ -0,0 +1,264 @@ +--- +id: 619d15d955d9d418c4487bbc +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS` + +# --hints-- + +You should add one `p` element within `.shirt`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.shirt > p')?.length, 1); +``` + +You should give the `p` element the content `I CSS`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
💜
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md new file mode 100644 index 00000000000000..d14671bd3fe49c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md @@ -0,0 +1,278 @@ +--- +id: 619d1629a8adc61960ca8b40 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`. + +# --hints-- + +You should use the `.shirt` selector. + +```js +assert.match(code, /\.shirt\s*\{/); +``` + +You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px'); +``` + +You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif'); +``` + +You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md new file mode 100644 index 00000000000000..27b9f2be0717de --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md @@ -0,0 +1,272 @@ +--- +id: 619d1c5fc9f8941a400955da +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +If you look closely, the _heart_ emoji is slightly different. This is because some of the character's properties were overridden by the `font-weight` style of `bold`. + +Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value. + +# --hints-- + +You should use the `.shirt div` selector to target the `div` with the heart emoji. + +```js +assert.match(code, /\.shirt div\s*\{/); +``` + +You should give the `.shirt div` a `font-weight` of `initial` or `normal`. + +```js +assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- +.shirt { + font: bold 25px Helvetica, sans-serif; +} + + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md new file mode 100644 index 00000000000000..6c54a58964a6c2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md @@ -0,0 +1,273 @@ +--- +id: 619d1dab9ff3421ae1976991 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent. + +# --hints-- + +You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px'); +``` + +You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- +.shirt { + font: bold 25px Helvetica, sans-serif; +} + +.shirt div { + font-weight: initial; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md new file mode 100644 index 00000000000000..c9e91af3bb6eb5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md @@ -0,0 +1,281 @@ +--- +id: 619d1deb8b04811b8839ffe4 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element. + +# --hints-- + +You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px'); +``` + +You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px'); +``` + +You should give the `.shirt` element a `z-index` of `1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- +.shirt { + font: bold 25px Helvetica, sans-serif; + +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md new file mode 100644 index 00000000000000..d1d1c163e2f62c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md @@ -0,0 +1,272 @@ +--- +id: 619d1e7a8e81a61c5a819dc4 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +For the shirt's final touch, set the `color` to `#6a6969`. + +# --hints-- + +You should give `.shirt` a `color` of `#6a6969`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md new file mode 100644 index 00000000000000..5478b812f5c7ac --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md @@ -0,0 +1,306 @@ +--- +id: 619d1ed33c9a071cf657a0d6 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Fun fact: Penguins cannot stand without at least two feet. + +Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`. + +# --hints-- + +You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2); +``` + +You should give the first new `div` a `class` of `foot`. + +```js +assert.exists(document.querySelector('.penguin-body > div.foot')); +``` + +You should give the second new `div` a `class` of `foot`. + +```js +assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2); +``` + +You should give one `div` a `class` of `left`. + +```js +assert.exists(document.querySelector('.penguin-body > div.foot.left')); +``` + +You should give the other `div` a `class` of `right`. + +```js +assert.exists(document.querySelector('.penguin-body > div.foot.right')); +``` + +You should place `.foot.right` after `.foot.left`. + +```js +assert.exists(document.querySelector('.foot.left + .foot.right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md new file mode 100644 index 00000000000000..8b493d914ab41b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md @@ -0,0 +1,295 @@ +--- +id: 619d1fb5d244c31db8a7fdb7 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`. + +# --hints-- + +You should use the `.foot` selector. + +```js +assert.match(code, /\.foot\s*\{/); +``` + +You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%'); +``` + +You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%'); +``` + +You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md new file mode 100644 index 00000000000000..edb8b48f294212 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md @@ -0,0 +1,288 @@ +--- +id: 619d204bd73ae51e743b8e94 +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`. + +# --hints-- + +You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%'); +``` + +You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.foot { + width: 15%; + height: 30%; + background-color: orange; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md new file mode 100644 index 00000000000000..335dce1653d1fa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md @@ -0,0 +1,304 @@ +--- +id: 619d20b12996101f430920fb +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +The penguin's beak and feet share the same `color`. + +Create a new custom CSS variable named `--penguin-picorna`, and replace all relavant property values with it. + +# --hints-- + +You should give `:root` a `--penguin-picorna` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna')); +``` + +You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange'); +``` + +You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)'); +``` + +You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- +:root { + --penguin-face: white; + +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.foot { + width: 15%; + height: 30%; + background-color: orange; + top: 85%; + border-radius: 50%; +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md new file mode 100644 index 00000000000000..29d32498e93c92 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md @@ -0,0 +1,304 @@ +--- +id: 619d21fe6a3f9b2016be9d9d +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent. + +# --hints-- + +You should use the `.foot.left` selector. + +```js +assert.match(code, /\.foot\.left\s*\{/); +``` + +You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%'); +``` + +You should use the `.foot.right` selector. + +```js +assert.match(code, /\.foot\.right\s*\{/); +``` + +You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; +} + + +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md new file mode 100644 index 00000000000000..d59ff7896fb097 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md @@ -0,0 +1,300 @@ +--- +id: 619d229b0e542520cd91c685 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`. + +# --hints-- + +You should give `.foot.left` a `transform` of `rotate(80deg)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left').getPropVal('transform', true), 'rotate(80deg)'); +``` + +You should give `.foot.right` a `transform` of `rotate(-80deg)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right').getPropVal('transform', true), 'rotate(-80deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; +} + +--fcc-editable-region-- +.foot.left { + left: 25%; + +} + +.foot.right { + right: 25%; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md new file mode 100644 index 00000000000000..5763e8de58cce0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md @@ -0,0 +1,295 @@ +--- +id: 619d23089e787e216a7043d6 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element. + +# --hints-- + +You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + +} +--fcc-editable-region-- + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md new file mode 100644 index 00000000000000..4f6286196ecfb9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md @@ -0,0 +1,328 @@ +--- +id: 619d237a107c10221ed743fa +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Fun fact: Penguins cannot fly without wings. + +Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`. + +# --hints-- + +You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4); +``` + +You should give the first new `div` a `class` of `arm`. + +```js +assert.exists(document.querySelector('.penguin-body > div.arm')); +``` + +You should give the second new `div` a `class` of `arm`. + +```js +assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2); +``` + +You should give one `div` a `class` of `left`. + +```js +assert.exists(document.querySelector('.penguin-body > div.arm.left')); +``` + +You should give the other `div` a `class` of `right`. + +```js +assert.exists(document.querySelector('.penguin-body > div.arm.right')); +``` + +You should place `.arm.right` after `.arm.left`. + +```js +assert.exists(document.querySelector('.arm.left + .arm.right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+--fcc-editable-region-- +
+ +
+
+
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md new file mode 100644 index 00000000000000..99562c1c8d7892 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md @@ -0,0 +1,317 @@ +--- +id: 619d26b12e651022d80cd017 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`. + +# --hints-- + +You should use the `.arm` selector. + +```js +assert.match(code, /\.arm\s*\{/); +``` + +You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%'); +``` + +You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%'); +``` + +You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`. + +```js +assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md new file mode 100644 index 00000000000000..315b0d7513dc66 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md @@ -0,0 +1,332 @@ +--- +id: 619d2712853306238f41828e +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it. + +# --hints-- + +You should give `:root` a `--penguin-skin` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin')); +``` + +You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray'); +``` + +You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))'); +``` + +You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)'); +``` + +You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- +:root { + --penguin-face: white; + --penguin-picorna: orange; + +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + gray, + rgb(209, 210, 199) + ); +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md new file mode 100644 index 00000000000000..2840399f95e122 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md @@ -0,0 +1,340 @@ +--- +id: 619d2b7a84e78b246f2d17a2 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent. + +# --hints-- + +You should use the `.arm.left` selector. + +```js +assert.match(code, /\.arm\.left\s*\{/); +``` + +You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%'); +``` + +You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%'); +``` + +You should use the `.arm.right` selector. + +```js +assert.match(code, /\.arm\.right\s*\{/); +``` + +You should give `.arm.right` a `top` of `0%`. + +```js +assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top); +``` + +You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md new file mode 100644 index 00000000000000..4ae53bfc82548c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md @@ -0,0 +1,325 @@ +--- +id: 619d2bd9c1d43c2526e96f1f +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent. + +# --hints-- + +You should use the `transform-origin` property to do this. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin); +``` + +You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`. + +```js +assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); +} + +--fcc-editable-region-- +.arm.left { + top: 35%; + left: 5%; + +} + +.arm.right { + top: 0%; + right: -5%; +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md new file mode 100644 index 00000000000000..6d3798cdc6ab4e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md @@ -0,0 +1,320 @@ +--- +id: 619d2d4e80400325ff89664a +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis. + +# --hints-- + +You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left').getPropVal('transform', true), 'rotate(130deg)scaleX(-1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); +} + +--fcc-editable-region-- +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + +} +--fcc-editable-region-- + +.arm.right { + top: 0%; + right: -5%; +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md new file mode 100644 index 00000000000000..19fcd75107784d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md @@ -0,0 +1,321 @@ +--- +id: 619d2ebc81ba81271460850d +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Rotate the right arm by `45deg` counterclockwise. + +# --hints-- + +You should give `.arm.right` a `transform` of `rotate(-45deg)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.getPropVal('transform', true), 'rotate(-45deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +--fcc-editable-region-- +.arm.right { + top: 0%; + right: -5%; + +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md new file mode 100644 index 00000000000000..ca92f31fc58829 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md @@ -0,0 +1,327 @@ +--- +id: 619d2f0e9440bc27caee1cec +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Fun fact: Most, if not all, flippers are not naturally rectangles. + +Give the `.arm` elements top -left, -right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`. + +# --hints-- + +You should give `.arm` a `border-radius` of `30% 30% 30% 120%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + +} +--fcc-editable-region-- + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md new file mode 100644 index 00000000000000..e27421a66b80fb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md @@ -0,0 +1,323 @@ +--- +id: 619d2fd3ff4f772882e3d998 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element. + +# --hints-- + +You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + +} +--fcc-editable-region-- + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md new file mode 100644 index 00000000000000..249dd1cdaf6a25 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md @@ -0,0 +1,333 @@ +--- +id: 619d30350883802921bfcccc +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +Now, you are going to use CSS animations to make the penguin wave. + +Define a new `@keyframes` named `wave`. + +# --hints-- + +You should defined a new `@keyframes` rule. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes')); +``` + +You should give the `@keyframes` rule a `name` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md new file mode 100644 index 00000000000000..4a7cb3eaafdca2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md @@ -0,0 +1,345 @@ +--- +id: 619d324f5915c929f36ae91d +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Give `wave` four waypoints starting at `10%`, and incrementing by `10%`. + +# --hints-- + +You should add a `10%` waypoint for `@keyframes wave`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%')); +``` + +You should add a `20%` waypoint for `@keyframes wave`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%')); +``` + +You should add a `30%` waypoint for `@keyframes wave`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%')); +``` + +You should add a `40%` waypoint for `@keyframes wave`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- +@keyframes wave { + +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md new file mode 100644 index 00000000000000..1f054655a14e08 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md @@ -0,0 +1,338 @@ +--- +id: 619d32c7fa21f32aaa91d499 +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm. + +# --hints-- + +You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- +@keyframes wave { + 10% { + + } + 20% { + + } + 30% { + + } + 40% { + + } +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md new file mode 100644 index 00000000000000..d223c82b41d9a7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md @@ -0,0 +1,338 @@ +--- +id: 619d333b738e3c2b5d58b095 +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm. + +# --hints-- + +You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + + } + 30% { + + } + 40% { + + } +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md new file mode 100644 index 00000000000000..4345f7fd79dd06 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md @@ -0,0 +1,344 @@ +--- +id: 619d337765b9f02c10e93722 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +For the third and fourth waypoints, repeat the `transform` pattern once more. + +# --hints-- + +You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)'); +``` + +You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + + } + 40% { + + } +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md new file mode 100644 index 00000000000000..93b669377dfdb7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md @@ -0,0 +1,357 @@ +--- +id: 619d33c51140292cc5a21742 +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function. + +# --hints-- + +You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave'); +``` + +You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s'); +``` + +You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite'); +``` + +You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +--fcc-editable-region-- +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + +} +--fcc-editable-region-- + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md new file mode 100644 index 00000000000000..eca10ffaa32f6a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md @@ -0,0 +1,347 @@ +--- +id: 619d3482f505452d861d0f62 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions. + +# --hints-- + +You should use the `.penguin:active` selector. + +```js +assert.match(code, /\.penguin:active\s*\{/); +``` + +You should give `.penguin:active` a `transform` of `scale(1.5)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md new file mode 100644 index 00000000000000..960ef561d17893 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md @@ -0,0 +1,346 @@ +--- +id: 619d3561a951bf2e41a24f10 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +When you activate the `.penguin` element, it might look as though you can drag it around. This is not true. + +Indicate this to users, by giving the active element a `cursor` property of `not-allowed`. + +# --hints-- + +You should give `.penguin:active` a `cursor` property of `not-allowed`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +--fcc-editable-region-- +.penguin:active { + transform: scale(1.5); + +} +--fcc-editable-region-- + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md new file mode 100644 index 00000000000000..ce80ba31e554bc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md @@ -0,0 +1,357 @@ +--- +id: 619d36103839c82efa95dd34 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`. + +# --hints-- + +You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s'); +``` + +You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out'); +``` + +You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +--fcc-editable-region-- +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; + +} +--fcc-editable-region-- + +.penguin * { + position: absolute; +} + +.penguin:active { + transform: scale(1.5); + cursor: not-allowed; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md new file mode 100644 index 00000000000000..1fdd036d7e0576 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md @@ -0,0 +1,670 @@ +--- +id: 619d3711d04d623000013e9e +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element. + +Congratulations! You have completed the Responsive Web Design certification. + +# --hints-- + +You should give `.ground` a `height` of `calc(100vh - 300px)`. + +```js +assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; + transition: transform 1s ease-in-out 0ms; +} + +.penguin * { + position: absolute; +} + +.penguin:active { + transform: scale(1.5); + cursor: not-allowed; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +--fcc-editable-region-- +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +--fcc-editable-region-- +``` + +# --solutions-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; + transition: transform 1s ease-in-out 0ms; +} + +.penguin * { + position: absolute; +} + +.penguin:active { + transform: scale(1.5); + cursor: not-allowed; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: calc(100vh - 300px); + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md new file mode 100644 index 00000000000000..6aa9fd8f8879b6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md @@ -0,0 +1,55 @@ +--- +id: 61a8fe15a6a31306e60d1e89 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Normalise your page, by setting the `width` to `100%`, and `height` to `100vh`. + +# --hints-- + +You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%'); +``` + +You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + + + +``` + +```css +--fcc-editable-region-- +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md new file mode 100644 index 00000000000000..0dfd8acd66a666 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md @@ -0,0 +1,53 @@ +--- +id: 5d822fd413a79914d39e98c9 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Welcome to the CSS Variables Skyline project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(/html\s*>/gi)); +``` + +Your `DOCTYPE` declaration should be at the beginning of your HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md new file mode 100644 index 00000000000000..3a3b1cce4778ac --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md @@ -0,0 +1,54 @@ +--- +id: 5d822fd413a79914d39e98ca +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code. + +# --hints-- + +Your `DOCTYPE` declaration should be at the beginning of your HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `html` tags should be in the correct order. + +```js +assert(code.match(/\s*<\/html\s*>/)); +``` + +You should only have one `html` element. + +```js +assert(document.querySelectorAll('html').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md new file mode 100644 index 00000000000000..c875ecf77c1fd6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md @@ -0,0 +1,69 @@ +--- +id: 5d822fd413a79914d39e98cb +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Next, add opening and closing `head` and `body` tags within the `html` element. + +# --hints-- + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +The `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head').nextElementSibling.localName === 'body'); +``` + +The `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html').children].some(x => x.localName === 'head')); +``` + +The `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html').children].some(x => x.localName === 'body')); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md new file mode 100644 index 00000000000000..f310a12cb775ba --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md @@ -0,0 +1,100 @@ +--- +id: 5d822fd413a79914d39e98cc +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Add a `title` element to the `head`, and give your project a title of `City Skyline`. Also, nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value of `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. + +# --hints-- + +Your code should have a `title` element. + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +The `title` element should be within the `head` element. + +```js +assert.exists(document.querySelector('head > title')); +``` + +Your project should have a title of `City Skyline`. + +```js +const title = document.querySelector('title'); +assert.equal(title.text.toLowerCase(), 'city skyline') +``` + +Remember, the casing and spelling matters for the title. + +```js +const title = document.querySelector('title'); +assert.equal(title.text, 'City Skyline'); +``` + +Your code should have a `link` element. + +```js +assert.match(code, //i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md new file mode 100644 index 00000000000000..61f822ea8ceefb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md @@ -0,0 +1,55 @@ +--- +id: 5d822fd413a79914d39e98cd +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick I like to use to help visualize where elements are and their size. You will remove this later. + +# --hints-- + +You should use the `*` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +You should use the `border` property to style all the elements. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('border')); +``` + +All elements should have a `1px solid black` border. + +```js +const astStyles = new __helpers.CSSHelp(document).getStyle('*'); +assert.equal(astStyles?.border, '1px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md new file mode 100644 index 00000000000000..371dcf1110f210 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md @@ -0,0 +1,60 @@ +--- +id: 5d822fd413a79914d39e98ce +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements. + +# --hints-- + +You should use the `box-sizing` property. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing')); +``` + +You should make use of the existing `*` selector. + +```js +// Two selectors create two CSSStyleRule objects +assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1); +``` + +All elements should have a `box-sizing` of `border-box`. + +```js +const astStyles = new __helpers.CSSHelp(document).getStyle('*'); +assert.equal(astStyles.boxSizing, 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + + + +``` + +```css +--fcc-editable-region-- +* { + border: 1px solid black; +} + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md new file mode 100644 index 00000000000000..10675b01898693 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md @@ -0,0 +1,68 @@ +--- +id: 5d822fd413a79914d39e98cf +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport. + +# --hints-- + +You should use the `body` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` should have a `height` of `100vh`. + +```js +const bodyStyles = new __helpers.CSSHelp(document).getStyle('body'); +assert.equal(bodyStyles?.height, '100vh'); +``` + +Your `body` should have a `margin` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); +``` + +Your `body` should have the `overflow` property set to `hidden`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md new file mode 100644 index 00000000000000..b33ef81115dfa7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md @@ -0,0 +1,64 @@ +--- +id: 5d822fd413a79914d39e98d0 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +It's tough to see now, but there's a border at the edge of your preview, that's the `body`. Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings. + +# --hints-- + +You should create a `div` element. + +```js +assert.exists(document.querySelector('div')); +``` + +Your `div` element should be within the `body`. + +```js +assert(document.querySelector('div')?.parentElement?.localName === 'body'); +``` + +Your `div` element should have a class of `background-buildings` + +```js +assert([...document.querySelector('div')?.classList]?.includes('background-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md new file mode 100644 index 00000000000000..f70e88dc6587a5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md @@ -0,0 +1,67 @@ +--- +id: 5d822fd413a79914d39e98d1 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Give your background buildings element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`. + +# --hints-- + +You should use the `background-buildings` class to select the correct element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings')); +``` + +Your `.background-buildings` element should have a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%'); +``` + +Your `.background-buildings` element should have a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md new file mode 100644 index 00000000000000..dc9b865a83d76f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md @@ -0,0 +1,82 @@ +--- +id: 5d822fd413a79914d39e98d2 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Nest a `div` with a class of `bb1` in the background buildings container. Open your `styles.css` file, and give `.bb1` a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building. + +# --hints-- + +You should create a new `div` element. + +```js +assert.equal(document.querySelectorAll('div').length, 2); +``` + +You should give the new `div` a class of `bb1`. + +```js +assert.exists(document.querySelector('div.bb1')); +``` + +You should use a `.bb1` class selector to style the element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')); +``` + +You should give the `.bb1` element a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%'); +``` + +You should give the `.bb1` element a `height` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +--fcc-editable-region-- +
+--fcc-editable-region-- + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md new file mode 100644 index 00000000000000..c2e2b83a7f89a6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md @@ -0,0 +1,104 @@ +--- +id: 5d822fd413a79914d39e98d3 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections. + +# --hints-- + +You should create four new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 6); +``` + +You should give one of the new `div` elements a class of `bb1a`. + +```js +assert.exists(document.querySelector('div.bb1a')); +``` + +You should give one of the new `div` elements a class of `bb1b`. + +```js +assert.exists(document.querySelector('div.bb1b')); +``` + +You should give one of the new `div` elements a class of `bb1c`. + +```js +assert.exists(document.querySelector('div.bb1c')); +``` + +You should give one of the new `div` elements a class of `bb1d`. + +```js +assert.exists(document.querySelector('div.bb1d')); +``` + +You should place the new `div` elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d')); +``` + +You should place the new `div` elements within the `.bb1` element. + +```js +assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md new file mode 100644 index 00000000000000..de7293e6b27ece --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md @@ -0,0 +1,137 @@ +--- +id: 5d822fd413a79914d39e98d4 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container. + +# --hints-- + +You should use a class selector to style `.bb1a`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')); +``` + +You should give `.bb1a` a `width` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%'); +``` + +You should give `.bb1a` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%'); +``` + +You should use a class selector to style `.bb1b`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')); +``` + +You should give `.bb1b` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%'); +``` + +You should give `.bb1b` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%'); +``` + +You should use a class selector to style `.bb1c`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')); +``` + +You should give `.bb1c` a `width` of `90%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%'); +``` + +You should give `.bb1c` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%'); +``` + +You should use a class selector to style `.bb1d`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')); +``` + +You should give `.bb1d` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%'); +``` + +You should give `.bb1d` a `height` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md new file mode 100644 index 00000000000000..20c34309017622 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md @@ -0,0 +1,111 @@ +--- +id: 5d822fd413a79914d39e98d5 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Give your `.bb1` element these style properties: `display: flex;`, `flex-direction: column;`, and `align-items: center;`. This will center the parts of the building using "flex" or "flexbox". You will learn about it in more detail on another project. + +# --hints-- + +You should not change the `.bb1` `width` or `height` properties. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.width, '10%'); +assert.equal(bb1Style?.height, '70%'); +``` + +You should give the `.bb1` element a `display` of `flex`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.display, 'flex'); +``` + +You should give the `.bb1` element a `flex-direction` of `column`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.flexDirection, 'column'); +``` + +You should give the `.bb1` element a `align-items` of `center`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.alignItems, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} + +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md new file mode 100644 index 00000000000000..73e7b1e587d289 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md @@ -0,0 +1,102 @@ +--- +id: 5d822fd413a79914d39e98d6 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Now you have something that is starting to resemble a building. Let's get into your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the `.bb1` class, create a variable named `--building-color1` and give it a value of `#999`. + +# --hints-- + +You should create a new variable named `--building-color1`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1')); +``` + +You should define the `--building-color1` variable within `.bb1`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); +``` + +You should give `--building-color1` a value of `#999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} + +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md new file mode 100644 index 00000000000000..bf07db2deab0bd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md @@ -0,0 +1,97 @@ +--- +id: 5d822fd413a79914d39e98d7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Add your variable as the value of the `background-color` property of the `.bb1a` class. Whatever value you gave the variable will be applied to whatever property you use it on. In this case, your variable has the value of `#999`. So `#999` will be used as the value for the `background-color` property. + +# --hints-- + +The `background-color` of the `bb1a` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor.trim(), 'var(--building-color1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #999; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} +--fcc-editable-region-- +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md new file mode 100644 index 00000000000000..5ef9b78353c018 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md @@ -0,0 +1,123 @@ +--- +id: 5d822fd413a79914d39e98d8 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building. + +# --hints-- + +The `background-color` of the `bb1b` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor.trim(), 'var(--building-color1)'); +``` + +The `background-color` of the `bb1c` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor.trim(), 'var(--building-color1)'); +``` + +The `background-color` of the `bb1d` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor.trim(), 'var(--building-color1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #999; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md new file mode 100644 index 00000000000000..84c2a2384fbdc7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md @@ -0,0 +1,98 @@ +--- +id: 5d822fd413a79914d39e98d9 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +I don't really like that color. Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable. + +# --hints-- + +You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +--fcc-editable-region-- + --building-color1: #999; +--fcc-editable-region-- +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md new file mode 100644 index 00000000000000..812e3458953c01 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md @@ -0,0 +1,132 @@ +--- +id: 5d822fd413a79914d39e98da +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Your first building looks pretty good now. Let's make some more! Nest three new `div` elements in the `background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background. + +# --hints-- + +You should create a `div` with a class of `bb2`. + +```js +assert.exists(document.querySelector('div.bb2')); +``` + +You should create a `div` with a class of `bb3`. + +```js +assert.exists(document.querySelector('div.bb3')); +``` + +You should create a `div` with a class of `bb4`. + +```js +assert.exists(document.querySelector('div.bb4')); +``` + +You should create 3 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 9); +``` + +You should place these `div` elements within the `.background-buildings` element. + +```js +assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4); +``` + +You should place the elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md new file mode 100644 index 00000000000000..fcaaf5c77cf39d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md @@ -0,0 +1,132 @@ +--- +id: 5d822fd413a79914d39e98db +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive. + +# --hints-- + +You should give `.bb2` a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%'); +``` + +You should give `.bb2` a `height` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%'); +``` + +You should give `.bb3` a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%'); +``` + +You should give `.bb3` a `height` of `55%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%'); +``` + +You should give `.bb4` a `width` of `11%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%'); +``` + +You should give `.bb4` a `height` of `58%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md new file mode 100644 index 00000000000000..6cf5ab76d2b8f8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md @@ -0,0 +1,126 @@ +--- +id: 5d822fd413a79914d39e98dc +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +The buildings are stacked on top of each other and running off the screen. Let's fix that. Add the properties `display: flex;`, `align-items: flex-end;`, and `justify-content: space-evenly;` to the `background-buildings` class. This will use flexbox again to evenly space the buildings across the bottom of the element. + +# --hints-- + +You should add a `display` of `flex` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex'); +``` + +You should add an `align-items` of `flex-end` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end'); +``` + +You should add a `justify-content` of `space-evenly` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md new file mode 100644 index 00000000000000..4576a529b40e81 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md @@ -0,0 +1,141 @@ +--- +id: 5d822fd413a79914d39e98dd +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +I don't like how spaced out the buildings are. Squeeze them together by adding two empty `div` elements to the top of the `background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center. + +# --hints-- + +You should add two new `div` elements before the `.bb1` element. + +```js +const bBuildings = document.querySelector('.background-buildings')?.children; +assert(![...bBuildings?.[0]?.classList]?.includes('bb1')); +assert(![...bBuildings?.[1]?.classList]?.includes('bb1')); +``` + +You should add one new `div` element between the `.bb3` and `.bb4` element. + +```js +assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling); +``` + +You should add two new `div` elements after the `.bb4` element. + +```js +const bb4 = document.querySelector('.bb4'); +assert.exists(bb4?.nextElementSibling); +assert.exists(bb4?.nextElementSibling?.nextElementSibling); +``` + +You should add 5 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 14); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md new file mode 100644 index 00000000000000..9301ed8f9a3cef --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md @@ -0,0 +1,139 @@ +--- +id: 5d822fd413a79914d39e98de +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Create a new variable below the other one called `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`. + +# --hints-- + +You should define a new property variable called `--building-color2`. + +```js +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2')); +``` + +You should give `--building-color2` a value of `#66cc99`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99'); +``` + +You should set the `background-color` of `.bb2`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor); +``` + +You should set the `background-color` using the `--building-color2` variable. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md new file mode 100644 index 00000000000000..7aadac56f07001 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md @@ -0,0 +1,123 @@ +--- +id: 5d822fd413a79914d39e98df +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Hmm, I'm not sure why that didn't work. You can add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`. + +# --hints-- + +You should add a fallback value of `green` to the `background-color` property. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2, green)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; + --building-color2: #66cc99; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md new file mode 100644 index 00000000000000..a3b2cdcc43cb8c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md @@ -0,0 +1,141 @@ +--- +id: 5d822fd413a79914d39e98e0 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Create a new variable below the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`. + +# --hints-- + +You should define a new property variable called `--building-color3`. + +```js +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3')); +``` + +You should give `--building-color3` a value of `#cc6699`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); +``` + +You should set the `background-color` of `.bb3`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor); +``` + +You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3, pink)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; + --building-color2: #66cc99; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2, green); +} + +.bb3 { + width: 10%; + height: 55%; +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md new file mode 100644 index 00000000000000..37db333f206c86 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md @@ -0,0 +1,154 @@ +--- +id: 5d822fd413a79914d39e98e1 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +That one used the fallback value as well? I see the problem now! The variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there. + +# --hints-- + +You should declare a `:root` selector at the top of the stylesheet. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root')); +``` + +You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff'); +``` + +You should define `--building-color2` with a value of `#66cc99` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99'); +``` + +You should define `--building-color3` with a value of `#cc6699` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); +``` + +You should remove the custom property variables from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2')); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2, green); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3, pink); +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md new file mode 100644 index 00000000000000..7fdf4d2af74202 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md @@ -0,0 +1,134 @@ +--- +id: 5d822fd413a79914d39e98e2 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now. + +# --hints-- + +You should remove the fallback in the `background-color` from `.bb2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor, 'var(--building-color2)'); +``` + +You should remove the fallback in the `background-color` from `.bb3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2, green); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3, pink); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md new file mode 100644 index 00000000000000..9c1e53d79ad5b6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md @@ -0,0 +1,137 @@ +--- +id: 5d822fd413a79914d39e98e3 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building. + +# --hints-- + +You should define a new property variable called `--building-color4`. + +```js +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4')); +``` + +You should give `--building-color4` a value of `#538cc6` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md new file mode 100644 index 00000000000000..ed5a7a7d195020 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md @@ -0,0 +1,146 @@ +--- +id: 5d822fd413a79914d39e98e4 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +The background buildings are starting to look pretty good. Create a new `div` below the `background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings. + +# --hints-- + +You should create a new `div` element. + +```js +assert.equal(document.querySelectorAll('div')?.length, 15); +``` + +The new `div` should come after the `div.background-buildings` element. + +```js +assert.exists(document.querySelector('div.background-buildings + div')); +``` + +Your new `div` should have a class of `foreground-buildings`. + +```js +assert.exists(document.querySelector('div.foreground-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md new file mode 100644 index 00000000000000..b745a8657b0262 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md @@ -0,0 +1,160 @@ +--- +id: 5d822fd413a79914d39e98e5 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +You want the foreground buildings container to sit directly on top of the background buildings element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner. + +# --hints-- + +You should use a `.foreground-buildings` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +You should give the `.foreground-buildings` element a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%'); +``` + +You should give the `.foreground-buildings` element a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%'); +``` + +You should give the `.foreground-buildings` element a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute'); +``` + +You should give the `.foreground-buildings` element a `top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md new file mode 100644 index 00000000000000..847b50f0840bee --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md @@ -0,0 +1,191 @@ +--- +id: 5d822fd413a79914d39e98e6 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground. + +# --hints-- + +You should create a new `div` with a class of `fb1`. + +```js +assert.exists(document.querySelector('div.fb1')); +``` + +You should create a new `div` with a class of `fb2`. + +```js +assert.exists(document.querySelector('div.fb2')); +``` + +You should create a new `div` with a class of `fb3`. + +```js +assert.exists(document.querySelector('div.fb3')); +``` + +You should create a new `div` with a class of `fb4`. + +```js +assert.exists(document.querySelector('div.fb4')); +``` + +You should create a new `div` with a class of `fb5`. + +```js +assert.exists(document.querySelector('div.fb5')); +``` + +You should create a new `div` with a class of `fb6`. + +```js +assert.exists(document.querySelector('div.fb6')); +``` + +You should place these new `div` elements within the `.foreground-buildings` element. + +```js +assert.exists(document.querySelector('div.foreground-buildings > div.fb1')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb2')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb3')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb4')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb5')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb6')); +``` + +You should place the new `div` elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- + + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md new file mode 100644 index 00000000000000..145f1c7a6150a8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md @@ -0,0 +1,252 @@ +--- +id: 5d822fd413a79914d39e98e7 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`. + +# --hints-- + +You should create a `.fb1` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1')); +``` + +You should give the `.fb1` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%'); +``` + +You should give the `.fb1` selector a `height` of `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%'); +``` + +You should create a `.fb2` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2')); +``` + +You should give the `.fb2` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%'); +``` + +You should give the `.fb2` selector a `height` of `40%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%'); +``` + +You should create a `.fb3` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3')); +``` + +You should give the `.fb3` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%'); +``` + +You should give the `.fb3` selector a `height` of `35%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%'); +``` + +You should create a `.fb4` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4')); +``` + +You should give the `.fb4` selector a `width` of `8%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%'); +``` + +You should give the `.fb4` selector a `height` of `45%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%'); +``` + +You should create a `.fb5` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5')); +``` + +You should give the `.fb5` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%'); +``` + +You should give the `.fb5` selector a `height` of `33%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%'); +``` + +You should create a `.fb6` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6')); +``` + +You should give the `.fb6` selector a `width` of `9%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%'); +``` + +You should give the `.fb6` selector a `height` of `38%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md new file mode 100644 index 00000000000000..9cfdde00c5485a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md @@ -0,0 +1,189 @@ +--- +id: 5d822fd413a79914d39e98e8 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Add the same `display`, `align-items`, and `justify-content` properties and values to `foreground-buildings` that you used on `background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container. + +# --hints-- + +You should give `.foreground-buildings` a `display` property of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex'); +``` + +You should give `.foreground-buildings` an `align-items` property of `flex-end`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end'); +``` + +You should give `.foreground-buildings` a `justify-content` property of `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md new file mode 100644 index 00000000000000..70ba517d4c5f04 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md @@ -0,0 +1,222 @@ +--- +id: 5d822fd413a79914d39e98e9 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +I see some code that can be optimized. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`. + +# --hints-- + +You should not remove the `.foreground-buildings` declaration. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +You should remove the `position` property from `.foreground-buildings`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position); +``` + +You should remove the `top` property from `.foreground-buildings`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top); +``` + +You should add the `position` property of `absolute` to `.background-buildings, foreground-buildings`. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.equal(eitherOr()?.position, 'absolute'); +``` + +You should add the `top` property of `0` to `.background-buildings, foreground-buildings`. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.equal(eitherOr()?.top, '0px'); +``` + +You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.exists(eitherOr()); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md new file mode 100644 index 00000000000000..1d76ccace7c352 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md @@ -0,0 +1,180 @@ +--- +id: 5d822fd413a79914d39e98ea +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore. + +# --hints-- + +You should delete the whole `.foreground-buildings` style declaration. + +```js +assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md new file mode 100644 index 00000000000000..97c69b1e7df4f8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md @@ -0,0 +1,202 @@ +--- +id: 5d822fd413a79914d39e98eb +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`. + +# --hints-- + +You should give `.fb1` a `background-color` using `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.backgroundColor.trim(), 'var(--building-color4)'); +``` + +You should give `.fb2` a `background-color` using `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.backgroundColor, 'var(--building-color3)'); +``` + +You should give `.fb3` a `background-color` using `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.backgroundColor, 'var(--building-color1)'); +``` + +You should give `.fb4` a `background-color` using `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.backgroundColor, 'var(--building-color1)'); +``` + +You should give `.fb5` a `background-color` using `--building-color2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.backgroundColor, 'var(--building-color2)'); +``` + +You should give `.fb6` a `background-color` using `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.backgroundColor, 'var(--building-color3)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md new file mode 100644 index 00000000000000..ceb2f3e1bf2194 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md @@ -0,0 +1,202 @@ +--- +id: 5d822fd413a79914d39e98ec +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`. + +# --hints-- + +You should add two `div` elements as the first children of `.foreground-buildings`. + +```js +const bBuildings = document.querySelector('.background-buildings')?.children; +assert(![...bBuildings?.[0]?.classList]?.includes('fb1')); +assert(![...bBuildings?.[1]?.classList]?.includes('fb1')); +``` + +You should add one `div` element between `.fb2` and `.fb3`. + +```js +assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling); +``` + + +You should add two `div` elements as the last children of `.foreground-buildings`. + +```js +const fb6 = document.querySelector('.fb6'); +assert.exists(fb6?.nextElementSibling); +assert.exists(fb6?.nextElementSibling?.nextElementSibling); +``` + +You should have added 5 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 26); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+--fcc-editable-region-- + + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md new file mode 100644 index 00000000000000..e35ab54c3d16fd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md @@ -0,0 +1,201 @@ +--- +id: 5d822fd413a79914d39e98ed +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings. + +# --hints-- + +You should give `.fb4` a `position` of `relative`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative'); +``` + +You should give `.fb4` a `left` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%'); +``` + +You should give `.fb5` a `position` of `relative`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative'); +``` + +You should give `.fb5` a `right` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md new file mode 100644 index 00000000000000..7ff1f3b563b315 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md @@ -0,0 +1,195 @@ +--- +id: 5d822fd413a79914d39e98ee +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`. + +# --hints-- + +You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector. + +```js +assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code)); +``` + +You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector. + +```js +assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} +--fcc-editable-region-- + + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md new file mode 100644 index 00000000000000..52bb47be7746ed --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md @@ -0,0 +1,196 @@ +--- +id: 5d822fd413a79914d39e98ef +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings. + +# --hints-- + +You should create a new variable in `:root` called `--window-color1`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1')); +``` + +You should give the property variable `--window-color1` a value of `black`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md new file mode 100644 index 00000000000000..98ead5caa6096c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md @@ -0,0 +1,217 @@ +--- +id: 5d822fd413a79914d39e98f0 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this: + +```css +gradient-type( + color1, + color2 +); +``` + +In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a gradient of type `linear-gradient` to the `background` property with `--building-color1` as the first color and `--window-color1` as the second. + +# --hints-- + +You should apply a `background` to `.bb1a`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); +``` + +You should give the `background` a `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient'); +``` + +You should give the `background` a `linear-gradient` starting from `--building-color1`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1'); +``` + +You should give the `background` a `linear-gradient` ending at `--window-color1`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md new file mode 100644 index 00000000000000..cdd19b6b3c07bd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md @@ -0,0 +1,222 @@ +--- +id: 5d822fd413a79914d39e98f1 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +You want to add the same gradient to the next two sections. Instead of doing that, create a new class called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class. + +# --hints-- + +You should create a new class declaration called `bb1-window`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window')); +``` + +You should move the `height` property and value from `.bb1a` to `.bb1-window`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%'); +``` + +You should move the `background` property and value from `.bb1a` to `.bb1-window`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); +``` + +You should not move the `background-color` property from `.bb1a`. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); +``` + +You should not move the `width` property from `.bb1a`. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + + +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md new file mode 100644 index 00000000000000..fbbc1116eb48ae --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md @@ -0,0 +1,236 @@ +--- +id: 5d822fd413a79914d39e98f2 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them. + +# --hints-- + +You should not remove the `bb1a` class. + +```js +assert.exists(document.querySelector('div.bb1a')); +``` + +You should add the `bb1-window` class to the `.bb1a` element. + +```js +assert.exists(document.querySelector('div.bb1a.bb1-window')); +``` + +You should not remove the `bb1b` class. + +```js +assert.exists(document.querySelector('div.bb1b')); +``` + +You should add the `bb1-window` class to the `.bb1b` element. + +```js +assert.exists(document.querySelector('div.bb1b.bb1-window')); +``` + +You should not remove the `bb1c` class. + +```js +assert.exists(document.querySelector('div.bb1c')); +``` + +You should add the `bb1-window` class to the `.bb1c` element. + +```js +assert.exists(document.querySelector('div.bb1c.bb1-window')); +``` + +You should not change the `.bb1d` element. + +```js +assert.exists(document.querySelector('div.bb1d')); +assert.notExists(document.querySelector('div.bb1d.bb1-window')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md new file mode 100644 index 00000000000000..fbeb142da1fd80 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md @@ -0,0 +1,221 @@ +--- +id: 5d822fd413a79914d39e98f3 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them. + +# --hints-- + +You should remove the `background-color` from `.bb1a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); +``` + +You should remove the `height` property from `.bb1b`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height); +``` + +You should remove the `background-color` property from `.bb1b`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor); +``` + +You should remove the `height` property from `.bb1c`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height); +``` + +You should remove the `background-color` property from `.bb1c`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md new file mode 100644 index 00000000000000..f14c7ad682f2d7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md @@ -0,0 +1,226 @@ +--- +id: 5d822fd413a79914d39e98f4 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Gradients can use as many colors as you want like this: + +```css +gradient-type( + color1, + color2, + color3 +); +``` + +Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property. + +# --hints-- + +You should use the `background` on `.bb1d`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background); +``` + +You should give the `background` property a `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient'); +``` + +You should use `orange` as the first color in the `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange'); +``` + +You should use `--building-color1` as the second color in the `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)'); +``` + +You should use `--window-color1` as the third color in the `linear-gradient`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md new file mode 100644 index 00000000000000..0e92d01f849cac --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md @@ -0,0 +1,197 @@ +--- +id: 5d822fd413a79914d39e98f5 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`. + +# --hints-- + +You should remove the `background-color` property and value from `.bb1d` + +```js +assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); + background: linear-gradient( + orange, + var(--building-color1), + var(--window-color1) + ); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md new file mode 100644 index 00000000000000..39c25a4bc8a8bb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md @@ -0,0 +1,206 @@ +--- +id: 5d822fd413a79914d39e98f6 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +You can specify where you want a gradient transition to complete by adding it to the color like this: + +```css +gradient-type( + color1, + color2 20%, + color3 +); +``` + +Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action. + +# --hints-- + +You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + orange, + var(--building-color1), + var(--window-color1) + ); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md new file mode 100644 index 00000000000000..96667201651ab3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md @@ -0,0 +1,202 @@ +--- +id: 5d822fd413a79914d39e98f7 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half. + +# --hints-- + +You should remove `orange` from the `linear-gradient`. + +```js +assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange'); +``` + +You should change the now first `linear-gradient` color to transition at `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + orange, + var(--building-color1) 80%, + var(--window-color1) + ); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md new file mode 100644 index 00000000000000..582f8bdce84df6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md @@ -0,0 +1,209 @@ +--- +id: 5d822fd413a79914d39e98f8 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building. + +# --hints-- + +You should add two `div` elements to `.bb2`. + +```js +assert.equal(document.querySelector('div.bb2')?.children?.length, 2); +``` + +You should give the first `div` a class of `bb2a`. + +```js +assert.exists(document.querySelector('div.bb2a')); +``` + +You should give the second `div` a class of `bb2b`. + +```js +assert.exists(document.querySelector('div.bb2b')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md new file mode 100644 index 00000000000000..c6e3351ee8515f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md @@ -0,0 +1,206 @@ +--- +id: 5d822fd413a79914d39e98f9 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later. + +# --hints-- + +You should give `.bb2b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%'); +``` + +You should give `.bb2b` a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md new file mode 100644 index 00000000000000..390701f88f1218 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md @@ -0,0 +1,210 @@ +--- +id: 5d822fd413a79914d39e98fa +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building. + +# --hints-- + +You should create a new property variable called `window-color2` within `:root`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2')); +``` + +You should give `window-color2` a value of `#8cd9b3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb2b { + width: 100%; + height: 100%; +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md new file mode 100644 index 00000000000000..9391bc089451be --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md @@ -0,0 +1,239 @@ +--- +id: 5d822fd413a79914d39e98fb +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +You can make an instant color change in a gradient by giving the transition zero space like this: + +```css +gradient-type( + color1, + color1 50%, + color2 50%, + color2 +); +``` + +Here, the top half of the element will be `color1` and the bottom half will be `color2`. Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`. + +# --hints-- + +You should give `.bb2b` a `background` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background); +``` + +You should use a `linear-gradient` on the `background`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient"); +``` + +You should use `--building-color2` from `0%` to `6%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/); +``` + +You should use `--window-color2` from `6%` to `9%`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%"); +``` + +`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md new file mode 100644 index 00000000000000..fb4e8d59698326 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md @@ -0,0 +1,210 @@ +--- +id: 5d822fd413a79914d39e98fc +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them. + +# --hints-- + +You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md new file mode 100644 index 00000000000000..4631d5a45e1376 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md @@ -0,0 +1,208 @@ +--- +id: 5d822fd413a79914d39e98fd +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore. + +# --hints-- + +You should remove the `background-color` from `.bb2`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( +var(--building-color1) 50%, +var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( +var(--building-color1), +var(--window-color1) + ); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 6%, +var(--window-color2) 6%, +var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md new file mode 100644 index 00000000000000..137054187c1e85 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md @@ -0,0 +1,259 @@ +--- +id: 5d822fd413a79914d39e98fe +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Add these properties to `.bb2a`: + +```css +margin: auto; +width: 5vw; +height: 5vw; +border-top: 1vw solid #000; +border-bottom: 1vw solid #000; +border-left: 1vw solid #999; +border-right: 1vw solid #999; +``` + +After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building. + +# --hints-- + +You should give `.bb2a` a `margin` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto"); +``` + +You should give `.bb2a` a `width` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw"); +``` + +You should give `.bb2a` a `height` of `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw"); +``` + +You should give `.bb2a` a `border-top` of `1vw solid #000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)"); +``` + +You should give `.bb2a` a `border-bottom` of `1vw solid #000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)"); +``` + +You should give `.bb2a` a `border-left` of `1vw solid #999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)"); +``` + +You should give `.bb2a` a `border-right` of `1vw solid #999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md new file mode 100644 index 00000000000000..c9e76533500320 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md @@ -0,0 +1,237 @@ +--- +id: 5d822fd413a79914d39e98ff +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle. + +# --hints-- + +You should remove the `width` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width); +``` + +You should remove the `height` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height); +``` + +You should change the `border-left` to use `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)"); +``` + +You should change the `border-right` to use `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + width: 5vw; + height: 5vw; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 1vw solid #999; + border-right: 1vw solid #999; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md new file mode 100644 index 00000000000000..abaa08286489f9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e9900 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible. + +# --hints-- + +You should change the `border-left` to use `transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent"); +``` + +You should change the `border-right` to use `transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 5vw solid #999; + border-right: 5vw solid #999; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md new file mode 100644 index 00000000000000..9bfd7cbb1f25f2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e9901 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building. + +# --hints-- + +You should remove the `margin` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin); +``` + +You should remove the `border-top` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md new file mode 100644 index 00000000000000..f0b6b1a21fc729 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md @@ -0,0 +1,226 @@ +--- +id: 5d822fd413a79914d39e9902 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end. + +# --hints-- + +You should change `border-bottom` to use `5vh`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh"); +``` + +You should change `border-bottom` to use `--building-color2`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)"); +``` + +`border-bottom` should be `5vh solid var(--building-color2)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + border-bottom: 1vw solid #000; + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md new file mode 100644 index 00000000000000..fd43c824d5eefb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md @@ -0,0 +1,222 @@ +--- +id: 5d822fd413a79914d39e9903 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings. + +# --hints-- + +You should define a new property variable `--window-color3`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3")); +``` + +You should give `--window-color3` a value of `#d98cb3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md new file mode 100644 index 00000000000000..eccd9df6bc20fb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md @@ -0,0 +1,244 @@ +--- +id: 5d822fd413a79914d39e9904 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this: + +```css +gradient-type( + direction, + color1, + color2 +); +``` + +Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`. + +# --hints-- + +You should give `.bb3` a `background` using `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient"); +``` + +You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should use `--building-color3` for the first two colors. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)"); +``` + +You should use `--window-color3` at `15%` for the third color. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md new file mode 100644 index 00000000000000..68c77916cbd5d7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md @@ -0,0 +1,222 @@ +--- +id: 5d822fd413a79914d39e9905 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now. + +# --hints-- + +You should remove the `background-color` from `.bb3`. + +```js +assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md new file mode 100644 index 00000000000000..8286c34ee7e3b8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md @@ -0,0 +1,248 @@ +--- +id: 5d822fd413a79914d39e9906 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order. + +# --hints-- + +You should add three `div` elements within `.bb4`. + +```js +assert.equal(document.querySelector("div.bb4")?.children?.length, 3); +``` + +You should give the first new `div` a class of `bb4a`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should give the second new `div` a class of `bb4b`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should give the third new `div` a class of `bb4c`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`. + +```js +assert.exists(document.querySelector("div.bb4a + div.bb4b")); +assert.exists(document.querySelector("div.bb4b + div.bb4c")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md new file mode 100644 index 00000000000000..807624c9390cd0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md @@ -0,0 +1,257 @@ +--- +id: 5d822fd413a79914d39e9907 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`. + +# --hints-- + +You should give `.bb4a` a `width` of `3%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%"); +``` + +You should give `.bb4a` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%"); +``` + +You should give `.bb4b` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%"); +``` + +You should give `.bb4b` a `height` of `5%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%"); +``` + +You should give `.bb4c` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%"); +``` + +You should give `.bb4c` a `height` of `85%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md new file mode 100644 index 00000000000000..44cf923948da6f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md @@ -0,0 +1,257 @@ +--- +id: 5d822fd413a79914d39e9908 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled. + +# --hints-- + +You should remove the `background-color` from `.bb4`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor); +``` + +You should give `.bb4a` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +You should give `.bb4b` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +You should give `.bb4c` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.bb4a { + width: 3%; + height: 10%; +} + +.bb4b { + width: 80%; + height: 5%; +} + +.bb4c { + width: 100%; + height: 85%; +} +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md new file mode 100644 index 00000000000000..cba0b04b489186 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md @@ -0,0 +1,244 @@ +--- +id: 5d822fd413a79914d39e9909 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding. + +# --hints-- + +You should create a new class declaration called `building-wrap`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md new file mode 100644 index 00000000000000..17f5af788fa0bc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md @@ -0,0 +1,276 @@ +--- +id: 5d822fd413a79914d39e990a +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class. + +# --hints-- + +You should remove `display` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display); +``` + +You should move `display` with a value of `flex` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex"); +``` + +You should remove `flex-direction` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection); +``` + +You should move `flex-direction` with a value of `column` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column"); +``` + +You should remove `align-items` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems); +``` + +You should move `align-items` with a value of `center` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} +--fcc-editable-region-- +.building-wrap { + +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md new file mode 100644 index 00000000000000..d597b01a1dfff0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md @@ -0,0 +1,253 @@ +--- +id: 5d822fd413a79914d39e990b +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it. + +# --hints-- + +You should add `building-wrap` to the `.bb1` element. + +```js +assert.exists(document.querySelector("div.bb1.building-wrap")); +``` + +You should add `building-wrap` to the `.bb4` element. + +```js +assert.exists(document.querySelector("div.bb4.building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md new file mode 100644 index 00000000000000..66e190e6f7cfef --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md @@ -0,0 +1,252 @@ +--- +id: 5d822fd413a79914d39e990c +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building. + +# --hints-- + +You should define a new property variable `--window-color4`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4")); +``` + +You should give `--window-color4` a value of `#8cb3d9`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md new file mode 100644 index 00000000000000..272ca45d2fbabd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md @@ -0,0 +1,254 @@ +--- +id: 5d822fd413a79914d39e990d +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building. + +# --hints-- + +You should add four `div` elements to `.bb4c`. + +```js +assert.equal(document.querySelector(".bb4c")?.children?.length, 4); +``` + +You should give each new `div` a class of `bb4-window`. + +```js +assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md new file mode 100644 index 00000000000000..76b1a0291f4a45 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md @@ -0,0 +1,264 @@ +--- +id: 5d822fd413a79914d39e990e +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`. + +# --hints-- + +You should give `.bb4-window` a `width` of `18%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%"); +``` + +You should give `.bb4-window` a `height` of `90%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%"); +``` + +You should give `.bb4-window` a `background-color` of `--window-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md new file mode 100644 index 00000000000000..baa01d29bf4e01 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md @@ -0,0 +1,285 @@ +--- +id: 5d822fd413a79914d39e990f +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `.window-wrap`, and add these properties to it: + +```css +display: flex; +align-items: center; +justify-content: space-evenly; +``` + +This will be used in a few places to center window elements vertically, and evenly space them in their parent. + +# --hints-- + +You should create a `.window-wrap` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap")); +``` + +You should give `.window-wrap` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex"); +``` + +You should give `.window-wrap` an `align-items` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center"); +``` + +You should give `.window-wrap` a `justify-content` of `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md new file mode 100644 index 00000000000000..c626722b945d9a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md @@ -0,0 +1,265 @@ +--- +id: 5d822fd413a79914d39e9910 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Add the new `window-wrap` class to the `.bb4c` element. + +# --hints-- + +You should add a class of `window-wrap` to `.bb4c`. + +```js +assert.exists(document.querySelector("div.bb4c.window-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md new file mode 100644 index 00000000000000..b8581bcc1f9c1c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md @@ -0,0 +1,290 @@ +--- +id: 5d822fd413a79914d39e9911 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order. + +# --hints-- + +You should add three `div` elements within `.fb1`. + +```js +assert.equal(document.querySelector("div.fb1")?.children?.length, 3); +``` + +You should give the first new `div` a class of `fb1a`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1a")); +``` + +You should give the second new `div` a class of `fbab`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1b")); +``` + +You should give the third new `div` a class of `fb1c`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1c")); +``` + +You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`. + +```js +assert.exists(document.querySelector("div.fb1a + div.fb1b")); +assert.exists(document.querySelector("div.fb1b + div.fb1c")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md new file mode 100644 index 00000000000000..e7afc1537e1dde --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md @@ -0,0 +1,286 @@ +--- +id: 5d822fd413a79914d39e9912 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`. + +# --hints-- + +You should give `.fb1b` a `width` of `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%"); +``` + +You should give `.fb1b` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%"); +``` + +You should give `.fb1c` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%"); +``` + +You should give `.fb1c` a `height` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md new file mode 100644 index 00000000000000..42b504404de85c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md @@ -0,0 +1,279 @@ +--- +id: 5d822fd413a79914d39e9913 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Add the `building-wrap` class to the `.fb1` element to center the sections. + +# --hints-- + +You should add the class `building-wrap` to `.fb1`. + +```js +assert.exists(document.querySelector("div.fb1.building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb1b { + width: 60%; + height: 10%; +} + +.fb1c { + width: 100%; + height: 80%; +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md new file mode 100644 index 00000000000000..3b0f5f4e714c08 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md @@ -0,0 +1,283 @@ +--- +id: 5d822fd413a79914d39e9914 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Move the `background-color` property and value from `.fb1` to `.fb1b`. + +# --hints-- + +You should remove `background-color` from `.fb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor); +``` + +You should add a `background-color` of `--building-color4` to `.fb1b`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb1b { + width: 60%; + height: 10%; +} +--fcc-editable-region-- +.fb1c { + width: 100%; + height: 80%; +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md new file mode 100644 index 00000000000000..6f6e8680c647db --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md @@ -0,0 +1,390 @@ +--- +id: 5d822fd413a79914d39e9915 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +You don't need the `background-color` for this building anymore so you can remove that property. + +# --hints-- + +You should remove the `background-color` of `.fb5`. + +```js +assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md new file mode 100644 index 00000000000000..f0e6e9ae11fa01 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md @@ -0,0 +1,296 @@ +--- +id: 5d822fd413a79914d39e9916 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building. + +Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`. + +# --hints-- + +You should give `.fb1c` a `background` with a `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient"); +``` + +You should use a direction of `90deg`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should use a first color of `--building-color4` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%/); +``` + +You should use a second color of `transparent` from `10%` to `15%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb1c { + width: 100%; + height: 80%; +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md new file mode 100644 index 00000000000000..02f797b2c0730a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md @@ -0,0 +1,306 @@ +--- +id: 5d822fd413a79914d39e9917 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +You can add multiple gradients to an element by separating them with a comma (`,`) like this: + +```css +gradient1( + colors +), +gradient2( + colors +); +``` + +Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last. + +# --hints-- + +You should not alter the first `repeating-linear-gradient`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); +``` + +You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color4\)(0%)?,var\(--building-color4\)10%/); +``` + +You should use a second color of `--window-color4` from `10%` to `90%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var\(--building-color4\)(0%)?,var\(--building-color4\)10%,var\(--window-color4\)10%,var\(--window-color4\)90%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ) +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md new file mode 100644 index 00000000000000..63033c5ee3ed9f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md @@ -0,0 +1,297 @@ +--- +id: 5d822fd413a79914d39e9918 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements. + +# --hints-- + +You should give `.fb1a` a `border-bottom`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom); +``` + +You should use a `border-bottom` of `7vh solid var(--building-color4)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md new file mode 100644 index 00000000000000..101708de331e34 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md @@ -0,0 +1,300 @@ +--- +id: 5d822fd413a79914d39e9919 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide. + +# --hints-- + +You should give `.fb1a` a `border-left` of `2vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent"); +``` + +You should give `.fb1a` a `border-right` of `2vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} +--fcc-editable-region-- +.fb1a { + border-bottom: 7vh solid var(--building-color4); +} +--fcc-editable-region-- +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md new file mode 100644 index 00000000000000..db9240b7d73da1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md @@ -0,0 +1,311 @@ +--- +id: 5d822fd413a79914d39e991a +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order. + +# --hints-- + +You should add two `div` elements within `.fb2`. + +```js +assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2); +``` + +You should give the first new `div` a class of `fb2a`. + +```js +assert.exists(document.querySelector("div.fb2 > div.fb2a")); +assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild); +``` + +You should give the second new `div` a class of `fb2b`. + +```js +assert.exists(document.querySelector("div.fb2 > div.fb2b")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md new file mode 100644 index 00000000000000..34494469f9cef8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md @@ -0,0 +1,313 @@ +--- +id: 5d822fd413a79914d39e991b +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`. + +# --hints-- + +You should give `.fb2a` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%"); +``` + +You should give `.fb2b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%"); +``` + +You should give `.fb2b` a `height` of `75%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md new file mode 100644 index 00000000000000..dcc46fbb9b5ccc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md @@ -0,0 +1,316 @@ +--- +id: 5d822fd413a79914d39e991c +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building. + +# --hints-- + +You should add three `div` elements within `.fb2b`. + +```js +assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3); +``` + +You should give the three new `div` elements each a class of `fb2-window`. + +```js +assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md new file mode 100644 index 00000000000000..b00a8254b6c9e4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md @@ -0,0 +1,314 @@ +--- +id: 5d822fd413a79914d39e991d +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add your `window-wrap` class to `.fb2b` to position the new window elements. + +# --hints-- + +You should add the class `window-wrap` to `.fb2b`. + +```js +assert.exists(document.querySelector("div.fb2b.window-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md new file mode 100644 index 00000000000000..9562b457e5ef01 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md @@ -0,0 +1,325 @@ +--- +id: 5d822fd413a79914d39e991e +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable. + +# --hints-- + +You should give the `.fb2-window` elements a `width` of `22%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%"); +``` + +You should give the `.fb2-window` elements a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%"); +``` + +You should give the `.fb2-window` elements a `background-color` of `--window-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md new file mode 100644 index 00000000000000..1221ea0aac6717 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md @@ -0,0 +1,323 @@ +--- +id: 5d822fd413a79914d39e991f +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container. + +# --hints-- + +You should remove the `background-color` property from `.fb2`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor); +``` + +You should give `.fb2b` a `background-color` of `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} +--fcc-editable-region-- +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md new file mode 100644 index 00000000000000..e7dd5c9df32820 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md @@ -0,0 +1,329 @@ +--- +id: 5d822fd413a79914d39e9920 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape. + +# --hints-- + +You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)"); +``` + +You should give `.fb2a` a `border-left` of `1vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent"); +``` + +You should give `.fb2a` a `border-right` of `1vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} +--fcc-editable-region-- +.fb2a { + width: 100%; +} +--fcc-editable-region-- +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md new file mode 100644 index 00000000000000..bdc153301e067f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md @@ -0,0 +1,347 @@ +--- +id: 5d822fd413a79914d39e9921 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two. + +# --hints-- + +You should add four `div` elements within `.fb3`. + +```js +assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4); +``` + +You should give the first new `div` a class of `fb3a`. + +```js +assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a")); +``` + +You should give the second new `div` a class of `fb3b`. + +```js +assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b")); +``` + +You should give the third new `div` a class of `fb3a`. + +```js +assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a")); +``` + +You should give the fourth new `div` a class of `fb3b`. + +```js +assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md new file mode 100644 index 00000000000000..dab7f724b02976 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md @@ -0,0 +1,346 @@ +--- +id: 5d822fd413a79914d39e9922 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`. + +# --hints-- + +You should give `.fb3a` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%"); +``` + +You should give `.fb3a` a `height` of `15%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%"); +``` + +You should give `.fb3b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%"); +``` + +You should give `.fb3b` a `height` of `35%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md new file mode 100644 index 00000000000000..50adb775f0fede --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md @@ -0,0 +1,347 @@ +--- +id: 5d822fd413a79914d39e9923 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`. + +# --hints-- + +You should remove the `background-color` from `.fb3`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor); +``` + +You should give `.fb3a` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +You should give `.fb3b` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} +--fcc-editable-region-- +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3a { + width: 80%; + height: 15%; +} + +.fb3b { + width: 100%; + height: 35%; +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md new file mode 100644 index 00000000000000..cad73994a3a36d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md @@ -0,0 +1,339 @@ +--- +id: 5d822fd413a79914d39e9924 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Add your `building-wrap` class to the `.fb3` element to center the sections. + +# --hints-- + +You should add the class `building-wrap` to `.fb3`. + +```js +assert.exists(document.querySelector("div.fb3.building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md new file mode 100644 index 00000000000000..5ebfebedb61586 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md @@ -0,0 +1,345 @@ +--- +id: 5d822fd413a79914d39e9925 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section. + +# --hints-- + +You should add three `div` elements within the first `.fb3a` element. + +```js +assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3); +``` + +You should give each new `div` a class of `fb3-window`. + +```js +assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md new file mode 100644 index 00000000000000..7f537a47e7977e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md @@ -0,0 +1,354 @@ +--- +id: 5d822fd413a79914d39e9926 +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value. + +# --hints-- + +You should give `.fb3-window` a `width` of `25%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%"); +``` + +You should give `.fb3-window` a `height` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%"); +``` + +You should give `.fb3-window` a `background-color` of `--window-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md new file mode 100644 index 00000000000000..a61c57920a528c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md @@ -0,0 +1,349 @@ +--- +id: 5d822fd413a79914d39e9927 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Add your `window-wrap` class to the `.fb3a` element to center and space the windows. + +# --hints-- + +You should give `.fb3a` a class of `window-wrap`. + +```js +assert.exists(document.querySelector("div.fb3a.window-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md new file mode 100644 index 00000000000000..10a3aaa8e833a6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md @@ -0,0 +1,348 @@ +--- +id: 5d822fd413a79914d39e9928 +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +I'm not thrilled about that black for the windows anymore. Change the `--window-color1` value to `#bb99ff`. + +# --hints-- + +You should change the value of `--window-color1` to `#bb99ff`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md new file mode 100644 index 00000000000000..20b6addc7ab87c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md @@ -0,0 +1,361 @@ +--- +id: 5d822fd413a79914d39e9929 +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Only three more building to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now. + +# --hints-- + +You should add two `div` elements within `.fb4`. + +```js +assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2); +``` + +You should give the first new `div` a class of `fb4a`. + +```js +assert.exists(document.querySelector("div.fb4a")); +``` + +You should give the second new `div` a class of `fb4b`. + +```js +assert.exists(document.querySelector("div.fb4b")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md new file mode 100644 index 00000000000000..9b8e675c09b595 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md @@ -0,0 +1,358 @@ +--- +id: 5d822fd413a79914d39e992a +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Give `.fb4b` a `width` of `100%` and `height` of `89%`. + +# --hints-- + +You should give `.fb4b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%"); +``` + +You should give `.fb4b` a `height` of `89%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md new file mode 100644 index 00000000000000..a24546ffcb4fdb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md @@ -0,0 +1,360 @@ +--- +id: 5d822fd413a79914d39e992b +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`. + +# --hints-- + +You should remove the `background-color` from `.fb4`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor); +``` + +You should give `.fb4b` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md new file mode 100644 index 00000000000000..7322a34b12f7a7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md @@ -0,0 +1,363 @@ +--- +id: 5d822fd413a79914d39e992c +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`. + +# --hints-- + +You should add six `div` elements within `.fb4b`. + +```js +assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6); +``` + +You should give each new `div` a class of `fb4-window`. + +```js +assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md new file mode 100644 index 00000000000000..7dcd171ba58b48 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md @@ -0,0 +1,376 @@ +--- +id: 5d822fd413a79914d39e992d +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building. + +# --hints-- + +You should give `.fb4-window` a `width` of `30%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%"); +``` + +You should give `.fb4-window` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%"); +``` + +You should give `.fb4-window` a `border-radius` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md new file mode 100644 index 00000000000000..3b3782f2fb2a81 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md @@ -0,0 +1,373 @@ +--- +id: 5d822fd413a79914d39e992e +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space. + +# --hints-- + +You should give `.fb4-window` a `background-color` of `--window-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)"); +``` + +You should give `.fb4-window` a `margin` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md new file mode 100644 index 00000000000000..e11fbd378e03fd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md @@ -0,0 +1,376 @@ +--- +id: 5d822fd413a79914d39e992f +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Add `display: flex` and `flex-wrap: wrap` to the window container. This will put your windows side by side, and then push them down to a new row when they don't fit. + +# --hints-- + +You should give `.fb4b` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex"); +``` + +You should give `.fb4b` a `flex-wrap` of `wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} +--fcc-editable-region-- +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md new file mode 100644 index 00000000000000..d0eab8320b40d7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md @@ -0,0 +1,380 @@ +--- +id: 5d822fd413a79914d39e9930 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color. + +# --hints-- + +You should give `.fb4a` a `border-top` of `5vh solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent") +``` + +You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)") +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md new file mode 100644 index 00000000000000..4e7bd53afabfa2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md @@ -0,0 +1,403 @@ +--- +id: 5d822fd413a79914d39e9931 +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +You can remove the `background-color` for this building now, since it isn't needed. + +# --hints-- + +You should remove the `background-color` of `.fb6`. + +```js +assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md new file mode 100644 index 00000000000000..b667050f8a6256 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md @@ -0,0 +1,395 @@ +--- +id: 5d822fd413a79914d39e9932 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`. + +# --hints-- + +You should give `.fb5` a `background` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background); +``` + +You should give the `background` a `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient"); +``` + +You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/); +``` + +You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md new file mode 100644 index 00000000000000..ed255b86c889dc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md @@ -0,0 +1,401 @@ +--- +id: 5d822fd413a79914d39e9933 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows. + +# --hints-- + +You should give `.fb5` a second `repeating-linear-gradient` in the `background` property. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/); +``` + +You should give the second `repeating-linear-gradient` a direction of `90deg`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/); +``` + +You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/); +``` + +You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ) +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md new file mode 100644 index 00000000000000..e5553c14d0fbe9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md @@ -0,0 +1,408 @@ +--- +id: 5d822fd413a79914d39e9934 +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`. + +# --hints-- + +You should add a `repeating-linear-gradient` to `.fb6` in the `background` property. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient"); +``` + +You should give the `repeating-linear-gradient` a direction of `90deg`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); +``` + +You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md new file mode 100644 index 00000000000000..378da19f9dab58 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md @@ -0,0 +1,408 @@ +--- +id: 5d822fd413a79914d39e9935 +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors. + +# --hints-- + +You should give `.fb6` a second `repeating-linear-gradient` in the `background` property. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/); +``` + +You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); +``` + +You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ) +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md new file mode 100644 index 00000000000000..271ec401fc8951 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md @@ -0,0 +1,401 @@ +--- +id: 5d822fd413a79914d39e9936 +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together. + +# --hints-- + +You should remove the `border` from the `*` selector. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} +--fcc-editable-region-- +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md new file mode 100644 index 00000000000000..9a2434c4b81d24 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md @@ -0,0 +1,402 @@ +--- +id: 5d822fd413a79914d39e9937 +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline. + +# --hints-- + +You should add a class of `sky` to `.background-buildings`. + +```js +assert.exists(document.querySelector("div.background-buildings.sky")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md new file mode 100644 index 00000000000000..96d32439bf8b0e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md @@ -0,0 +1,420 @@ +--- +id: 5d822fd413a79914d39e9938 +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun. + +# --hints-- + +You should give `.sky` a `radial-gradient` in the `background` property. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient"); +``` + +You should give the `radial-gradient` a first color of `#ffcf33`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/); +``` + +You should give the `radial-gradient` a second color of `#ffff66` at `21%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/); +``` + +You should give the `radial-gradient` a third color of `#bbeeff` at `100%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md new file mode 100644 index 00000000000000..125875e4ae6c4e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md @@ -0,0 +1,409 @@ +--- +id: 5d822fd413a79914d39e9939 +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves. + +# --hints-- + +You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} +--fcc-editable-region-- +.sky { + background: radial-gradient( + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md new file mode 100644 index 00000000000000..994df85a2d53be --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md @@ -0,0 +1,421 @@ +--- +id: 5d822fd413a79914d39e993a +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +A media query can be used to change styles based on certain conditions, and they look like this: + +```css +@media (condition) { + +} +``` + +Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less. + +# --hints-- + +You should add an empty media query with `max-width: 1000px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md new file mode 100644 index 00000000000000..403eec7fbdd196 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md @@ -0,0 +1,423 @@ +--- +id: 5d822fd413a79914d39e993b +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night. + +Note: You are going to need to scroll past the editable region to copy the class. + +# --hints-- + +You should not delete the existing `.sky` declaration. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/); +``` + +You should copy the existing `.sky` declaration into the media query. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- +@media (max-width: 1000px) { + +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md new file mode 100644 index 00000000000000..a34b9b2df8dc0d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md @@ -0,0 +1,436 @@ +--- +id: 5d822fd413a79914d39e993c +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors. + +# --hints-- + +You should change the first color values from `#ffcf33` to `#ccc`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/); +``` + +You should change the second color value from `#ffff66` to `#445`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/); +``` + +You should change the third color value from `#bbeeff` to `#223`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( +closest-corner circle at 15% 15%, +#ffcf33, +#ffcf33 20%, +#ffff66 21%, +#bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( +var(--building-color1) 50%, +var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( +var(--building-color1), +var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 6%, +var(--window-color2) 6%, +var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( +90deg, +var(--building-color3), +var(--building-color3), +var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( +90deg, +var(--building-color4), +var(--building-color4) 10%, +transparent 10%, +transparent 15% + ), + repeating-linear-gradient( +var(--building-color4), +var(--building-color4) 10%, +var(--window-color4) 10%, +var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 5%, +transparent 5%, +transparent 10% + ), + repeating-linear-gradient( +90deg, +var(--building-color2), +var(--building-color2) 12%, +var(--window-color2) 12%, +var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( +90deg, +var(--building-color3), +var(--building-color3) 10%, +transparent 10%, +transparent 30% + ), + repeating-linear-gradient( +var(--building-color3), +var(--building-color3) 10%, +var(--window-color3) 10%, +var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% +); + } +--fcc-editable-region-- +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md new file mode 100644 index 00000000000000..c57e461e3c1ee3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md @@ -0,0 +1,448 @@ +--- +id: 5d822fd413a79914d39e993d +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there. + +# --hints-- + +You should add a `:root` selector to the media query. + +```js +``` + +You should add `--building-color1` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000"); +``` + +You should add `--building-color2` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000"); +``` + +You should add `--building-color3` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000"); +``` + +You should add `--building-color4` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md new file mode 100644 index 00000000000000..26af98e9ba92ce --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md @@ -0,0 +1,860 @@ +--- +id: 5d822fd413a79914d39e993e +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night. + +Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great! + +# --hints-- + +You should add `--window-color1` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777"); +``` + +You should add `--window-color2` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777"); +``` + +You should add `--window-color3` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777"); +``` + +You should add `--window-color4` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + :root { + --building-color1: #000; + --building-color2: #000; + --building-color3: #000; + --building-color4: #000; + } +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` + +# --solutions-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { + :root { + --building-color1: #000; + --building-color2: #000; + --building-color3: #000; + --building-color4: #000; + --window-color1: #777; + --window-color2: #777; + --window-color3: #777; + --window-color4: #777; + } + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md new file mode 100644 index 00000000000000..647df97ff4df5e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md @@ -0,0 +1,60 @@ +--- +id: 5dc17d3bf86c76b9248c6eb4 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Paragraph (`p`) elements are used to create paragraph text on websites. + +Create a paragraph (`p`) element below your `h2` element, and give it the text `Click here to view more cat photos.` + +# --hints-- + +Your `p` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('p')); +``` + +Your `p` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/p\>/)); +``` + +Your `p` element's text should be `Click here to view more cat photos.` You have either omitted the text or have a typo. + +```js +const extraSpacesRemoved = document + .querySelector('p') + .innerText.replace(/\s+/g, ' '); +assert(extraSpacesRemoved.match(/click here to view more cat photos\.?$/i)); +``` + +Your `p` element should be below the `h2` element. You have them in the wrong order. + +```js +const collection = [...document.querySelectorAll('h2,p')].map( + (node) => node.nodeName +); +assert(collection.indexOf('H2') < collection.indexOf('P')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+--fcc-editable-region-- +

Cat Photos

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md new file mode 100644 index 00000000000000..99eb22d5be7ad6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md @@ -0,0 +1,68 @@ +--- +id: 5dc17dc8f86c76b9248c6eb5 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Commenting allows you to leave messages without affecting the browser display. It also allows you to make code inactive. A comment in HTML starts with ``. For example, the comment `` contains the text `TODO: Remove h1`. + +Add a comment above the `p` element with the text `TODO: Add link to cat photos`. + +# --hints-- + +Your comment should start with ``. You are missing one or more of the characters that define the end of a comment. + +```js +assert(code.match(/-->/)); +``` + +Your code should not have extra opening/closing comment characters. You have an extra `` displaying in the browser. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(//g).length < 2); +``` + +Your comment should contain the text `TODO: Add link to cat photos`. + +```js +assert(code.match(//i)); +``` + +Your comment should be above the `p` element. You have them in the wrong order. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /

clickheretoviewmorecatphotos\.?<\/p>/i + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+

Cat Photos

+--fcc-editable-region-- +

Click here to view more cat photos.

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md new file mode 100644 index 00000000000000..78b9d0247b3956 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md @@ -0,0 +1,73 @@ +--- +id: 5dc2385ff86c76b9248c6eb7 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +HTML5 has some elements that identify different content areas. These elements make your HTML easier to read and help with Search Engine Optimization (SEO) and accessibility. + +Identify the main section of this page by adding a `
` opening tag after the `h1` element, and a `
` closing tag after the `p` element. + +# --hints-- + +Your `main` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('main')); +``` + +Your `main` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/main\>/)); +``` + +Your `main` element's opening tag should be below the `h1` element. You have them in the wrong order. + +```js +const collection = [...document.querySelectorAll('main,h1')].map( + (node) => node.nodeName +); +assert(collection.indexOf('H1') < collection.indexOf('MAIN')); +``` + +Your `main` element's opening tag should be above the `h2` element. You have them in the wrong order. + +```js +const collection = [...document.querySelectorAll('main,h2')].map( + (node) => node.nodeName +); +assert(collection.indexOf('MAIN') < collection.indexOf('H2')); +``` + +Your `main` element's closing tag should be below the `p` element. You have them in the wrong order. + +```js +const mainNode = document.querySelector('main'); +const pNode = document.querySelector('p'); +assert( + mainNode.contains(pNode) && + pNode.textContent.toLowerCase().match(/click here to view more cat photos/) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- +

CatPhotoApp

+

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md new file mode 100644 index 00000000000000..89ea069bbbfdd6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md @@ -0,0 +1,95 @@ +--- +id: 5dc23991f86c76b9248c6eb8 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +HTML elements are often nested within other HTML elements. In the previous step you nested the `h2` element, comment and `p` element within the `main` element. A nested element is a child of its parent element. + +To make HTML easier to read, indent the `h2` element, the comment, and `p` element exactly two spaces to indicate they are children of the `main` element. + +# --hints-- + +Your code should have an `h2` element with text `Cat Photos`. You may have accidentally deleted it, it is missing both opening and closing tags, or the text has changed. + +```js +assert( + document.querySelector('h2') && + code.match(/<\/h2\>/) && + document.querySelector('h2').innerText.toLowerCase() === 'cat photos' +); +``` + +Your `h2` element should be below the `main` element's opening tag and its opening tag should start 6 spaces over from the start of the line. + +```js +assert(code.toLowerCase().match(/\n\s{6}

/)); +``` + +Your code should have a comment. You removed the comment from an earlier step. + +```js +assert(code.match(//)); +``` + +The comment's text should be `TODO: Add link to cat photos`. Do not change the text or spacing of the comment. + +```js +assert(code.match(//i)); +``` + +Your comment should be below the `h2` element and start 6 spaces over from the start of the line. + +```js +assert( + code + .toLowerCase() + .match(/<\/h2>\n\s{6}/) +); +``` + +Your code should have a `p` element. You have removed the `p` element from an earlier step. + +```js +assert(document.querySelector('p')); +``` + +The text of the `p` element should be `Click here to view more cat photos.` Do not change the text, spacing, or punctuation of the `p` element. + +```js +assert( + document + .querySelector('p') + .innerText.toLowerCase() + .match(/click\s+here\s+to\s+view\s+more\s+cat\s+photos\.?$/) +); +``` + +Your `p` element should be below the comment and its opening tag should start 6 spaces over from the start of the line. + +```js +assert(code.toLowerCase().match(/-->\n\s{6}

/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+--fcc-editable-region-- +

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md new file mode 100644 index 00000000000000..3cb407eeb2d77e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md @@ -0,0 +1,61 @@ +--- +id: 5dc23f9bf86c76b9248c6eba +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +You can add images to your website by using the `img` element. `img` elements have an opening tag without a closing tag. A tag for an element without a closing tag is known as a self-closing tag. + +Add an `img` element below the `p` element. At this point, no image will show up in the browser. + +# --hints-- + +Your `img` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('img')); +``` + +Your `img` element should not have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(!code.match(/<\/img\>/)); +``` + +You should only have one `img` element. Remove any extras. + +```js +assert(document.querySelectorAll('img').length === 1); +``` + +Your `img` element should be below the `p` element. You have them in the wrong order. + +```js +const collection = [...document.querySelectorAll('p,img')].map( + (node) => node.nodeName +); +assert(collection.indexOf('P') < collection.indexOf('IMG')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

+ +--fcc-editable-region-- +

Click here to view more cat photos.

+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md new file mode 100644 index 00000000000000..a18ee569b81dd7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md @@ -0,0 +1,59 @@ +--- +id: 5dc24073f86c76b9248c6ebb +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +HTML attributes are special words used inside the opening tag of an element to control the element's behavior. The `src` attribute in an `img` element specifies the image's URL (where the image is located). An example of an `img` element using an `src` attribute: ``. + +Add an `src` attribute to the existing `img` element that is set to the following URL: `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. + +# --hints-- + +Your code should have an `img` element. You may have removed the `img` element or you have not surrounded the `src` attribute's value with quotes. + +```js +assert(document.querySelector('img')); +``` + +Your `img` element should have an `src` attribute. You have either omitted the attribute or have a typo. Make sure there is a space between the element name and the attribute name. + +```js +assert(document.querySelector('img').src); +``` + +Your `img` element's `src` attribute should be set to '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. You have either omitted the URL or have a typo. The case of the URL is important. + +```js +assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg'); +``` + +Although you have set the `img` element's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\ + +

CatPhotoApp

+
+

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md new file mode 100644 index 00000000000000..1bb383b3664a6d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md @@ -0,0 +1,57 @@ +--- +id: 5dc24165f86c76b9248c6ebc +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +All `img` elements should have an `alt` attribute. The `alt` attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load. For example, `A cat` has an `alt` attribute with the text `A cat`. + +Add an `alt` attribute to the `img` element with the text `A cute orange cat lying on its back`. + +# --hints-- + +Your code should have an `img` element. You removed the `img` element from an earlier step. + +```js +assert(document.querySelector('img')); +``` + +Your `img` element does not have an `alt` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert(document.querySelector('img').hasAttribute('alt')); +``` + +Your `img` element's `alt` attribute value is set to something other than 'A cute orange cat lying on its back'. Make sure the `alt` attribute's value is surrounded with quotation marks. + +```js +const altText = document + .querySelector('img') + .alt.toLowerCase() + .replace(/\s+/g, ' '); +assert(altText.match(/A cute orange cat lying on its back\.?$/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md new file mode 100644 index 00000000000000..06de5480a03674 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md @@ -0,0 +1,79 @@ +--- +id: 5dc24614f86c76b9248c6ebd +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +You can link to another page with the anchor (`a`) element. For example, `` would link to `freecodecamp.org`. + +Add an anchor element after the paragraph that links to `https://freecatphotoapp.com`. At this point, the link won’t show up in the preview. + +# --hints-- + +Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('a')); +``` + +Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/a\>/)); +``` + +Your anchor (`a`) element should be below the `p` element. You have them in the wrong order. + +```js +const collection = [...document.querySelectorAll('a, p')].map( + (node) => node.nodeName +); +assert(collection.indexOf('P') < collection.indexOf('A')); +``` + +Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert(document.querySelector('a').hasAttribute('href')); +``` + +Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo. + +```js +assert( + document.querySelector('a').getAttribute('href') === + 'https://freecatphotoapp.com' +); +``` + +Although you have set the anchor ('a') element's `href` attribute to the correct link, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert( + !/\ + +

CatPhotoApp

+
+

Cat Photos

+ +--fcc-editable-region-- +

Click here to view more cat photos.

+--fcc-editable-region-- + A cute orange cat lying on its back. +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md new file mode 100644 index 00000000000000..6baf208bb6810e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md @@ -0,0 +1,57 @@ +--- +id: 5ddbd81294d8ddc1510a8e56 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +A link's text must be placed between the opening and closing tags of an anchor (`a`) element. For example, `click here to go to freeCodeCamp.org` is a link with the text `click here to go to freeCodeCamp.org`. + +Add the anchor text `cat photos` to the anchor element. This will become the link's text. + +# --hints-- + +Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('a')); +``` + +Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/a\>/)); +``` + +Your anchor (`a`) element's text should be `cat photos`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag. + +```js +assert( + document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') === + 'cat photos' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- + +--fcc-editable-region-- + A cute orange cat lying on its back. +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md new file mode 100644 index 00000000000000..cb1ac93f448cb4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md @@ -0,0 +1,66 @@ +--- +id: 5dfa22d1b521be39a3de7be0 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Turn the words `cat photos` located inside `p` element into a link by replacing the words with the anchor element added previously. The `p` element should show the same text in the browser, but the words `cat photos` should now be a link. There should only be one link showing in the app. + +# --hints-- + +Your code should only contain one anchor (`a`) element. Remove any extra anchor elements. + +```js +assert(document.querySelectorAll('a').length === 1); +``` + +Your anchor (`a`) element should be nested within the `p` element. + +```js +assert($('p > a').length); +``` + +The link's text should be `cat photos`. You have either omitted the text or have a typo. + +```js +const nestedAnchor = $('p > a')[0]; +assert( + nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com' && + nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos' +); +``` + +After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `Click here to view more cat photos.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element. + +```js +const pText = document + .querySelector('p') + .innerText.toLowerCase() + .replace(/\s+/g, ' '); +assert(pText.match(/click here to view more cat photos\.?$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

+ +--fcc-editable-region-- +

Click here to view more cat photos.

+ cat photos +--fcc-editable-region-- + A cute orange cat lying on its back. +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md new file mode 100644 index 00000000000000..790143c56d59f6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md @@ -0,0 +1,55 @@ +--- +id: 5dfa2407b521be39a3de7be1 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Add a `target` attribute with the value `_blank` to the anchor (`a`) element's opening tag, so that the link opens in a new tab. + +# --hints-- + +Your `p` element should have a nested anchor (`a`) element with the text `cat photos`. You may have deleted it or have a typo. + +```js +const anchor = $('p > a'); +assert( + anchor.length && + anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos' +); +``` + +Your anchor (`a`) element does not have a `target` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert(document.querySelector('a').hasAttribute('target')); +``` + +The value of the `target` attribute should be `_blank`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert(document.querySelector('a').getAttribute('target') === '_blank'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

+ +--fcc-editable-region-- +

Click here to view more cat photos.

+--fcc-editable-region-- + A cute orange cat lying on its back. +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md new file mode 100644 index 00000000000000..82836e6ce431b4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md @@ -0,0 +1,88 @@ +--- +id: 5dfa30b9eacea3f48c6300ad +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value. + +# --hints-- + +You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it. + +```js +assert( + document.querySelector('img') && + document.querySelector('img').getAttribute('src') === + 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg' +); +``` + +Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('a').length >= 2); +``` + +You should only add one opening anchor (`a`) tag. Please remove any extras. + +```js +assert(document.querySelectorAll('a').length === 2); +``` + +Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/a>/g).length >= 2); +``` + +You should only add one closing anchor (`a`) tag. Please remove any extras. + +```js +assert(code.match(/<\/a>/g).length === 2); +``` + +Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert(document.querySelector('a').hasAttribute('href')); +``` + +Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo. + +```js +assert( + document.querySelectorAll('a')[1].getAttribute('href') === + 'https://freecatphotoapp.com' +); +``` + +Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element. + +```js +assert(document.querySelector('img').parentNode.nodeName === 'A'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- + A cute orange cat lying on its back. +--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md new file mode 100644 index 00000000000000..523a531a919af0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md @@ -0,0 +1,75 @@ +--- +id: 5dfa3589eacea3f48c6300ae +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Within the second `section` element, add a new `h2` element with the text `Cat Lists`. + +# --hints-- + +Your `section` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert( + document.querySelectorAll('section').length === 2 && + code.match(/<\/section>/g).length === 2 +); +``` + +Your `h2` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('h2').length === 2); +``` + +Your `h2` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/h2\>/g).length === 2); +``` + +Your second `h2` element should be right above the second `section` element's closing tag. It is not in the correct position. + +```js +const secondSection = document.querySelectorAll('section')[1]; +assert(secondSection.lastElementChild.nodeName === 'H2'); +``` + +The second `h2` element should have the text `Cat Lists`. You have either omitted the text or have a typo. + +```js +assert( + document + .querySelectorAll('main > section')[1] + .lastElementChild.innerText.toLowerCase() === 'cat lists' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md new file mode 100644 index 00000000000000..d9ed45aaf35391 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md @@ -0,0 +1,82 @@ +--- +id: 5dfa371beacea3f48c6300af +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +When you add a lower rank heading element to the page, it's implied that you're starting a new subsection. + +After the last `h2` element of the second `section` element, add an `h3` element with the text `Things cats love:`. + +# --hints-- + +The second `section` element appears to be missing or does not have both an opening and closing tag. + +```js +assert( + document.querySelectorAll('main > section')[1] && + code.match(/\<\/section>/g).length == 2 +); +``` + +There should be an `h3` element right above the second `section` element's closing tag. + +```js +assert( + document.querySelectorAll('main > section')[1].lastElementChild.nodeName === + 'H3' +); +``` + +The `h3` element right above the second `section` element's closing tag should have the text `Things cats love:`. Make sure to include the colon at the end of the text. + +```js +assert( + document + .querySelectorAll('main > section')[1] + .lastElementChild.innerText.toLowerCase() + .replace(/\s+/g, ' ') === 'things cats love:' +); +``` + +There should be an `h2` element with the text `Cat Lists` above the last `h3` element that is nested in the last `section` element'. You may have accidentally deleted the `h2` element. + +```js +const secondSectionLastElemNode = document.querySelectorAll('main > section')[1] + .lastElementChild; +assert( + secondSectionLastElemNode.nodeName === 'H3' && + secondSectionLastElemNode.previousElementSibling.innerText + .toLowerCase() + .replace(/\s+/g, ' ') === 'cat lists' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- +
+

Cat Lists

+
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md new file mode 100644 index 00000000000000..67b3b9d484cabe --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md @@ -0,0 +1,58 @@ +--- +id: 5dfa37b9eacea3f48c6300b0 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +After the `h3` element with the `Things cats love:` text, add an unordered list (`ul`) element. Note that nothing will be displayed at this point. + +# --hints-- + +Your `ul` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('ul')); +``` + +Your `ul` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/ul>/)); +``` + +The `ul` element should be above the second `section` element's closing tag. + +```js +const secondSectionLastElemNode = $('main > section')[1].lastElementChild; +assert(secondSectionLastElemNode.nodeName === 'UL'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+--fcc-editable-region-- +

Cat Lists

+

Things cats love:

+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md new file mode 100644 index 00000000000000..e358b8169351eb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md @@ -0,0 +1,77 @@ +--- +id: 5dfb5ecbeacea3f48c6300b1 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Use list item (`li`) elements to create items in a list. Here is an example of list items in an unordered list: + +```html +
    +
  • milk
    • +
  • cheese
    • +
+``` + +Nest three list items within the `ul` element to display three things cats love: `cat nip`, `laser pointers` and `lasagna`. + +# --hints-- + +You should have three `li` elements. Each `li` element should have its own opening and closing tag. + +```js +assert($('li').length === 3 && code.match(/<\/li\>/g).length === 3); +``` + +You should have three `li` elements with the text `cat nip`, `laser pointers` and `lasagna` in any order. You have either omitted some text or have a typo. + +```js +assert.deepStrictEqual( + [...document.querySelectorAll('li')] + .map((item) => item.innerText.toLowerCase()) + .sort((a, b) => a.localeCompare(b)), + ['cat nip', 'lasagna', 'laser pointers'] +); +``` + +The three `li` elements should be located between the `ul` element's opening and closing tags. + +```js +assert( + [...document.querySelectorAll('li')].filter( + (item) => item.parentNode.nodeName === 'UL' + ).length === 3 +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+--fcc-editable-region-- +
    +
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md new file mode 100644 index 00000000000000..c437e321c0d362 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md @@ -0,0 +1,88 @@ +--- +id: 5dfb6250eacea3f48c6300b2 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +After the unordered list, add a new image with an `src` attribute value set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg` and an `alt` attribute value set to `A slice of lasagna on a plate.` + +# --hints-- + +There should be an `img` element right after the closing `` tag. + +```js +assert($('section')[1].lastElementChild.nodeName === 'IMG'); +``` + +The new image does not have an `alt` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('section')[1].lastElementChild.hasAttribute('alt')); +``` + +The new image should have an `alt` value of `A slice of lasagna on a plate.` Make sure the `alt` attribute's value is surrounded with quotation marks. + +```js +assert( + $('section')[1] + .lastElementChild.getAttribute('alt') + .replace(/\s+/g, ' ') + .match(/^A slice of lasagna on a plate\.?$/i) +); +``` + +The new image does not have an `src` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('section')[1].lastElementChild.hasAttribute('src')); +``` + +The new image should have an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`. Make sure the `src` attribute's value is surrounded with quotation marks. + +```js +assert( + $('section')[1].lastElementChild.getAttribute('src') === + 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' +); +``` + +Although you have set the new image's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\ + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+--fcc-editable-region-- +
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md new file mode 100644 index 00000000000000..788633df18e99a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md @@ -0,0 +1,76 @@ +--- +id: 5dfb655eeacea3f48c6300b3 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +The `figure` element represents self-contained content and will allow you to associate an image with a caption. + +Nest the image you just added within a `figure` element. + +# --hints-- + +Your `figure` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('figure')); +``` + +Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figure\>/)); +``` + +There should be an `figure` element right above the second `section` element's closing tag. + +```js +assert($('section')[1].lastElementChild.nodeName === 'FIGURE'); +``` + +The lasagna `img` element should be nested in the `figure` element. + +```js +assert( + document.querySelector('figure > img') && + document.querySelector('figure > img').getAttribute('src').toLowerCase() === + 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+--fcc-editable-region-- + A slice of lasagna on a plate. +--fcc-editable-region-- +
+
+ + + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md new file mode 100644 index 00000000000000..50dbab186887a2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md @@ -0,0 +1,106 @@ +--- +id: 5dfb6a35eacea3f48c6300b4 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +A figure caption (`figcaption`) element is used to add a caption to describe the image contained within the `figure` element. For example, `
A cute cat
` adds the caption `A cute cat`. + +After the image nested in the `figure` element, add a `figcaption` element with the text `Cats love lasagna.` + +# --hints-- + +The Lasagna `img` element should be nested in the `figure` element. + +```js +assert( + document.querySelector('figure > img') && + document.querySelector('figure > img').getAttribute('src').toLowerCase() === + 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' +); +``` + +Your `figcaption` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('figcaption')); +``` + +Your `figcaption` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figcaption\>/)); +``` + +The `figcaption` element should be nested in the `figure` element. + +```js +assert( + document.querySelector('figure > figcaption') && + document.querySelector('figure > figcaption') +); +``` + +The lasagna `img` element should be nested in the `figure` element. + +```js +assert( + document.querySelector('figure > img') && + document.querySelector('figure > img').getAttribute('src').toLowerCase() === + 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' +); +``` + +The `figcaption` element nested in the `figure` element should be below the `img` element. You have them in the wrong order. + +```js +assert( + document.querySelector('figcaption').previousElementSibling.nodeName === 'IMG' +); +``` + +Your `figcaption` element's text should be `Cats love lasagna.` You have either omitted the text or have a typo. + +```js +assert( + document.querySelector('figcaption').innerText.match(/Cats love lasagna.?$/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+--fcc-editable-region-- +
+ A slice of lasagna on a plate. +
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md new file mode 100644 index 00000000000000..4d11acf545ef66 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md @@ -0,0 +1,85 @@ +--- +id: 5ef9b03c81a63668521804d0 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Emphasize the word `love` in the `figcaption` element by wrapping it in an emphasis (`em`) element. + +# --hints-- + +Your emphasis (`em`) element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('em')); +``` + +Your emphasis (`em`) element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/em\>/)); +``` + +You have either deleted the `figcaption` element or it is missing an opening or closing tag. + +```js +assert(document.querySelector('figcaption') && code.match(/<\/figcaption\>/)); +``` + +Your emphasis (`em`) element should surround the text `love`. You have either omitted the text or have a typo. + +```js +assert( + document.querySelector('figcaption > em').innerText.toLowerCase() === 'love' +); +``` + +The `figcaption`'s text should be `Cats love lasagna`. Check for typos and that the necessary spaces are present around the `em` element's opening and closing tags. + +```js +assert( + document + .querySelector('figcaption') + .innerText.replace(/\s+/gi, ' ') + .match(/cats love lasagna\.?/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +--fcc-editable-region-- +
Cats love lasagna.
+--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md new file mode 100644 index 00000000000000..8929c59be37d05 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md @@ -0,0 +1,79 @@ +--- +id: 5ef9b03c81a63668521804d1 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +After the `figure` element, add another `h3` element with the text `Top 3 things cats hate:`. + +# --hints-- + +There should be an `h3` element right above the second `section` element's closing tag. Make sure it has an opening and closing tag. + +```js +assert( + document.querySelectorAll('main > section')[1].lastElementChild.nodeName === + 'H3' && code.match(/<\/h3\>/g).length === 2 +); +``` + +The new `h3` element should have the text `Top 3 things cats hate:`. Make sure to include the colon at the end of the text. + +```js +assert( + document + .querySelectorAll('main > section')[1] + .lastElementChild.innerText.toLowerCase() + .replace(/\s+/g, ' ') === 'top 3 things cats hate:' +); +``` + +There should be a `figure` above the new `h3` element. You may have accidentally deleted the `figure` element. + +```js +const secondSectionLastElemNode = document.querySelectorAll('main > section')[1] + .lastElementChild; +assert( + secondSectionLastElemNode.nodeName === 'H3' && + secondSectionLastElemNode.previousElementSibling.nodeName === 'FIGURE' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+--fcc-editable-region-- +
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md new file mode 100644 index 00000000000000..66a2b9487458c6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md @@ -0,0 +1,92 @@ +--- +id: 5ef9b03c81a63668521804d2 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The code for an ordered list (`ol`) is similar to an unordered list, but list items in an ordered list are numbered when displayed. + +After the second `section` element's last `h3` element, add an ordered list with these three list items: `flea treatment`, `thunder` and `other cats`. + +# --hints-- + +Your `ol` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('ol')); +``` + +Your `ol` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/ol>/)); +``` + +The `ol` element should be above the second `section` element's closing tag. You have them in the wrong order. + +```js +assert($('main > section')[1].lastElementChild.nodeName === 'OL'); +``` + +The three `li` elements should be nested inside the `ol` element. + +```js +assert( + [...document.querySelectorAll('li')].filter( + (item) => item.parentNode.nodeName === 'OL' + ).length === 3 +); +``` + +You should have three `li` elements with the text `flea treatment`, `thunder` and `other cats` in any order. + +```js +assert.deepStrictEqual( + [...document.querySelectorAll('li')] + .filter((item) => item.parentNode.nodeName === 'OL') + .map((item) => item.innerText.toLowerCase()) + .sort((a, b) => a.localeCompare(b)), + ['flea treatment', 'other cats', 'thunder'] +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+--fcc-editable-region-- +

Top 3 things cats hate:

+--fcc-editable-region-- +
+
+ + + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md new file mode 100644 index 00000000000000..eec907e982bacc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md @@ -0,0 +1,72 @@ +--- +id: 5ef9b03c81a63668521804d3 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +After the ordered list, add another `figure` element. + +# --hints-- + +Your `figure` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('figure').length === 2); +``` + +Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figure>/g).length === 2); +``` + +There should be a `figure` element right above the second `section` element's closing tag. + +```js +assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+--fcc-editable-region-- +
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md new file mode 100644 index 00000000000000..802e8d08f8445a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md @@ -0,0 +1,96 @@ +--- +id: 5ef9b03c81a63668521804d4 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The `strong` element is used to indicate that some text is of strong importance or urgent. + +In the `figcaption` you just added, indicate that `hate` is of strong importance by wrapping it in a `strong` element. + +# --hints-- + +Your `strong` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('strong')); +``` + +Your `strong` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/strong\>/)); +``` + +Your `strong` element should surround the word `hate` in the text `Cats hate other cats.` You have either omitted the text or have a typo. + +```js +assert( + document + .querySelectorAll('figcaption')[1] + .querySelector('strong') + .innerText.toLowerCase() === 'hate' +); +``` + +The `figcaption`'s text should be `Cats hate other cats.` Check for typos and that the necessary spaces are present around the `strong` element's opening and closing tags. + +```js +const secondFigCaption = document.querySelectorAll('figcaption')[1]; +assert( + secondFigCaption && + secondFigCaption.innerText + .replace(/\s+/gi, ' ') + .trim() + .match(/cats hate other cats\.?/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +--fcc-editable-region-- +
Cats hate other cats.
+--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md new file mode 100644 index 00000000000000..bc784d05f757b9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md @@ -0,0 +1,103 @@ +--- +id: 5ef9b03c81a63668521804d5 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Inside the third `section` element add an `h2` element with the text `Cat Form`. + +# --hints-- + +Unable to find the third `section` element. You may have accidentally deleted it or the opening tag or closing tag. + +```js +assert( + document.querySelectorAll('section').length === 3 && + code.match(/<\/section>/g).length === 3 +); +``` + +Your `h2` element should have an opening tag and closing tag. You may be missing one or both of the required tags. + +```js +assert( + document.querySelectorAll('h2').length >= 3 && + code.match(/<\/h2>/g).length >= 3 +); +``` + +You should only add one `h2` element. Please remove any extras. + +```js +assert(document.querySelectorAll('h2').length === 3); +``` + +The new `h2` element should be located right above the third `section` element's closing tag. + +```js +const thirdSection = document.querySelectorAll('section')[2]; +assert(thirdSection.lastElementChild.nodeName === 'H2'); +``` + +Your `h2` element's text should be `Cat Form`. + +```js +const thirdSection = document.querySelectorAll('section')[2]; +assert( + thirdSection + .querySelector('h2') + .innerText.toLowerCase() + .replace(/\s+/g, ' ') === 'cat form' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md new file mode 100644 index 00000000000000..09a6507b83acbc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md @@ -0,0 +1,88 @@ +--- +id: 5ef9b03c81a63668521804d6 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Now you will add a web form to collect information from users. + +After the `Cat Form` heading, add a `form` element. + +# --hints-- + +Your `form` element should have an opening tag and closing tag. You may be missing one or both of the required tags, or have them in the wrong order. + +```js +assert(document.querySelector('form') && code.match(/<\/form>/g)); +``` + +Your `form` element tags are not in the correct order. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.indexOf('
') < noSpaces.indexOf('
')); +``` + +The `form` element nested in the last `section` element should be below the `h2` element. You have the `h2` element and the `form` element in the wrong order. + +```js +assert(document.querySelector('form').previousElementSibling.nodeName === 'H2'); +``` + +The `form` element should have no content. Remove any HTML elements or text between the `form` element's tags. + +```js +assert($('form')[0].innerHTML.trim().length === 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+--fcc-editable-region-- +

Cat Form

+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md new file mode 100644 index 00000000000000..3407548e86772d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md @@ -0,0 +1,116 @@ +--- +id: 5ef9b03c81a63668521804d7 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The `action` attribute indicates where form data should be sent. For example, `
` tells the browser that the form data should be sent to the path `/submit-url`. + +Add an `action` attribute with the value `https://freecatphotoapp.com/submit-cat-photo` to the `form` element. + +# --hints-- + +Your `form` element should have an opening tag and closing tag in the correct order. You may be missing one or both of the required tags, or have them in the wrong order. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert( + document.querySelector('form') && + code.match(/<\/form>/g) && + noSpaces.indexOf('') +); +``` + +Your `form` element nested in the last `section` element should be below the `h2` element. You have the `h2` element and the `form` element in the wrong order. + +```js +assert(document.querySelector('form').previousElementSibling.nodeName === 'H2'); +``` + +Your `form` element should have no content. Remove any HTML elements or text between the `form` element's tags. + +```js +assert($('form')[0].innerHTML.trim().length === 0); +``` + +Your `form` element does not have an `action` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +const form = document.querySelector('form'); +assert(form.hasAttribute('action')); +``` + +Your `form` element should have an `action` attribute with the value `https://freecatphotoapp.com/submit-cat-photo`. + +```js +const form = document.querySelector('form'); +assert( + form + .getAttribute('action') + .match(/^https:\/\/freecatphotoapp\.com\/submit-cat-photo$/) +); +``` + +Although you have set the `action` attribute to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert( + !/\ + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md new file mode 100644 index 00000000000000..f18822dccefac3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md @@ -0,0 +1,109 @@ +--- +id: 5ef9b03c81a63668521804d8 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +The `input` element allows you several ways to collect data from a web form. Like `img` elements, `input` elements are self-closing and do not need closing tags. + +Nest an `input` element in the `form` element. + +# --hints-- + +Your `form` element should have an opening tag and closing tag in the correct order. You may be missing one or both of the required tags, or have them in the wrong order. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert( + document.querySelector('form') && + code.match(/<\/form>/g) && + noSpaces.indexOf('') +); +``` + +Your `form` element's opening tag should only have an `action` attribute. Remove anything else you may have typed in it. + +```js +assert([...document.querySelector('form').attributes].length < 2); +``` + +You should create an input element. Check the syntax. + +```js +assert(document.querySelector('input')); +``` + +Your `input` element should have an opening tag, but not a closing tag. + +```js +assert(document.querySelector('input') && !code.match(/<\/input\>/g)); +``` + +Your `input` element should be nested within the `form` element. + +```js +assert(document.querySelector('form > input')); +``` + +Your `form` should only contain the `input` element. Remove any HTML elements or text between the `form` element's tags. + +```js +assert( + $('form')[0].children.length === 1 && + $('form')[0].innerText.trim().length === 0 +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md new file mode 100644 index 00000000000000..19af12e5118c1b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md @@ -0,0 +1,104 @@ +--- +id: 5ef9b03c81a63668521804d9 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Placeholder text is used to give people a hint about what kind of information to enter into an input. For example, ``. + +Add the placeholder text `cat photo URL` to your `input` element. + +# --hints-- + +You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. + +```js +assert($('input').length); +``` + +Your `form` should only contain the `input` element. Remove any additional HTML elements or text within the `form` element. + +```js +assert( + $('form')[0].children.length === 1 && + $('form')[0].innerText.trim().length === 0 +); +``` + +Your `input` element does not have a `placeholder` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('input')[0].hasAttribute('placeholder')); +``` + +Your `input` element should have a `placeholder` attribute with the value `cat photo URL`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('input')[0] + .getAttribute('placeholder') + .replace(/\s+/g, ' ') + .match(/^cat photo URL$/i) +); +``` + +Although you have set the `input` element's `placeholder` attribute to `cat photo URL`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md new file mode 100644 index 00000000000000..7992ca4515433f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md @@ -0,0 +1,93 @@ +--- +id: 5ef9b03c81a63668521804da +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Use the `button` element to create a clickable button. For example, `` creates a button with the text `Click Here`. + +Add a `button` element with the text `Submit` below the `input` element. The default behavior of clicking a form button without any attributes submits the form to the location specified in the form's `action` attribute. + +# --hints-- + +Your `button` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('button')); +``` + +Your `button` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/button\>/)); +``` + +Your `button` element's text should be `Submit`. You have either omitted the text or have a typo. + +```js +assert(document.querySelector('button').innerText.toLowerCase() === 'submit'); +``` + +Your `button` element should be below the `input` element. You have them in the wrong order. + +```js +const collection = [...document.querySelectorAll('input, button')].map( + (node) => node.nodeName +); +assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md new file mode 100644 index 00000000000000..39cff003e0de56 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md @@ -0,0 +1,91 @@ +--- +id: 5ef9b03c81a63668521804db +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +To prevent a user from submitting your form when required information is missing, you need to add the `required` attribute to an `input` element. There's no need to set a value to the `required` attribute. Instead, just add the word `required` to the `input` element, making sure there is space between it and other attributes. + +# --hints-- + +You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. + +```js +assert($('input').length); +``` + +Your `form` should only contain the `input` element. Remove any additional HTML elements or text within the `form` element. + +```js +assert( + $('form')[0].children.length === 1 && + $('form')[0].innerText.trim().length === 0 +); +``` + +Your `input` element should have a `required` attribute. Remember, you just add the word `required` inside the `input` element's tag. + +```js +assert($('input')[0].hasAttribute('required')); +``` + +A value should not be given to the `required` attribute. + +```js +assert($('input')[0].getAttribute('required') === ''); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md new file mode 100644 index 00000000000000..18539d4809c54d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md @@ -0,0 +1,135 @@ +--- +id: 5ef9b03c81a63668521804dc +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +You can use radio buttons for questions where you want only one answer out of multiple options. + +Here is an example of a radio button with the option of `cat`: ` cat`. Remember that `input` elements are self-closing. + +Before the text input, add a radio button with the option `Indoor`. + +# --hints-- + +You should create an input element for your radio button. Check the syntax. + +```js +assert($('form > input').length >= 2); +``` + +Your `input` element should have an opening tag, but not a closing tag. + +```js +assert($('form > input') && !code.match(/<\/input\>/g)); +``` + +You should only have added one input element for your radio button. Remove any extras. + +```js +assert($('form > input').length === 2); +``` + +Your new `input` element should be above the existing `input` with `type` attribute set to `text`. You have them in the wrong order. + +```js +const existingInputElem = document.querySelector('form > input[type="text"]'); +assert( + existingInputElem && + existingInputElem.previousElementSibling.nodeName === 'INPUT' +); +``` + +Your new `input` element does not have a `type` attribute. Check that there is a space after the opening tag's name. + +```js +assert($('input')[0].hasAttribute('type')); +``` + +Your new `input` element should have a `type` attribute with the value `radio`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('input')[0] + .getAttribute('type') + .match(/^radio$/i) +); +``` + +Although you have set the new `input` element's `type` attribute to `radio`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*input\s+type\s*=\s*radio/i.test(code)); +``` + +The `radio` button's ` Indoor` text should be located after it instead of before it. + +```js +const radioInputElem = $('input')[0]; +assert(!radioInputElem.previousSibling.nodeValue.match(/Indoor/i)); +``` + +The text ` Indoor` should be located directly to the right of your `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. + +```js +const radioInputElem = $('input')[0]; +assert( + radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Indoor/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md new file mode 100644 index 00000000000000..64581e5302ad7a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md @@ -0,0 +1,104 @@ +--- +id: 5ef9b03c81a63668521804dd +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +`label` elements are used to help associate the text for an `input` element with the input element itself (especially for assistive technologies like screen readers). For example, `` makes it so clicking the word `cat` also selects the corresponding radio button. + +Nest your `radio` button inside a `label` element. + +# --hints-- + +You should make sure the radio button is still present. + +```js +assert($('input[type="radio"]')[0]); +``` + +The text ` Indoor` should be located directly to the right of your `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. + +```js +const radioInputElem = $('input')[0]; +assert( + radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Indoor/i) +); +``` + +Your `label` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('label')); +``` + +Your `label` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/label\>/)); +``` + +Your radio button and its text should all be located between the opening and closing tags of the `label` element. + +```js +const labelChildNodes = [...$('form > label')[0].childNodes]; +assert( + labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + Indoor +--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md new file mode 100644 index 00000000000000..ec264414c614e8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md @@ -0,0 +1,98 @@ +--- +id: 5ef9b03c81a63668521804de +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Notice that both radio buttons can be selected at the same time. To make it so selecting one radio button automatically deselects the other, both buttons must have a `name` attribute with the same value. + +Add the `name` attribute with the value `indoor-outdoor` to both radio buttons. + +# --hints-- + +Both radio buttons should still be located between opening and closing `label` element tags. + +```js +const labelChildNodes = [...document.querySelectorAll('form > label')].map( + (node) => node.childNodes +); +assert( + labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') + .length === 2 +); +``` + +Both radio buttons should have a `name` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; +assert(radioButtons.every((btn) => btn.hasAttribute('name'))); +``` + +Both radio buttons should have a `name` attribute with the value `indoor-outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const radioButtons = [...$('input[type="radio"]')]; +assert( + radioButtons.every((btn) => + btn.getAttribute('name').match(/^indoor-outdoor$/) + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + + +--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md new file mode 100644 index 00000000000000..f5bf435abd1205 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md @@ -0,0 +1,89 @@ +--- +id: 5ef9b03c81a63668521804df +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +The `id` attribute is used to identify specific HTML elements. Each `id` attribute's value must be unique from all other `id` values for the entire page. + +Add an `id` attribute with the value `indoor` to the radio button. When elements have multiple attributes, the order of the attributes doesn't matter. + +# --hints-- + +Your radio button should still be located between the opening and closing tags of the `label` element. + +```js +const labelChildNodes = [...$('form > label')[0].childNodes]; +assert( + labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length +); +``` + +Your radio button should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('input')[0].hasAttribute('id')); +``` + +Your radio element should have an `id` attribute with the value `indoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert($('input')[0].id.match(/^indoor$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md new file mode 100644 index 00000000000000..adab4f31bb2fc5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md @@ -0,0 +1,100 @@ +--- +id: 5ef9b03c81a63668521804e1 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +The `fieldset` element is used to group related inputs and labels together in a web form. `fieldset` elements are block-level elements, meaning that they appear on a new line. + +Nest the `Indoor` and `Outdoor` radio buttons within a `fieldset` element, and don't forget to indent the radio buttons. + +# --hints-- + +Both radio buttons should still be located between opening and closing `label` element tags. + +```js +const labelChildNodes = [...$('label')].map((node) => [...node.childNodes]); +assert( + labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') + .length === 2 +); +``` + +Your `fieldset` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('fieldset')); +``` + +Your `fieldset` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/fieldset\>/)); +``` + +Both radio button and associated labels should be between the opening and closing tags of the `fieldset` element. + +```js +const radioButtons = [...$('input[type="radio"]')]; +assert( + radioButtons.every((btn) => btn.parentNode.parentNode.nodeName === 'FIELDSET') +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + + +--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md new file mode 100644 index 00000000000000..99ca091cbace4c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md @@ -0,0 +1,128 @@ +--- +id: 5ef9b03c81a63668521804e2 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Forms commonly use checkboxes for questions that may have more than one answer. For example, here's a checkbox with the option of `tacos`: ` tacos`. + +Under the `legend` element you just added, add an `input` with its `type` attribute set to `checkbox` and give it the option of `Loving`. + +# --hints-- + +The `input` element for your checkbox should have an opening tag, but not a closing tag. + +```js +assert($('fieldset > input') && !code.match(/<\/input\>/g)); +``` + +You should only have added one input element for your checkbox. Remove any extras. + +```js +assert($('fieldset > input').length === 1); +``` + +Your new `input` element should be below the `legend` element with the text `What's your cat's personality?`. You have them in the wrong order. + +```js +const existingLegendElem = $('fieldset > legend')[1]; +assert( + existingLegendElem && + existingLegendElem.nextElementSibling.nodeName === 'INPUT' +); +``` + +Your new `input` element does not have a `type` attribute. Check that there is a space after the opening tag's name. + +```js +assert($('fieldset > input')[0].hasAttribute('type')); +``` + +Your new `input` element should have a `type` attribute with the value `checkbox`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('fieldset > input')[0] + .getAttribute('type') + .match(/^checkbox$/i) +); +``` + +Although you have set the new `input` element's `type` attribute to `checkbox`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*input\s+type\s*=\s*checkbox/i.test(code)); +``` + +The text ` Loving` should be located directly to the right of your checkbox. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. + +```js +const checkboxInputElem = $('input[type="checkbox"]')[0]; +assert( + checkboxInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Loving/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+--fcc-editable-region-- + What's your cat's personality? +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md new file mode 100644 index 00000000000000..32afe5dd1a2c37 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md @@ -0,0 +1,122 @@ +--- +id: 5ef9b03c81a63668521804e3 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Add another checkbox after the one you just added. The `id` attribute value should be `lazy` and the `name` attribute value should be the same as the last checkbox. + +Also add a `label` element to the right of the new checkbox with the text `Lazy`. Make sure to associate the `label` element with the new checkbox using the `for` attribute. + +# --hints-- + +You need to add a new checkbox. + +```js +assert($('input[type="checkbox"]').length === 2); +``` + +Your new checkbox should have an `id` attribute with the value `lazy` and a `name` attribute with the value `personality`. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +const checkboxes = [...$('input[type="checkbox"]')]; +assert( + checkboxes.some( + (checkbox) => + checkbox.id === 'lazy' && checkbox.getAttribute('name') === 'personality' + ) +); +``` + +Your new checkbox should be after the first one. You have them in the wrong order. + +```js +const checkboxes = [...$('input[type="checkbox"]')].map( + (checkbox) => checkbox.id +); +assert(checkboxes.indexOf('loving') < checkboxes.indexOf('lazy')); +``` + +On the right side of your new checkbox, there should be `label` element with the text `Lazy`. + +```js +const nextElementSibling = $('input[type="checkbox"]')[1].nextElementSibling; +assert( + nextElementSibling.nodeName === 'LABEL' && + nextElementSibling.innerText.replace(/\s+/g, '').match(/^Lazy$/i) +); +``` + +The new `label` should have a `for` attribute with the same value as the `id` attribute of the new checkbox. You have either omitted the value or have a typo. + +```js +assert( + $('input[type="checkbox"]')[1].nextElementSibling.getAttribute('for') === + 'lazy' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? +--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md new file mode 100644 index 00000000000000..6ecff52e877f41 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md @@ -0,0 +1,117 @@ +--- +id: 5ef9b03c81a63668521804e5 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +In order to make a checkbox checked or radio button selected by default, you need to add the `checked` attribute to it. There's no need to set a value to the `checked` attribute. Instead, just add the word `checked` to the `input` element, making sure there is space between it and other attributes. + +Make the first radio button and the first checkbox selected by default. + +# --hints-- + +Make sure there still are two radio buttons and three checkboxes nested in their respective `fieldset` elements. + +```js +assert( + $('input[type="radio"]').length === 2 && + $('fieldset > input[type="checkbox"]').length === 3 +); +``` + +The first radio button is missing the `checked` attribute. + +```js +assert($('input[type="radio"]')[0].hasAttribute('checked')); +``` + +The second radio button should not have the `checked` attribute. + +```js +assert(!$('input[type="radio"]')[1].hasAttribute('checked')); +``` + +The first checkbox is missing the `checked` attribute. + +```js +assert($('input[type="checkbox"]')[0].hasAttribute('checked')); +``` + +The second checkbox should not have the `checked` attribute. + +```js +assert(!$('input[type="checkbox"]')[1].hasAttribute('checked')); +``` + +The third checkbox should not have the `checked` attribute. + +```js +assert(!$('input[type="checkbox"]')[2].hasAttribute('checked')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- +
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md new file mode 100644 index 00000000000000..9ef05985470894 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md @@ -0,0 +1,102 @@ +--- +id: 5ef9b03c81a63668521804e7 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Now you will add a footer section to the page. + +After the `main` element, add a `footer` element. + +# --hints-- + +You have either deleted the `main` element or it is missing an opening tag or closing tag. + +```js +assert(document.querySelector('main') && code.match(/<\/main>/)); +``` + +Your `footer` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('footer')); +``` + +Your `footer` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/footer\>/)); +``` + +Your `footer` element should be below the closing `main` element tag. You have put it somewhere else. + +```js +assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+--fcc-editable-region-- +
+ + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md new file mode 100644 index 00000000000000..d764e0affe0fb0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md @@ -0,0 +1,104 @@ +--- +id: 5ef9b03c81a63668521804e8 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Nest a `p` element with the text `No Copyright - freeCodeCamp.org` within the `footer` element. + +# --hints-- + +You have either deleted the `footer` element or it is missing an opening tag or closing tag. + +```js +assert(document.querySelector('footer') && code.match(/<\/footer>/)); +``` + +Your `footer` element should have a `p` element. Make sure to add an opening tag and closing tag for the `p` element. + +```js +assert(document.querySelector('footer > p')); +``` + +Your `footer` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +const pElemClosingTags = code.match(/<\/p\>/g); +assert(pElemClosingTags && pElemClosingTags.length === 2); +``` + +Your `p` element's text should be `No Copyright - freeCodeCamp.org`. You have either omitted the text, have a typo, or it is not between the `p` element's opening and closing tags. + +```js +const extraSpacesRemoved = $('footer > p')[0].innerText.replace(/\s+/g, ' '); +assert(extraSpacesRemoved.match(/No Copyright - freeCodeCamp\.org$/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md new file mode 100644 index 00000000000000..653bd504c6ca49 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md @@ -0,0 +1,118 @@ +--- +id: 5ef9b03c81a63668521804e9 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Make the text `freeCodeCamp.org` into a link by enclosing it in an anchor (`a`) element. The `href` attribute should be set to `https://www.freecodecamp.org`. + +# --hints-- + +Your anchor (`a`) element should be nested within the `footer` element. Make sure to add an opening tag and closing tag for the anchor (`a`) element. + +```js +assert($('footer > p > a').length); +``` + +Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +const aElemClosingTags = code.match(/<\/a\>/g); +assert(aElemClosingTags && aElemClosingTags.length === 3); +``` + +Your anchor (`a`) element should have an `href` attribute with the value `https://www.freecodecamp.org`. You may have omitted the attribute/value, or have a typo. + +```js +const nestedAnchor = $('footer > p > a')[0]; +assert(nestedAnchor.getAttribute('href') === 'https://www.freecodecamp.org'); +``` + +The link's text should be `freeCodeCamp.org`. You have either omitted the text or have a typo. + +```js +const nestedAnchor = $('footer > p > a')[0]; +assert( + nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === + 'freecodecamp.org' +); +``` + +After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `No Copyright - freeCodeCamp.org`. Double check the text, spacing, or punctuation of both the `p` and nested anchor element. + +```js +const pText = $('footer > p')[0].innerText.toLowerCase().replace(/\s+/g, ' '); +assert(pText.match(/^no copyright - freecodecamp.org$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+
+

+--fcc-editable-region-- + No Copyright - freeCodeCamp.org +--fcc-editable-region-- +

+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md new file mode 100644 index 00000000000000..301f781b01305e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md @@ -0,0 +1,108 @@ +--- +id: 5ef9b03c81a63668521804ea +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Notice that everything you've added to the page so far is inside the `body` element. All page content elements that should be rendered to the page go inside the `body` element. However, other important information goes inside the `head` element. + +Add a `head` element just above the `body` element. + +# --hints-- + +You have either deleted the `body` element or it is missing an opening tag or closing tag. + +```js +assert(document.querySelector('body') && code.match(/<\/body>/)); +``` + +Your `head` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(code.match(/\/)); +``` + +Your `head` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/\<\/head\>/)); +``` + +Your `head` element should be above the opening `body` element tag. You have put it somewhere else. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(/\<\/head\>\/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md new file mode 100644 index 00000000000000..812414ab17a022 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md @@ -0,0 +1,110 @@ +--- +id: 5ef9b03c81a63668521804eb +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +The `title` element determines what browsers show in the title bar or tab for the page. + +Add a `title` element within the `head` element. Its text should be `CatPhotoApp`. + +# --hints-- + +You have either deleted the `head` element or it is missing an opening tag or closing tag. + +```js +assert(code.match(/\/) && code.match(/\<\/head\>/)); +``` + +Your `title` element should be nested in the `head` element. Make sure to add an opening tag and closing tag for the `title` element. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(/\\.*\<\/title\>\<\/head\>/)); +``` + +Your `title` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/\<\/title\>/)); +``` + +Your `title` element's text should be `CatPhotoApp`. You have either omitted the text or have a typo. + +```js +assert(document.title && document.title.toLowerCase() === 'catphotoapp'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + + +--fcc-editable-region-- + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md new file mode 100644 index 00000000000000..939eb8e559732f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md @@ -0,0 +1,105 @@ +--- +id: 5ef9b03c81a63668521804ec +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Notice that the entire contents of the page are nested within an `html` element. All other elements must be descendants of this `html` element. + +Add the `lang` attribute with the value `en` to the opening `html` tag to specify that the language of the page is English. + +# --hints-- + +You have either deleted the `html` element or it is missing an opening tag or closing tag. + +```js +assert(code.match(/\/) && code.match(/\<\/html\>/)); +``` + +Your `html` element should have a `lang` attribute with the value `en`. You may have omitted the attribute/value, or have a typo. + +```js +const extraSpacesRemoved = code.replace(/\s+/g, ' '); +assert(extraSpacesRemoved.match(/\/)); +``` + +Although you have set the `html` element's `lang` attribute to `en`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*html\s+lang\s*=en/i.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- + + CatPhotoApp + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md new file mode 100644 index 00000000000000..c34e9e3f3748ec --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md @@ -0,0 +1,166 @@ +--- +id: 5ef9b03c81a63668521804ee +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +All pages should begin with ``. This special string is known as a declaration and ensures the browser tries to meet industry-wide specifications. + +To complete this project, add this declaration as the first line of the code. + +# --hints-- + +Your code should begin with the declaration ``. You may have omitted the declaration, have a typo, or it is not the first line of code. + +```js +assert(code.match(/\<\s*!DOCTYPE\s+html\s*\>/)); +``` + +Your `` must be located at the top of the document. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\ + + CatPhotoApp + +--fcc-editable-region-- + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + + +``` + +# --solutions-- + +```html + + + + CatPhotoApp + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md new file mode 100644 index 00000000000000..c299c5186b8ac4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md @@ -0,0 +1,100 @@ +--- +id: 5efada803cbd2bbdab94e332 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Inside the `figure` element you just added, nest an `img` element with a `src` attribute set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`. + +# --hints-- + +Your second `figure` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('figure').length === 2); +``` + +Your second `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figure>/g).length === 2); +``` + +There should be a second `figure` element right above the second `section` element's closing tag. You have them in the wrong order. + +```js +assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); +``` + +You should have a third `img` element nested in the `figure` element. + +```js +const catsImg = document.querySelectorAll('figure > img')[1]; +assert( + catsImg && + catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' +); +``` + +The third image should have an `src` attribute set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`. + +```js +const catsImg = document.querySelectorAll('figure > img')[1]; +assert( + catsImg && + catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' +); +``` + +Although you have set the new image's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\ + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md new file mode 100644 index 00000000000000..07ab44fc62c2b6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md @@ -0,0 +1,97 @@ +--- +id: 5efae0543cbd2bbdab94e333 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +To improve accessibility of the image you just added, add an `alt` attribute with the text `Five cats looking around a field.` + +# --hints-- + +Your `figure` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('figure').length === 2); +``` + +Your `ol` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figure>/g).length === 2); +``` + +There should be a `figure` element right above the last `section` element's closing tag. + +```js +assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); +``` + +The Cats `img` element should be nested in the `figure` element. + +```js +const catsImg = document.querySelectorAll('figure > img')[1]; +assert( + catsImg && + catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' +); +``` + +The Cats `img` element should have an `alt` attribute with the value `Five cats looking around a field.` + +```js +const catsImg = document.querySelectorAll('figure > img')[1]; +assert( + catsImg + .getAttribute('alt') + .replace(/\s+/g, ' ') + .match(/^Five cats looking around a field\.?$/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md new file mode 100644 index 00000000000000..adc349c99bb091 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md @@ -0,0 +1,123 @@ +--- +id: 5efae16e3cbd2bbdab94e334 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +After the last `img` element, add a `figcaption` element with the text `Cats hate other cats.` + +# --hints-- + +Your `figcaption` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelectorAll('figcaption').length === 2); +``` + +Your `figcaption` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figcaption\>/g).length === 2); +``` + +There should be a `figure` element right above the second `section` element's closing tag. + +```js +assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); +``` + +The last `img` element should be nested in the `figure` element. + +```js +const catsImg = document.querySelectorAll('figure > img')[1]; +assert( + catsImg && + catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' +); +``` + +Your `figure` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelectorAll('figure').length === 2); +``` + +Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figure\>/g).length === 2); +``` + +The `figcaption` element should be nested in the `figure` element. + +```js +assert(document.querySelectorAll('figure > figcaption').length === 2); +``` + +The `figcaption` element nested in the `figure` element should be below the `img` element. You have the `img` element and the `figcaption` element in the wrong order. + +```js +assert( + document.querySelectorAll('figcaption')[1].previousElementSibling.nodeName === + 'IMG' +); +``` + +The `figcaption` element should have the text `Cats hate other cats.` You have omitted a word or have a typo. + +```js +assert( + document + .querySelectorAll('figcaption')[1] + .innerText.toLowerCase() + .match(/Cats hate other cats\.?$/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+--fcc-editable-region-- + Five cats looking around a field. +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md new file mode 100644 index 00000000000000..12b2ae60dc0eb9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md @@ -0,0 +1,104 @@ +--- +id: 5efb23e70dc218d6c85f89b1 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +There are many kinds of inputs you can create using the `type` attribute. You can easily create a password field, reset button, or a control to let users select a file from their computer. + +Create a text field to get text input from a user by adding the `type` attribute with the value `text` to the `input` element. + +# --hints-- + +You have either deleted your `input` element or it has invalid syntax. If you have added attributes, make sure their values are surrounded by quotation marks. + +```js +assert($('input').length); +``` + +Your `form` element should only contain the `input` element. Remove any extra HTML elements or text between the `form` element's tags. + +```js +assert( + $('form')[0].children.length === 1 && + $('form')[0].innerText.trim().length === 0 +); +``` + +Your `input` element does not have a `type` attribute with the value `text`. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('input')[0].hasAttribute('type')); +``` + +Your `input` element should have a `type` attribute with the value `text`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('input')[0] + .getAttribute('type') + .replace(/\s+/g, ' ') + .match(/^text$/i) +); +``` + +Although you have set the `input` element's `type` attribute to the `text`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\ + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md new file mode 100644 index 00000000000000..b40c637d1bff6a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md @@ -0,0 +1,101 @@ +--- +id: 5efb2c990dc218d6c85f89b2 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Even though you added your button below the text input, they appear next to each other on the page. That's because both `input` and `button` elements are inline elements, which don't appear on new lines. + +You learned previously that the button submits the form by default, but you can explicitly add the `type` attribute with the value `submit` to make it clearer. Go ahead and do this to specify where this button should submit the form. + +# --hints-- + +Your `button` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('button')); +``` + +Your `button` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/button\>/)); +``` + +Your `button` element does not have a `type` attribute. Check that there is a space after the opening tag's name. + +```js +assert($('button')[0].hasAttribute('type')); +``` + +Your `button` element should have a `type` attribute with the value `submit`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('button')[0] + .getAttribute('type') + .match(/^submit$/i) +); +``` + +Although you have set the `button` element's `type` attribute to `submit`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+ +--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md new file mode 100644 index 00000000000000..cc6828c3bc6036 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md @@ -0,0 +1,136 @@ +--- +id: 5efc4f528d6a74d05e68af74 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +There's another way to associate an `input` element's text with the element itself. You can nest the text within a `label` element and add a `for` attribute with the same value as the `input` element's `id` attribute. + +Associate the text `Loving` with the checkbox by only nesting the text `Loving` in a `label` element and place it to the right side of the checkbox `input` element. + +# --hints-- + +You should make sure the checkbox is still present. + +```js +assert($('input[type="checkbox"]')[0]); +``` + +Your checkbox should still have an `id` attribute with the value `loving`. You may have removed the attribute or changed its value. + +```js +assert($('input[type="checkbox"]')[0].id === 'loving'); +``` + +The text ` Loving` should no longer be located directly to the right of your checkbox. It should be wrapped in a `label` element. Make sure there is a space between the two elements. + +```js +const checkboxInputElem = $('input[type="checkbox"]')[0]; +assert( + !checkboxInputElem.nextSibling.nodeValue + .replace(/\s+/g, ' ') + .match(/ Loving/i) +); +``` + +You will need to add a new `label` element in which to nest the text `Loving`. Make sure it has both an opening and closing tag. + +```js +assert( + document.querySelectorAll('label').length === 3 && + code.match(/<\/label\>/g).length === 3 +); +``` + +The new `label` element should be located directly to the right of your checkbox. Make sure there is a space between the two elements. + +```js +const checkboxInputElem = $('input[type="checkbox"]')[0]; +assert(checkboxInputElem.nextElementSibling.nodeName === 'LABEL'); +``` + +The new `label` element does not have a `for` attribute. Check that there is a space after the opening tag's name. + +```js +const labelElem = $('input[type="checkbox"]')[0].nextElementSibling; +assert(labelElem.hasAttribute('for')); +``` + +The new `label` element should have a `for` attribute with the value `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const labelElem = $('input[type="checkbox"]')[0].nextElementSibling; +assert(labelElem.getAttribute('for').match(/^loving$/)); +``` + +The text `Loving` should be nested within the new `label` element. You have either omitted the text or have a typo. + +```js +const labelElem = document.querySelector('label[for="loving"]'); +assert(labelElem.textContent.replace(/\s/g, '').match(/Loving/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? +--fcc-editable-region-- + Loving +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md new file mode 100644 index 00000000000000..2b47442e63d472 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md @@ -0,0 +1,98 @@ +--- +id: 5efc518e8d6a74d05e68af75 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Add the `name` attribute with the value `personality` to the checkbox `input` element. + +While you won't notice this in the browser, doing this makes it easier for a server to process your web form, especially when there are multiple checkboxes. + +# --hints-- + +You should make sure the checkbox is still present. + +```js +assert($('input[type="checkbox"]')[0]); +``` + +The checkbox `input` element does not have a `name` attribute. Check that there is a space after the opening tag's name. + +```js +assert($('input[type="checkbox"]')[0].hasAttribute('name')); +``` + +The checkbox `input` element should have a `name` attribute with the value `personality`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('input[type="checkbox"]')[0] + .getAttribute('name') + .match(/^personality$/) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? +--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md new file mode 100644 index 00000000000000..833427a5fc7d48 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md @@ -0,0 +1,86 @@ +--- +id: 5efc54138d6a74d05e68af76 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Add an `id` attribute with the value `loving` to the checkbox input. + +# --hints-- + +Your checkbox should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('input[type="checkbox"]')[0].hasAttribute('id')); +``` + +Your checkbox should have an `id` attribute with the value `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert($('input[type="checkbox"]')[0].id.match(/^loving$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? +--fcc-editable-region-- + Loving +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md new file mode 100644 index 00000000000000..6ba79e3dd8d997 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md @@ -0,0 +1,124 @@ +--- +id: 5efc575c8d6a74d05e68af77 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Add a final checkbox after the previous one with an `id` attribute value of `energetic`. The `name` attribute should be the same as the previous checkbox. + +Also add a `label` element to the right of the new checkbox with text `Energetic`. Make sure to associate the `label` element with the new checkbox. + +# --hints-- + +You need to add a new checkbox. + +```js +assert($('input[type="checkbox"]').length === 3); +``` + +Your new checkbox should have an `id` attribute with the value `energetic` and a `name` attribute with the value `personality`. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +const checkboxes = [...$('input[type="checkbox"]')]; +assert( + checkboxes.some( + (checkbox) => + checkbox.id === 'energetic' && + checkbox.getAttribute('name') === 'personality' + ) +); +``` + +Your new checkbox should be after the second one. You have them in the wrong order. + +```js +const checkboxes = [...$('input[type="checkbox"]')].map( + (checkbox) => checkbox.id +); +assert(checkboxes.indexOf('lazy') < checkboxes.indexOf('energetic')); +``` + +On the right side of your new checkbox, there should be `label` element with the text `Energetic`. + +```js +const nextElementSibling = $('input[type="checkbox"]')[2].nextElementSibling; +assert( + nextElementSibling.nodeName === 'LABEL' && + nextElementSibling.innerText.replace(/\s+/g, '').match(/^Energetic$/i) +); +``` + +The new `label` should have a `for` attribute with the same value as the `id` attribute of the new checkbox. You have either omitted the value or have a typo. + +```js +assert( + $('input[type="checkbox"]')[2].nextElementSibling.getAttribute('for') === + 'energetic' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? +--fcc-editable-region-- + + +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md new file mode 100644 index 00000000000000..acf4d378e7af24 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md @@ -0,0 +1,107 @@ +--- +id: 5f05a1d8e233dff4a68508d8 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Nest another radio button with the option `Outdoor` in a new `label` element. The new radio button should be placed after the first one. Also, set its `id` attribute value to `outdoor`. + +# --hints-- + +You will need to add a new `label` element in which to nest your new radio button. Make sure it has both an opening and closing tag. + +```js +assert( + document.querySelectorAll('label').length === 2 && + code.match(/<\/label\>/g).length === 2 +); +``` + +The text ` Outdoor` should be located directly to the right of your new `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. + +```js +const radioButtons = [...$('input')]; +assert( + radioButtons.filter((btn) => + btn.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Outdoor/i) + ).length +); +``` + +Your new radio button and associated label should be below the first one. You have them in the wrong order. + +```js +const collection = [ + ...document.querySelectorAll('input[type="radio"]') +].map((node) => node.nextSibling.nodeValue.replace(/\s+/g, '')); +assert(collection.indexOf('Indoor') < collection.indexOf('Outdoor')); +``` + +Your new radio button should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('input')[1].hasAttribute('id')); +``` + +Your new radio element should have an `id` attribute with the value `outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert($('input')[1].id.match(/^outdoor$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md new file mode 100644 index 00000000000000..adf4f4c79f661c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md @@ -0,0 +1,63 @@ +--- +id: 5f07be6ef7412fbad0c5626b +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Before adding any new content, you should make use of a `section` element to separate the cat photos content from the future content. + +Take all the elements currently located within the `main` element and nest them in a `section` element. + +# --hints-- + +Your `section` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('section')); +``` + +Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/section\>/)); +``` + +The entire `section` element should be between the opening and closing tags of the `main` element. + +```js +assert(document.querySelector('section').parentNode.nodeName === 'MAIN'); +``` + +The existing `h2`, comment, `p` element, and anchor (`a`) element should be between the opening and closing tags of the `section` element. + +```js +const childrenOfSection = [...document.querySelector('section').childNodes]; +const foundElems = childrenOfSection.filter((child) => { + return ['H2', 'A', 'P'].includes(child.nodeName); +}); +assert(foundElems.length === 3); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+--fcc-editable-region-- +
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md new file mode 100644 index 00000000000000..6be452b82c7fb8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md @@ -0,0 +1,81 @@ +--- +id: 5f07c98cdb9413cbd4b16750 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +It is time to add a new section. Add a second `section` element below the existing `section` element. + +# --hints-- + +Your `section` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('section').length >= 2); +``` + +You should only add one opening `section` tag. Please remove any extras. + +```js +assert(document.querySelectorAll('section').length === 2); +``` + +Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/section>/g).length >= 2); +``` + +You should only add one closing `section` tag. Please remove any extras. + +```js +assert(code.match(/<\/section>/g).length === 2); +``` + +The second `section` element should not be nested in the first `section` element. + +```js +const childrenOf1stSection = [ + ...document.querySelector('main > section').children +]; +const foundElems = childrenOf1stSection.filter((child) => { + return child.nodeName === 'SECTION'; +}); +assert(foundElems.length === 0); +``` + +Both `section` elements should be between the opening and closing tags of the `main` element. + +```js +const childrenOfMain = [...document.querySelector('main').children]; +const foundElems = childrenOfMain.filter((child) => { + return child.nodeName === 'SECTION'; +}); +assert(foundElems.length === 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+--fcc-editable-region-- +
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md new file mode 100644 index 00000000000000..7f620d6f74e58e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md @@ -0,0 +1,98 @@ +--- +id: 5f07fb1579dc934717801375 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +It is time to add a new section. Add a third `section` element below the second `section` element. + +# --hints-- + +Your `section` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('section').length >= 3); +``` + +You should only add one opening `section` tag. Please remove any extras. + +```js +assert(document.querySelectorAll('section').length === 3); +``` + +Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/section>/g).length >= 3); +``` + +You should only add one closing `section` tag. Please remove any extras. + +```js +assert(code.match(/<\/section>/g).length === 3); +``` + +All of the `section` elements should be between the opening and closing tags of the `main` element. + +```js +const childrenOfMain = [...document.querySelector('main').children]; +const sectionElemsFound = childrenOfMain.filter((child) => { + return child.nodeName === 'SECTION'; +}); +assert(sectionElemsFound.length === 3); +``` + +The last `section` element should have no content. Remove any HTML elements or text within the `section` element. + +```js +assert($('main > section')[2].children.length === 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- +
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md new file mode 100644 index 00000000000000..aa4669e5e051ea --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md @@ -0,0 +1,105 @@ +--- +id: 5f0d48e7b435f13ab6550051 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +The `legend` element acts as a caption for the content in the `fieldset` element. It gives users context about what they should enter into that part of the form. + +Add a `legend` element with the text `Is your cat an indoor or outdoor cat?` above both of the radio buttons. + +# --hints-- + +Your `legend` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('legend')); +``` + +Your `legend` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/legend\>/)); +``` + +Your `legend` element should be the first element right below `fieldset` element's opening tag and before the first radio button's opening `label` tag. It is not in the correct position. + +```js +const fieldsetElem = document.querySelector('fieldset'); +const fieldsetElemChildren = fieldsetElem.children; +assert( + fieldsetElem.firstElementChild.nodeName === 'LEGEND' && + fieldsetElemChildren[1].nodeName === 'LABEL' && + fieldsetElemChildren[1].children[0].nodeName === 'INPUT' && + fieldsetElemChildren[1].children[0].id === 'indoor' +); +``` + +Your `legend` element's text should be `Is your cat an indoor or outdoor cat?`. You have either omitted the text, have a typo, or it is not between the `legend` element's opening and closing tags. + +```js +const extraSpacesRemoved = document + .querySelector('legend') + .innerText.replace(/\s+/g, ' '); +assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md new file mode 100644 index 00000000000000..8e62ddb2a3f4ad --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md @@ -0,0 +1,128 @@ +--- +id: 5f0d4ab1b435f13ab6550052 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Next, you are going to add some new form `input` elements, so add another `fieldset` element directly below the current `fieldset` element. + +# --hints-- + +Your new `fieldset` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('fieldset').length >= 2); +``` + +You should only add one opening `fieldset` tag. Please remove any extras. + +```js +assert(document.querySelectorAll('fieldset').length === 2); +``` + +Your new `fieldset` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/fieldset>/g).length >= 2); +``` + +You should only add one closing `fieldset` tag. Please remove any extras. + +```js +assert(code.match(/<\/fieldset>/g).length === 2); +``` + +The second `fieldset` element should not be nested in the first `fieldset` element. + +```js +const childrenOf1stFieldset = [ + ...document.querySelector('form > fieldset').children +]; +const foundElems = childrenOf1stFieldset.filter((child) => { + return child.nodeName === 'FIELDSET'; +}); +assert(foundElems.length === 0); +``` + +Both `fieldset` elements should be above the text field and its associated `label` element. They are out of order. + +```js +const formChildren = $('form')[0].children; +assert( + formChildren[0].nodeName === 'FIELDSET' && + formChildren[1].nodeName === 'FIELDSET' && + formChildren[2] && + formChildren[2].nodeName === 'INPUT' && + formChildren[2].getAttribute('type') === 'text' +); +``` + +Your new `fieldset` element should be below the existing `fieldset` element. You have them in the wrong order. + +```js +const fieldsetChildren = [...document.querySelectorAll('fieldset')].map( + (elem) => elem.children +); +assert(fieldsetChildren[0].length > fieldsetChildren[1].length); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- +
+ Is your cat an indoor or outdoor cat? + + +
+ + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md new file mode 100644 index 00000000000000..6e9654dd6335dc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md @@ -0,0 +1,114 @@ +--- +id: 5f0d4d04b435f13ab6550053 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Add a `legend` element with the text `What's your cat's personality?` inside the second `fieldset` element. + +# --hints-- + +You have either deleted the second `fieldset` element or it is missing an opening tag or closing tag. + +```js +assert( + document.querySelectorAll('fieldset').length === 2 && + code.match(/<\/fieldset>/g).length === 2 +); +``` + +Your `legend` element should have an opening tag. Opening tags have this syntax: ``. + +```js +const secondFieldset = $('fieldset')[1]; +assert( + secondFieldset && + [...secondFieldset.children].filter((child) => child.nodeName === 'LEGEND') + .length +); +``` + +Your `legend` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/legend\>/g).length === 2); +``` + +The `legend` element should have the text `What's your cat's personality?`. You have either omitted the text or have a typo. + +```js +const secondFieldset = $('fieldset')[1]; +assert( + secondFieldset && + [...secondFieldset.children].filter((child) => { + const extraSpacesRemoved = child.innerText.replace(/\s+/g, ' '); + return ( + child.nodeName === 'LEGEND' && + extraSpacesRemoved.match(/What's your cat's personality\??$/i) + ); + }).length +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+--fcc-editable-region-- +
+
+--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md new file mode 100644 index 00000000000000..d78f60d765ef73 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md @@ -0,0 +1,101 @@ +--- +id: 5f1a80975fc4bcae0edb3497 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +If you select the `Indoor` radio button and submit the form, the form data for the button is based on its `name` and `value` attributes. Since your radio buttons do not have a `value` attribute, the form data will include `indoor-outdoor=on`, which is not useful when you have multiple buttons. + +Add a `value` attribute to both radio buttons. For convenience, set the button's `value` attribute to the same value as its `id` attribute. + +# --hints-- + +Both radio buttons should still be located between opening and closing `label` element tags. + +```js +const labelChildNodes = [...document.querySelectorAll('form > label')].map( + (node) => node.childNodes +); +assert( + labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') + .length === 2 +); +``` + +Both radio buttons should have a `value` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; +assert(radioButtons.every((btn) => btn.hasAttribute('value'))); +``` + +The `Indoor` radio button's `value` attribute should be set to `indoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const indoorRadioButton = document.querySelector('#indoor'); +assert(indoorRadioButton.getAttribute('value').match(/^indoor$/)); +``` + +The `Outdoor` radio button's `value` attribute should be set to `outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const outdoorRadioButton = document.querySelector('#outdoor'); +assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + + +--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md new file mode 100644 index 00000000000000..38ffcd2935691c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md @@ -0,0 +1,106 @@ +--- +id: 5f1a89f1190aff21ae42105a +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Like radio buttons, form data for selected checkboxes are `name` / `value` attribute pairs. While the `value` attribute is optional, it's best practice to include it with any checkboxes or radio buttons on the page. + +Add a `value` attribute to each checkbox. For convenience, set each checkbox's `value` attribute to the same value as its `id` attribute. + +# --hints-- + +All three checkboxes should have a `value` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +const checkboxes = [...document.querySelectorAll('input[type="checkbox"]')]; +assert(checkboxes.every((checkbox) => checkbox.hasAttribute('value'))); +``` + +The `value` attribute of the `Loving` checkbox should be set to `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const lovingCheckbox = document.querySelector('#loving'); +assert(lovingCheckbox.getAttribute('value').match(/^loving$/)); +``` + +The `value` attribute of the `Lazy` checkbox should be set to `lazy`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const lazyCheckbox = document.querySelector('#lazy'); +assert(lazyCheckbox.getAttribute('value').match(/^lazy$/)); +``` + +The `value` attribute of the `Energetic` checkbox should be set to `energetic`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const energeticCheckbox = document.querySelector('#energetic'); +assert(energeticCheckbox.getAttribute('value').match(/^energetic$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- +
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md new file mode 100644 index 00000000000000..041e41ad3e4883 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md @@ -0,0 +1,103 @@ +--- +id: 7cf9b03d81a65668421804c3 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +In order for a form's data to be accessed by the location specified in the `action` attribute, you must give the text field a `name` attribute and assign it a value to represent the data being submitted. For example, you could use the following syntax for an email address text field: ``. + +Add the `name` attribute with the value `catphotourl` to your text field. + +# --hints-- + +You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. + +```js +assert($('input').length); +``` + +Your `form` should only contain the `input` element. Remove any additional HTML elements or text within the `form` element. + +```js +assert( + $('form')[0].children.length === 1 && + $('form')[0].innerText.trim().length === 0 +); +``` + +Your `input` element does not have a `name` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('input')[0].hasAttribute('name')); +``` + +Your `input` element should have a `name` attribute with the value `catphotourl`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('input')[0] + .getAttribute('name') + .match(/^catphotourl$/i) +); +``` + +Although you have set the `input` element's `name` attribute to `catphotourl`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md new file mode 100644 index 00000000000000..e8490875ffc61d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md @@ -0,0 +1,52 @@ +--- +id: 60eebd07ea685b0e777b5583 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Welcome to the Registration Form project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(/html\s*>/gi)); +``` + +Your `DOCTYPE` declaration should be at the beginning of your HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md new file mode 100644 index 00000000000000..87cb5bf27152fe --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md @@ -0,0 +1,54 @@ +--- +id: 60f027099a15b00485563dd2 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code. + +# --hints-- + +Your `DOCTYPE` declaration should be at the beginning of your HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `html` tags should be in the correct order. + +```js +assert(code.match(/\s*<\/html\s*>/)); +``` + +You should only have one `html` element. + +```js +// Possibly a redundant test, as browser fixes this +assert(document.querySelectorAll('html').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md new file mode 100644 index 00000000000000..b2b546852e23cb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md @@ -0,0 +1,67 @@ +--- +id: 60f027c87bc98f050395c139 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Next, add opening and closing `head` and `body` tags within the `html` element. + +# --hints-- + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +The `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling.localName === 'body'); +``` + +The `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +The `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md new file mode 100644 index 00000000000000..3a339ecfc73ca7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md @@ -0,0 +1,99 @@ +--- +id: 60f0286404aefb0562a4fdf9 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Add a `title` element to the `head`, and give your project a title of `Registration Form`. Also, nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value of `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. + +# --hints-- + +Your code should have a `title` element. + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +The `title` element should be within the `head` element. + +```js +assert.exists(document.querySelector('head > title')); +``` + +Your project should have a title of `Registration Form`. + +```js +const title = document.querySelector('title'); +assert.equal(title.text.toLowerCase(), 'registration form') +``` + +Remember, the casing and spelling matters for the title. + +```js +const title = document.querySelector('title'); +assert.equal(title.text, 'Registration Form'); +``` + +Your code should have a `link` element. + +```js +assert.match(code, //i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / + + --fcc-editable-region-- + + + + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md new file mode 100644 index 00000000000000..d1f34bbee73b50 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md @@ -0,0 +1,43 @@ +--- +id: 60f02e7361b68405e27b62a5 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Within the `body`, provide a heading context for the content, by adding an `h1` with the text `Registration Form`. + +# --hints-- + +You should add the `h1` within the `body`. + +```js +assert.exists(document.querySelector('body > h1')); +``` + +You should give the `h1` the text `Registration Form`. + +```js +assert.equal(document.querySelector('body > h1')?.textContent, 'Registration Form'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md new file mode 100644 index 00000000000000..d1a7d4d474a5ac --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md @@ -0,0 +1,54 @@ +--- +id: 60f030d388cb74067cf291c3 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Below the heading, use the following text within a paragraph element to encourage users to register: + +```md +Please fill out this form with the required information +``` + +# --hints-- + +You should add a `p` element within the `body`. + +```js +assert.exists(document.querySelector('body > p')); +``` + +You should add the `p` element below the `h1`. + +```js +assert.exists(document.querySelector('h1 + p')); +``` + +You should give the `p` element a text of `Please fill out this form with the required information`. + +```js +assert.equal(document.querySelector('p')?.innerText, 'Please fill out this form with the required information'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + +--fcc-editable-region-- + +

Registration Form

+ + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md new file mode 100644 index 00000000000000..87edd92fa66fd8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md @@ -0,0 +1,54 @@ +--- +id: 60f1922fcbd2410527b3bd89 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +To spruce the project up, let us add some CSS. Begin by giving the `body` a `width` of `100%`, and a `height` of `100vh`. + +# --hints-- + +You should use the `body` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +``` + +You should give the `body` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%'); +``` + +You should give the `body` a `height` of `100vh`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md new file mode 100644 index 00000000000000..6bb0a8d3337cb7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md @@ -0,0 +1,51 @@ +--- +id: 60f1a5e2d2c23707a4f9a660 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Now, get rid of the horizontal scroll-bar, by setting the `body` default `margin` added by some browsers to `0`. + +# --hints-- + +You should add `margin` within the `body` element selector. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.margin); +``` + +You should give the `margin` a value of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+ + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md new file mode 100644 index 00000000000000..d40b0a39fcdf72 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md @@ -0,0 +1,64 @@ +--- +id: 60f1a9cbd23023082e149fee +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +That is better. Now, make the background easy on the eyes, by changing the `body` `background-color` to `#1b1b32`. Then, to see the text, change the `color` to `#f5f6f7`. + +# --hints-- + +You should add the `background-color` within the `body` element selector. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor); +``` + +You should give the `background-color` a value of `#1b1b32`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor, 'rgb(27, 27, 50)'); +``` + +You should add the `color` within the `body` element selector. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.color); +``` + +You should give the `color` a value of `#f5f6f7`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.color, 'rgb(245, 246, 247)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+ + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; + margin: 0; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md new file mode 100644 index 00000000000000..ded4d1b929560d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md @@ -0,0 +1,62 @@ +--- +id: 60f5c3e399ff1a05629964e4 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +As suggested by the title, you are creating a form. So, after the `p` element, insert a `form` with an `action` attribute targeting `https://register-demo.freecodecamp.org`. + +# --hints-- + +You should add a `form` element adjacent the `p` element. + +```js +assert.exists(document.querySelector('p + form')); +``` + +You should give the `form` an `action` attribute. + +```js +// Default action points to window location +assert.notEqual(document.querySelector('form')?.action, window?.location?.href); +``` + +You should give the `action` a value of `https://register-demo.freecodecamp.org`. + +```js +assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + +--fcc-editable-region-- + +

Registration Form

+

Please fill out this form with the required information

+ + +--fcc-editable-region-- + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md new file mode 100644 index 00000000000000..71474f9d117627 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md @@ -0,0 +1,63 @@ +--- +id: 60f5cb8875ab6a0610f05071 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Seeing as we plan on having three distinct sections to the form, add three `fieldset` elements within the `form`. + +# --hints-- + +You should add three `fieldset` elements. + +```js +assert.equal(document.querySelectorAll('fieldset')?.length, 3); +``` + +The three `fieldset` elements should be within the `form`. + +```js +assert.equal(document.querySelectorAll('form > fieldset')?.length, 3); +``` + +The three `fieldset` elements should be siblings. + +```js +assert.exists(document.querySelector('fieldset + fieldset + fieldset')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + +--fcc-editable-region-- + +

Registration Form

+

Please fill out this form with the required information

+
+ +
+ +--fcc-editable-region-- + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md new file mode 100644 index 00000000000000..3d6b55f57d36fd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md @@ -0,0 +1,61 @@ +--- +id: 60f5d2776c854e069560fbe6 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +The first `fieldset` will hold name, email, and password fields. Start by adding four `label` elements to the first `fieldset`. + +# --hints-- + +You should add four `label` elements. + +```js +assert.equal(document.querySelectorAll('label')?.length, 4); +``` + +You should add the `label` elements to the first `fieldset`. + +```js +assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+--fcc-editable-region-- +
+
+ +
+
+
+
+--fcc-editable-region-- + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md new file mode 100644 index 00000000000000..b5d35fb902a6a8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md @@ -0,0 +1,81 @@ +--- +id: 60f5dc35c07ac1078f140916 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Add the following text to the `label` elements: + +- `Enter Your First Name:` +- `Enter Your Last Name:` +- `Enter Your Email:` +- `Create a New Password:` + +# --hints-- + +The first `label` should have the text `Enter Your First Name:`. + +```js +assert.match(document.querySelector('label')?.innerHTML, /Enter Your First Name:/i); +``` + +The second `label` should have the text `Enter Your Last Name:`. + +```js +assert.match(document.querySelector('fieldset > label:nth-child(2)')?.innerHTML, /Enter Your Last Name:/i); +``` + +The third `label` should have the text `Enter Your Email:`. + +```js +assert.match(document.querySelector('fieldset > label:nth-child(3)')?.innerHTML, /Enter Your Email:/i); +``` + +The fourth `label` should have the text `Create a New Password:`. + +```js +assert.match(document.querySelector('fieldset > label:nth-child(4)')?.innerHTML, /Create a New Password:/i); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md new file mode 100644 index 00000000000000..6f4dd287a04ccb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md @@ -0,0 +1,72 @@ +--- +id: 60f803d5241e6a0433a523a1 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +As `label` elements are `inline` by default, they appear on the same line as the text they are labelling. To make them appear on separate lines, add `display: block` to the `label` element, and add a `margin` of `0.5rem 0`, to separate them from each other. + +# --hints-- + +You should use the `label` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('label')); +``` + +You should add a `display` property of value `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.display, 'block'); +``` + +You should add a `margin` property of value `0.5rem 0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.margin, '0.5rem 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+
+
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md new file mode 100644 index 00000000000000..555b0cd32046f0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md @@ -0,0 +1,94 @@ +--- +id: 60f805f813eaf2049bc2ceea +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Nest an `input` element within each `label`. Be sure to add each `input` after the `label` text, and include a space after the colon. + +# --hints-- + +You should add four `input` elements to the `fieldset` element. + +```js +assert.equal(document.querySelectorAll('fieldset input')?.length, 4); +``` + +You should nest the `input` elements within the `label` elements. + +```js +assert.equal(document.querySelectorAll('label input')?.length, 4); +``` + +You should add the first `input` after the `label` text `Enter Your First Name:`, and include a space after the colon. + +```js +assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML, 'Enter Your First Name: '); +``` + +You should add the second `input` after the `label` text `Enter Your Last Name:`, and include a space after the colon. + +```js +assert.equal(document.querySelectorAll('label')?.[1]?.innerHTML, 'Enter Your Last Name: '); +``` + +You should add the third `input` after the `label` text `Enter Your Email:`, and include a space after the colon. + +```js +assert.equal(document.querySelectorAll('label')?.[2]?.innerHTML, 'Enter Your Email: '); +``` + +You should add the fourth `input` after the `label` text `Create a New Password:`, and include a space after the colon. + +```js +assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML, 'Create a New Password: '); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+ --fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md new file mode 100644 index 00000000000000..4fbba2c8b18dd3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md @@ -0,0 +1,87 @@ +--- +id: 60f80e0081e0f2052ae5b505 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Specifying the `type` attribute of a form element is important for the browser to know what kind of data it should expect. If the `type` is not specified, the browser will default to `text`. + +Give the first two `input` elements a `type` attribute of `text`, the third a `type` attribute of `email`, and the fourth a `type` attribute of `password`. + +The `email` type only allows emails with a `@` and a `.` in the domain. +The `password` type obscures the input, and warns if the site does not use HTTPS. + +# --hints-- + +You should give the first `input` element a `type` attribute of `text`. + +```js +assert.equal(document.querySelector('input')?.type, 'text'); +``` + +You should give the second `input` element a `type` attribute of `text`. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.type, 'text'); +``` + +You should give the third `input` element a `type` attribute of `email`. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.type, 'email'); +``` + +You should give the fourth `input` element a `type` attribute of `password`. + +```js +assert.equal(document.querySelectorAll('input')?.[3]?.type, 'password'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md new file mode 100644 index 00000000000000..c28d9dd6642de4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md @@ -0,0 +1,79 @@ +--- +id: 60f81167d0d4910809f88945 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +The first `input` element with a `type` of `submit` is automatically set to submit its nearest parent `form` element. + +To handle the form submission, after the last `fieldset` element add an `input` element with the `type` attribute set to `submit` and the `value` attribute set to `Submit`. + +# --hints-- + +You should add the `input` element after the last `fieldset` element. + +```js +assert.exists(document.querySelectorAll('fieldset')?.[2]?.nextElementSibling?.tagName, 'input'); +``` + +You should give the `input` element a `type` attribute of `submit`. + +```js +assert.exists(document.querySelector('fieldset + input[type="submit"]')); +``` + +You should give the `input` element a `value` attribute of `Submit`. + +```js +assert.exists(document.querySelector('fieldset + input[value="Submit"]')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+
+ +--fcc-editable-region-- +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md new file mode 100644 index 00000000000000..39f41b112f2932 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md @@ -0,0 +1,93 @@ +--- +id: 60f81616cff80508badf9ad5 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +At this point, you should be able to submit the form. However, you might notice not much happens. + +To make the form more interactive, add the `required` attribute to the `input` elements in the first `fieldset`. + +Now, if you try to submit the form without filling in the required fields, you will see an error message. + +# --hints-- + +You should give the first `input` element a `required` attribute. + +```js +assert.equal(document.querySelector('input')?.required, true); +``` + +You should give the second `input` element a `required` attribute. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.required, true); +``` + +You should give the third `input` element a `required` attribute. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.required, true); +``` + +You should give the fourth `input` element a `required` attribute. + +```js +assert.equal(document.querySelectorAll('input')?.[3]?.required, true); +``` + +You should not give the `submit` `input` a `required` attribute. + +```js +assert.equal(document.querySelector('input[type="submit"]')?.required, false); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+
+ +--fcc-editable-region-- +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md new file mode 100644 index 00000000000000..21ebdab5c3464d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md @@ -0,0 +1,73 @@ +--- +id: 60f83e7bfc09900959f41e20 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Certain `type` attribute values come with built-in form validation. For example, `type="email"` requires that the value be a valid email address. + +Add custom validation to the password `input` element, by adding a `minlength` attribute with a value of `8`. Doing so prevents inputs of less than 8 characters being submitted. + +# --hints-- + +You should give the password `input` element a `minlength` attribute. + +```js +assert.notEqual(document.querySelector('input[type="password"]')?.minLength, -1); +``` + +You should give the `minlength` attribute a value of `8`. + +```js +assert.equal(document.querySelector('input[type="password"]')?.minLength, 8); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md new file mode 100644 index 00000000000000..35e24ad2bbe726 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md @@ -0,0 +1,81 @@ +--- +id: 60f84ec41116b209c280ba91 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +With `type="password"` you can use the `pattern` attribute to define a regular expression that the password must match to be considered valid. + +Add a `pattern` attribute to the password `input` element to require the input match: `[a-z0-5]{8,}` + +The above is a regular expression which matches eight or more lowercase letters or the digits `0` to `5`. Then, remove the `minlength` attribute, and try it out. + +# --hints-- + +You should give the password `input` element a `pattern` attribute. + +```js +assert.isNotEmpty(document.querySelector('input[type="password"]')?.pattern); +``` + +You should give the `pattern` attribute a value of `[a-z0-5]{8,}`. + +```js +assert.equal(document.querySelector('input[type="password"]')?.pattern, '[a-z0-5]{8,}'); +``` + +You should remove the `minlength` attribute from the password `input` element. + +```js +assert.equal(document.querySelector('input[type="password"]')?.minLength, -1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md new file mode 100644 index 00000000000000..f1257e9a7d5e5d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md @@ -0,0 +1,75 @@ +--- +id: 60f852f645b5310a8264f555 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Let us go to the next part of the registration form. This section will ask for the type of account the user is opening, and will confirm the user has read the terms and conditions. + +Start by adding three `label` elements to the second `fieldset`. + +# --hints-- + +You should add three `label` elements to the second `fieldset`. + +```js +assert.equal(document.querySelectorAll('fieldset')?.[1]?.querySelectorAll('label')?.length, 3); +``` + +The `label` elements should be siblings. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2)')?.querySelector('label + label + label')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md new file mode 100644 index 00000000000000..3d5acfd9320ccb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md @@ -0,0 +1,84 @@ +--- +id: 60f85a62fb30c80bcea0cedb +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Users will be allowed to chose either a `Personal Account` or `Business Account`. + +To do this, within each of the first two `label` elements, add one `input` element with `type="radio"`. + +# --hints-- + +You should add two `input` elements. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(2) input')?.length, 2); +``` + +You should add one `input` to each of the first two `label` elements. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(1) > input')); +assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(2) > input')); +``` + +You should give both `input` elements a `type` of `radio`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(2) input[type="radio"]')?.length, 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md new file mode 100644 index 00000000000000..49b94672f91149 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md @@ -0,0 +1,81 @@ +--- +id: 60f8604682407e0d017bbf7f +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +For the terms and conditions, add an `input` with a `type` of `checkbox` to the third `label` element. Also, as we do not want users to sign up, without having read the terms and conditions, make it `required`. + +# --hints-- + +You should add an `input` to the third `label` element. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')); +``` + +You should add a `type` attribute of value `checkbox` to the `input` element. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.type, 'checkbox'); +``` + +You should add a `required` attribute to the `input` element. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.required, true); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md new file mode 100644 index 00000000000000..1ebbd3fa5773ac --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md @@ -0,0 +1,105 @@ +--- +id: 60f8618d191b940d62038513 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Within each corresponding `label` element, and immediately after the `input` element, add a space and add the following text: + +```md +Personal Account +Business Account +I accept the terms and conditions +``` + +# --hints-- + +You should give the first `label` the text `Personal Account`. + +```js +assert.include(document.querySelector('fieldset:nth-child(2) > label')?.innerText, 'Personal Account'); +``` + +You should give the second `label` the text `Business Account`. + +```js +assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText, 'Business Account'); +``` + +You should give the third `label` the text `I accept the terms and conditions`. + +```js +assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText, 'I accept the terms and conditions'); +``` + +You should give the first `label` text one space at the front. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label')?.innerText?.[0], ' '); +``` + +You should give the second `label` text one space at the front. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText?.[0], ' '); +``` + +You should give the third `label` text one space at the front. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText?.[0], ' '); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md new file mode 100644 index 00000000000000..1c792996eabbaf --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md @@ -0,0 +1,83 @@ +--- +id: 60fab4a123ce4b04526b082b +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +You only want one radio input to be selectable at a time. However, the form does not know the radio inputs are related. + +To relate the radio inputs, give them the same `name` attribute with a value of `account-type`. Now, it is not possible to select both radio inputs at the same time. + +# --hints-- + +You should give the first radio input the `name` attribute with a value of `account-type`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type'); +``` + +You should give the second radio input the `name` attribute with a value of `account-type`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type'); +``` + +You should not give the `checkbox` the `name` attribute. + +```js +assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input[type="checkbox"]')?.name); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md new file mode 100644 index 00000000000000..32b59890c9da04 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md @@ -0,0 +1,85 @@ +--- +id: 60fab8367d35de04e5cb7929 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +To finish this `fieldset` off, link the text `terms and conditions` to the following location: + +```md +https://www.freecodecamp.org/news/terms-of-service/ +``` + +# --hints-- + +You should use an `a` element to link to the terms and conditions. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')); +``` + +You should give the `a` element an `href` of `https://www.freecodecamp.org/news/terms-of-service/`. + +```js +assert.match(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.href, /https:\/\/www\.freecodecamp\.org\/news\/terms-of-service\/?/); +``` + +You should only wrap the `a` element around the text `terms and conditions`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.textContent, 'terms and conditions'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md new file mode 100644 index 00000000000000..dc84c9c45f236d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md @@ -0,0 +1,88 @@ +--- +id: 60fab9f17fa294054b74228c +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Moving on to the final `fieldset`. What if you wanted to allow a user to upload a profile picture? + +Well, the `input` type `file` allows just that. Add a `label` with the text `Upload a profile picture: `, and add an `input` accepting a file upload. + +# --hints-- + +You should add a `label` with the text `Upload a profile picture: `. + +```js +assert.match(document.querySelector('fieldset:nth-child(3) > label')?.innerText, /Upload a profile picture:/i); +``` + +You should nest an `input` element inside the `label` element. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label > input')); +``` + +You should give the `input` element a `type` of `file`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.type, 'file'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md new file mode 100644 index 00000000000000..5c021ff6cdfb54 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md @@ -0,0 +1,102 @@ +--- +id: 60fabf0dd4959805dbae09e6 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Add another `label` after the first, with the text `Input your age (years): `. Then, nest an `input` with the `type` of `number`. + +As we do not want users under the age of 13 to register, add a `min` attribute to the `input` with a value of `13`. Also, we can probably assume users over the age of 120 will not register; add a `max` attribute with a value of `120`. + +Now, if someone tries to submit the form with values outside of the range, a warning will appear, and the form will not submit. Give it a try. + +# --hints-- + +You should add a `label` to the third `fieldset`, after the existing `label`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label + label')); +``` + +You should give the `label` the text `Input your age (years): `. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent?.trim(), 'Input your age (years):'); +``` + +You should give the `label` an `input` with `type` of `number`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')); +``` + +You should give the `input` a `min` attribute with a value of `13`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.min, '13'); +``` + +You should give the `input` a `max` attribute with a value of `120`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.max, '120'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md new file mode 100644 index 00000000000000..df2945e746c62f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md @@ -0,0 +1,84 @@ +--- +id: 60fac4095512d3066053d73c +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Adding a dropdown to the form is easy with the `select` element. The `select` element is a container for a group of `option` elements, and the `option` element acts as a label for each dropdown option. Both elements require closing tags. + +Start, by adding a `select` element below the two `label` elements. Then, nest 5 `option` elements within the `select` element. + +# --hints-- + +You should add a `select` element to the third `fieldset`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > select')); +``` + +You should nest 5 `option` elements inside the `select` element. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option')?.length, 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md new file mode 100644 index 00000000000000..f8c610ba4ee022 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md @@ -0,0 +1,94 @@ +--- +id: 60fac56271087806def55b33 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Nest the `select` element within a `label` element with the text `How did you hear about us?`. The text should come before the `select` element. + +# --hints-- + +You should nest only the `select` element within a `label` element. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(3) > select')); +``` + +You should give the `label` element the text `How did you hear about us?`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerText?.trim(), 'How did you hear about us?'); +``` + +You should place the text before the `select` element. + +```js +assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerHTML?.replace(/[\t\n]+/g, ''), /^How did you hear about us\?/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md new file mode 100644 index 00000000000000..4c728f107c4d3e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md @@ -0,0 +1,116 @@ +--- +id: 60fac8d7fdfaee0796934f20 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The dropdown options are currently empty. To give them content, add the following text to each subsequent `option` element: + +```md +(select one) +freeCodeCamp News +freeCodeCamp YouTube Channel +freeCodeCamp Forum +Other +``` + +# --hints-- + +You should give the first `option` element the text `(select one)`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.textContent, '(select one)'); +``` + +You should give the second `option` element the text `freeCodeCamp News`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.textContent, 'freeCodeCamp News'); +``` + +You should give the third `option` element the text `freeCodeCamp YouTube Channel`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube Channel'); +``` + +You should give the fourth `option` element the text `freeCodeCamp Forum`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.textContent, 'freeCodeCamp Forum'); +``` + +You should give the fifth `option` element the text `Other`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.textContent, 'Other'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md new file mode 100644 index 00000000000000..29aab109d2e65a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md @@ -0,0 +1,110 @@ +--- +id: 60faca286cb48b07f6482970 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Submitting the form with an option selected would not send a useful value to the server. As such, each `option` needs to be given a `value` attribute. Without which, the text content of the `option` will be submitted to the server. + +Give the first `option` a `value` of `""`, and the subsequent `option` elements `value` attributes from `1` to `4`. + +# --hints-- + +You should give the first `option` a `value` of `""`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.value, ''); +``` + +You should give the second `option` a `value` of `1`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.value, '1'); +``` + +You should give the third `option` a `value` of `2`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.value, '2'); +``` + +You should give the fourth `option` a `value` of `3`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.value, '3'); +``` + +You should give the fifth `option` a `value` of `4`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.value, '4'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md new file mode 100644 index 00000000000000..180b4cced2f204 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md @@ -0,0 +1,105 @@ +--- +id: 60facde2d0dc61085b41063f +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +The `textarea` element acts like an `input` element of type `text`, but comes with the added benefit of being able to receive multi-line text, and an initial number of text rows and columns. + +To allow users to register with a bio, add a `label` with the text `Provide a bio:` followed by a `textarea` element, which requires a closing tag. + +# --hints-- + +You should add a `label` element within the third `fieldset`, after the existing `label` elements. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')); +``` + +You should give the `label` a text of `Provide a bio:`. + +```js +assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')?.innerText, /Provide a bio/); +``` + +You should nest a `textarea` element within the `label`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')); +``` + +You should give the `textarea` element opening and closing tags. + +```js +assert.match(code, /[\s\S]*<\/textarea\s*>/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md new file mode 100644 index 00000000000000..6e1501b65f7f9b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md @@ -0,0 +1,95 @@ +--- +id: 60facf914c7b9b08d7510c2c +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +The `textarea` appears too small. To give it an initial size, you can add the `rows` and `cols` attributes. + +Add an initial size of `3` rows and `30` columns. + +# --hints-- + +You should give the `textarea` a `rows` attribute with value `3`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.rows, 3); +``` + +You should give the `textarea` a `cols` attribute with value `30`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.cols, 30); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md new file mode 100644 index 00000000000000..2e076a4b303905 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md @@ -0,0 +1,95 @@ +--- +id: 60fad0a812d9890938524f50 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +To give Campers an idea of what to put in their bio, the `placeholder` attribute is used. The `placeholder` accepts a text value, which is displayed until the user starts typing. + +Give the `textarea` a `placeholder` of `I like coding on the beach...`. + +# --hints-- + +You should give the `textarea` a `placeholder` attribute. + +```js +assert.isNotEmpty(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder); +``` + +You should give the `placeholder` a value of `I like coding on the beach...`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder, 'I like coding on the beach...'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md new file mode 100644 index 00000000000000..3c6006efab8339 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md @@ -0,0 +1,155 @@ +--- +id: 60fad1cafcde010995e15306 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +With form submissions, it is useful, and good practice, to provide each submittable element with a `name` attribute. This attribute is used to identify the element in the form submission. + +Go ahead, and give each submittable element a unique `name` attribute of your choosing. _Except for the two `radio` inputs._ + +# --hints-- + +You should give the `input` expecting a first name a `name` attribtute. _PS I would have chosen `first-name`_ + +```js +assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name); +``` + +You should give the `input` expecting a last name a `name` attribute. _PS I would have chosen `last-name`_ + +```js +assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(2) > input')?.name); +``` + +You should give the `email` a `name` attribute. _PS I would have chosen `email`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="email"]')?.name); +``` + +You should give the `password` a `name` attribute. _PS I would have chosen `password`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="password"]')?.name); +``` + +You should give the `checkbox` a `name` attribute. _PS I would have chosen `terms`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="checkbox"]')?.name); +``` + +You should give the `file` a `name` attribute. _PS I would have chosen `file`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="file"]')?.name); +``` + +You should give the `number` a `name` attribute. _PS I would have chosen `age`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="number"]')?.name); +``` + +You should give the `select` element a `name` attribute. _PS I would have chosen `referrer`_ + +```js +assert.isNotEmpty(document.querySelector('select')?.name); +``` + +You should give the `textarea` element a `name` attribute. _PS I would have chosen `bio`_ + +```js +assert.isNotEmpty(document.querySelector('textarea')?.name); +``` + +You should not give any of the `option` elements a `name` attribute. + +```js +[...document.querySelectorAll('option')]?.forEach(option => assert.isUndefined(option?.name)); +``` + +You should not give any of the `label` elements a `name` attribute. + +```js +[...document.querySelectorAll('label')]?.forEach(label => assert.isUndefined(label?.name)); +``` + +You should not give any of the `fieldset` elements a `name` attribute. + +```js +[...document.querySelectorAll('fieldset')]?.forEach(fieldset => assert.isEmpty(fieldset?.name)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+ + + +
+
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md new file mode 100644 index 00000000000000..89e54e5776ec04 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md @@ -0,0 +1,102 @@ +--- +id: 60fad6dfcc0d930a59becf12 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +The HTML for the registration form is finished. Now, you can spruce it up a bit. + +Start by changing the font to `Tahoma`, and the font size to `16px` in the `body`. + +# --hints-- + +You should use the `font-family` property to change the font. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily); +``` + +You should set the `font-family` property to `Tahoma`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily, 'Tahoma'); +``` + +You should set the `font-size` property to `16px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + +} +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md new file mode 100644 index 00000000000000..d48bc1cc62444f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md @@ -0,0 +1,103 @@ +--- +id: 60fad8e6148f310bba7890b1 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Center the `h1` and `p` elements by giving them a `margin` of `1em auto`. Then, center align the text as well. + +# --hints-- + +You should use a comma-separated element selector to style the `h1` and `p` elements. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('h1, p')); +``` + +You should use a `margin` of `1em auto` to center the `h1` and `p` elements. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.margin, '1em auto'); +``` + +You should use a `text-align` of `center` to center the `h1` and `p` text. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md new file mode 100644 index 00000000000000..55678ea615221c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md @@ -0,0 +1,120 @@ +--- +id: 60fad99e09f9d30c1657e790 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Center the `form` element, by giving it a `margin` of `0 auto`. Then, fix its size to a maximum `width` of `500px`, and a minimum width of `300px`. In between that range, allow it to have a `width` of `60vw`. + +# --hints-- + +You should use a `form` selector to style the `form` element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('form')); +``` + +You should give the `form` a `margin` of `0 auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.margin, '0px auto'); +``` + +You should give the `form` a `max-width` of `500px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.maxWidth, '500px'); +``` + +You should give the `form` a `min-width` of `300px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.minWidth, '300px'); +``` + +You should give the `form` a `width` of `60vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md new file mode 100644 index 00000000000000..6105e05157b40d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md @@ -0,0 +1,121 @@ +--- +id: 60fadb18058e950c73925279 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +During development, it is useful to see the `fieldset` default borders. However, they make the content appear too separated. + +Remove the `border`, and add `2rem` of padding only to the top and bottom of each `fieldset`. Be sure to remove the `padding` from the left and right. + +# --hints-- + +You can use either a value of `none` or `0` to remove the `border`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle('fieldset')?.border, /(none)|(0px)/); +``` + +You should add `padding` of `2rem` to the top and bottom of each `fieldset`. + +```js +const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset') +assert.equal(fieldset?.paddingTop, '2rem'); +assert.equal(fieldset?.paddingBottom, '2rem'); +``` + +You should remove the `padding` from the left and right of each `fieldset`. + +```js +const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset') +assert.equal(fieldset?.paddingLeft, '0px'); +assert.equal(fieldset?.paddingRight, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md new file mode 100644 index 00000000000000..3ca4ad5a90c71f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md @@ -0,0 +1,114 @@ +--- +id: 60fadce90f85c50d0bb0dd4f +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +To give the `fieldset` elements a bit of separation, select all but the last `fieldset` element, and give them a `border-bottom` of `3px solid #3b3b4f`. + +# --hints-- + +You can use the `:not(:last-of-type)` pseudo-class to select all but the last element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')); +``` + +You should give the `fieldset` elements a `border-bottom` of `3px solid #3b3b4f`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')?.borderBottom, '3px solid rgb(59, 59, 79)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md new file mode 100644 index 00000000000000..f9ef288c9507a5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md @@ -0,0 +1,151 @@ +--- +id: 60fadd972e6ffe0d6858fa2d +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +It would be nicer to have the `label` text appear above the form elements. + +Select all `input`, `textarea`, and `select` elements, and make them take up the full width of their parent elements. + +Also, add `10px` of `margin` to the top of the selected elements. Set the other margins to `0`. + +# --hints-- + +You should use a comma separated element selector to select the `input`, `textarea`, and `select` elements. + +```js +assert.isTrue(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].some(selector => new __helpers.CSSHelp(document).getStyle(selector))); +``` + +You should set the `width` property to `100%`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.width, '100%'); +``` + +You should set the `margin-top` property to `10px`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginTop, '10px'); +``` + +You should set the `margin-bottom` property to `0`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginBottom, '0px'); +``` + +You should set the `margin-left` property to `0`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginLeft, '0px'); +``` + +You should set the `margin-right` property to `0`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginRight, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md new file mode 100644 index 00000000000000..68ae9b93ac4b3f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md @@ -0,0 +1,131 @@ +--- +id: 60fadfa2b540b70dcfa8b771 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +For the second `fieldset`, you want the `input` and `label` text to appear on the same line. + +Start, by giving the `input` elements in the second `fieldset` a class of `inline`. + +# --hints-- + +You should give the first `input` a class of `inline`. + +```js +assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[0]?.classList?.contains('inline')); +``` + +You should give the second `input` a class of `inline`. + +```js +assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[1]?.classList?.contains('inline')); +``` + +You should give the third `input` a class of `inline`. + +```js +assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?.contains('inline')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md new file mode 100644 index 00000000000000..56967b2387737d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md @@ -0,0 +1,125 @@ +--- +id: 60fc219d333e37046f474a6e +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Select only the `.inline` elements, and give them `width` of `unset`. This will remove the earlier rule which set all the `input` elements to `width: 100%`. + +# --hints-- + +You should use the `.inline` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.inline')); +``` + +You should give the `.inline` elements a `width` of `unset`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md new file mode 100644 index 00000000000000..e672b9bb36610a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md @@ -0,0 +1,140 @@ +--- +id: 60fc22d1e64d1b04cdd4e602 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Add some space between the `.inline` elements and the `label` text, by giving a right `margin` of `0.5em`. Also, set all the other margin to `0`. + +# --hints-- + +You should give the `.inline` elements a `margin-right` of `0.5em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginRight, '0.5em'); +``` + +You should give the `.inline` elements a `margin-bottom` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginBottom, '0px'); +``` + +You should give the `.inline` elements a `margin-top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginTop, '0px'); +``` + +You should give the `.inline` elements a `margin-left` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- +.inline { + width: unset; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md new file mode 100644 index 00000000000000..885dbd65185757 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md @@ -0,0 +1,125 @@ +--- +id: 60fc236dc04532052926fdac +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you look close enough, you will notice the `.inline` elements are too high on the line. + +To combat this, set the `vertical-align` property to `middle`. + +# --hints-- + +You should set the `vertical-align` property to `middle` for all `.inline` elements. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign, 'middle'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- +.inline { + width: unset; + margin: 0 0.5em 0 0; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md new file mode 100644 index 00000000000000..0880d4809197f6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md @@ -0,0 +1,142 @@ +--- +id: 60ffe1bc30415f042faea936 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +To make the `input` and `textarea` elements blend in with the background theme, set their `background-color` to `#0a0a23`. Then, give them a `1px`, `solid` border with a color of `#0a0a23`. + +# --hints-- + +You should use a comma separated element selector to select the `input` and `textarea` elements. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.isTrue(['input, textarea', 'textarea, input'].some(selFunc)); +``` + +You should give the `input` and `textarea` elements a `background-color` of `#0a0a23`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.backgroundColor, 'rgb(10, 10, 35)'); +``` + +You should give the `input` and `textarea` elements a `1px`, `solid` border with a color of `#0a0a23`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderWidth, '1px'); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderStyle, 'solid'); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderColor, 'rgb(10, 10, 35)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md new file mode 100644 index 00000000000000..b318c799b86b18 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md @@ -0,0 +1,139 @@ +--- +id: 60ffe3936796ac04959285a9 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Currently, if you type in the `input` or `textarea` elements, you will not be able to see the text. Also, their height is too small to be easy to use. + +Fix this, by setting the `color` to `#ffffff`, and setting their `min-height` to `2em`. + +# --hints-- + +You should set the `color` to `#ffffff`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.color, 'rgb(255, 255, 255)'); +``` + +You should set the `min-height` to `2em`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minHeight, '2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + +} +--fcc-editable-region-- + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md new file mode 100644 index 00000000000000..c2c81179ef88a4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md @@ -0,0 +1,144 @@ +--- +id: 60ffe4f4ec18cd04dc470c56 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +You want the `select` element to remain with a white background, but now it is not getting the same `min-height` as the `input` and `textarea` elements. + +Move the `min-height` property and value so that all three element types have the same `min-height` value, and the `select` element still has a white background. + +# --hints-- + +You should move the `min-height` property and value to the `input, textarea, select` selector. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight); +``` + +You should give the `input, textarea, select` selector a `min-height` of `2em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight, '2em'); +``` + +You should remove the `min-height` declaration from the `input, textarea` selector. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minHeight); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; + min-height: 2em; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md new file mode 100644 index 00000000000000..1291d7625960f1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md @@ -0,0 +1,152 @@ +--- +id: 60ffe69ee377c6055e192a46 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +To style the submit button, you can use an _attribute_ selector, which selects an element based on the given attribute value. Here is an example: + +```css +input[name="password"] +``` + +The above selects `input` elements with a `name` attribute value of `password`. + +Now, use the attribute selector to style the submit button with a `display` of `block`, and a `width` of `60%`. + +# --hints-- + +You should use an attribute selector of `input[type="submit"]` to style the submit button. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')); +``` + +You should give the submit button a `display` of `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.display, 'block'); +``` + +You should give the submit button a `width` of `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md new file mode 100644 index 00000000000000..bb6914a26f9d63 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md @@ -0,0 +1,145 @@ +--- +id: 60ffe7d8aae62c05bcc9e7eb +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +With a `display` of `block` the submit button sits flush against the left edge of its parent. + +Use the same technique used to center the `form` to center the submit button. + +# --hints-- + +You should give the submit button a `margin` of `0 auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '0px auto'); +``` + +You should not give the submit button a `min-width` or `max-width`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.maxWidth); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md new file mode 100644 index 00000000000000..8f16fbf6753bc0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md @@ -0,0 +1,143 @@ +--- +id: 60ffe8a5ceb0e90618db06d9 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +To make the submit button look more in line with the rest of the form, give it the same `height` as the other fields (`2em`). Also, increase the `font-size` to `1.1rem`. + +# --hints-- + +You should give the submit button a `height` of `2em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.height, '2em'); +``` + +You should give the submit button a `font-size` of `1.1rem`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.fontSize, '1.1rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md new file mode 100644 index 00000000000000..57533a264371f2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md @@ -0,0 +1,145 @@ +--- +id: 60ffe947a868ec068f7850f6 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +To make the submit button appear more distinct, give it a `background-color` of `#3b3b4f`, and a `border-color` of `white`. + +# --hints-- + +You should give the submit button a `background-color` of `#3b3b4f`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.backgroundColor, 'rgb(59, 59, 79)'); +``` + +You should give the submit button a `border-color` of `white`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.borderColor, 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + height: 2em; + font-size: 1.1rem; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md new file mode 100644 index 00000000000000..d128e7ee0c49ca --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md @@ -0,0 +1,150 @@ +--- +id: 60ffe9cb47809106eda2f2c9 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Lastly, for the submit button, you want to separate it from the `fieldset` above, and adjust its width to never be below `300px`. + +Change the `margin` property to include `1em` on the top and bottom, and set the width as described above. + +# --hints-- + +You should not change the `width` property. Use the `min-width` property. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%'); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth); +``` + +You should use the existing `margin` property to include `1em` on the top and bottom. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '1em auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md new file mode 100644 index 00000000000000..fab1f7c57ab52d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md @@ -0,0 +1,151 @@ +--- +id: 60ffec2825da1007509ddd06 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Most browsers inject their own default CSS properties and values for different elements. If you look closely, you might be able to notice the file `input` is smaller than the other text `input` elements. By default, a `padding` of `1px 2px` is given to `input` elements you can type in. + +Using another attribute selector, style the `input` with a `type` of `file` to be the same padding as the other `input` elements. + +# --hints-- + +You should use an attribute selector to style the `input` element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="file"]')); +``` + +You should give the `input[type="file"]` a `padding` of `1px 2px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.padding, '1px 2px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md new file mode 100644 index 00000000000000..e6421291d8d0d1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md @@ -0,0 +1,152 @@ +--- +id: 60ffecefac971607ae73c60f +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Speaking of `padding`, the submit button is sitting at the bottom of the `form` element. Add `2em` of `padding` only to the bottom of the `form`. + +# --hints-- + +You should use the `padding-bottom` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom); +``` + +You should give the `padding-bottom` a value of `2em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +--fcc-editable-region-- +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + +} +--fcc-editable-region-- + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md new file mode 100644 index 00000000000000..a80d95e23e04e4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md @@ -0,0 +1,284 @@ +--- +id: 60ffefd6479a3d084fb77cbc +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Last, but not least, change the text color of the `terms and conditions` link to `#dfdfe2`. + +Well done! You have completed the final part of the _Registration Form_ practice project. + +# --hints-- + +You should use an `a` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('a')); +``` + +You should give the `a` element a `color` of `#dfdfe2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +# --solutions-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +a { + color: #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md new file mode 100644 index 00000000000000..2c2494158b86b6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md @@ -0,0 +1,112 @@ +--- +id: 60b69a66b6ddb80858c51578 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Start by setting up your HTML structure. Add a `` declaration and an `html` element. Within the `html` element, add a `head` element and a `body` element. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(/html\s*>/gi)); +``` + +Your `DOCTYPE` declaration should be at the beginning of your HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +The `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +The `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +The `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md new file mode 100644 index 00000000000000..55d7b0a3e2d8c1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md @@ -0,0 +1,63 @@ +--- +id: 60b69a66b6ddb80858c51579 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Within your `head` element, add a `meta` tag with the `charset` attribute set to `utf-8`. Also add a `title` element with the text `Picasso Painting`. + +# --hints-- + +You should add exactly one `meta` element. + +```js +assert(document.querySelectorAll('meta').length === 1); +``` + +Your `meta` element should have a `charset` attribute. + +```js +assert(document.querySelector('meta')?.getAttribute('charset')); +``` + +Your `charset` attribute should be set to `utf-8`. + +```js +assert(document.querySelector('meta')?.getAttribute('charset') === 'utf-8'); +``` + +You should add exactly one `title` element. + +```js +assert(document.querySelectorAll('title').length === 1); +``` + +Your `title` element should have the text `Picasso Painting`. Note that spelling and casing matter. + +```js +assert(document.querySelector('title')?.innerText === 'Picasso Painting'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md new file mode 100644 index 00000000000000..91295269f83afc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md @@ -0,0 +1,58 @@ +--- +id: 60b69a66b6ddb80858c5157a +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +FontAwesome is a library of SVG-powered icons, many of which are freely available to use. You will be using some of these icons in this project, so you will need to link the external stylesheet to your HTML. + +Add a `link` element with a `rel` of `stylesheet` and an `href` of `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. + +# --hints-- + +You should add another `link` element. + +```js +// We set this to 1 because the CSS link is stripped from the code by our parser. +assert(document.querySelectorAll('link').length === 1); +``` + +Your `link` element should have a `rel` of `stylesheet`. + +```js +assert(document.querySelector('link')?.getAttribute('rel') === 'stylesheet'); +``` + +Your `link` element should have an `href` of +`https://use.fontawesome.com/releases/v5.8.2/css/all.css`. + +```js +assert(document.querySelectorAll('link')?.[0]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md new file mode 100644 index 00000000000000..ccc5eb33759d98 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md @@ -0,0 +1,50 @@ +--- +id: 60b69a66b6ddb80858c5157b +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +To get your painting started, give your `body` element a `background-color` of `rgb(184, 132, 46)`. + +# --hints-- + +You should use the `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` element should have the `background-color` property set to `rgb (184, 132, 46)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + + + +``` + +```css + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md new file mode 100644 index 00000000000000..68d84a86cb9d53 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md @@ -0,0 +1,51 @@ +--- +id: 60b69a66b6ddb80858c5157c +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Within your body tag, add a `div` element. Give it an `id` of `back-wall`. + +# --hints-- + +You should add exactly 1 `div` element. + +```js +assert(document.querySelectorAll('div').length === 1); +``` + +Your `div` element should have the `id` value of `back-wall`. + +```js +assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md new file mode 100644 index 00000000000000..b41019e6447cf0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md @@ -0,0 +1,54 @@ +--- +id: 60b69a66b6ddb80858c5157d +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Use an id selector to give the `back-wall` element a `background-color` of `#8B4513`. + +# --hints-- + +You should use a `#back-wall` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); +``` + +Your `#back-wall` selector should have a `background-color` of `#8B4513`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md new file mode 100644 index 00000000000000..e3fade65fef04a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md @@ -0,0 +1,56 @@ +--- +id: 60b69a66b6ddb80858c5157e +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Give the `back-wall` element a `width` of `100%` and a `height` of `60%`. + +# --hints-- + +You should set the `width` of the `#back-wall` selector to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); +``` + +You should set the `height` of the `#back-wall` selector to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md new file mode 100644 index 00000000000000..39970a5e02cf48 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md @@ -0,0 +1,69 @@ +--- +id: 60b69a66b6ddb80858c5157f +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Typically, HTML is rendered in a top-down manner. Elements at the top of the code are positioned at the top of the page. However, many times you may want to move the elements to different positions. You can do this with the `position` attribute. + +Set the `position` attribute for the `back-wall` element to `absolute`. An `absolute` position takes the element out of that top-down document flow and allows you to adjust it relative to its container. + +When an element is manually positioned, you can shift its layout with `top`, `left`, `right`, and `bottom`. Set the `back-wall` to have a `top` value of `0`, and a `left` value of `0`. + + +# --hints-- + +Your `#back-wall` selector should have the `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); +``` + +Your `#back-wall` selector should have the `top` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); +``` + +Your `#back-wall` selector should have the `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md new file mode 100644 index 00000000000000..b8a2efb230f592 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md @@ -0,0 +1,59 @@ +--- +id: 60b69a66b6ddb80858c51580 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +The `z-index` property is used to create "layers" for your HTML elements. If you are familiar with image editing tools, you may have worked with layers before. This is a similar concept. + +Elements with a higher `z-index` value will appear to be layered on top of elements with a lower `z-index` value. This can be combined with the positioning in the previous lesson to create unique effects. + +Since the `back-wall` element will need to appear "behind" the other elements you will be creating, give the `back-wall` element a `z-index` of `-1`. + +# --hints-- + +Your `#back-wall` selector should have the `z-index` property set to `-1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md new file mode 100644 index 00000000000000..dc1621c5eaf7a9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md @@ -0,0 +1,68 @@ +--- +id: 60b69a66b6ddb80858c51581 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below your `back-wall` element, create a `div` with a `class` of `characters`. This is where you will be creating your painting's characters. + +# --hints-- + +You should only add one new `div` element. + +```js +assert(document.querySelectorAll('div').length === 2); +``` + +Your new `div` element should come after your `#back-wall` element. + +```js +assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); +``` + +Your new `div` element should have the `class` set to `characters`. + +```js +assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+ --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md new file mode 100644 index 00000000000000..17137a95e3d7b0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md @@ -0,0 +1,70 @@ +--- +id: 60b69a66b6ddb80858c51582 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Inside that `characters` element, create another `div` with an `id` of `offwhite-character`. + +# --hints-- + +You should only create 1 additional `div` element. + +```js +assert(document.querySelectorAll('div').length === 3); +``` + +Your new `div` element should be nested in your `.characters` element. + +```js +assert(document.querySelector('.characters div')); +``` + +Your new `div` element should have an `id` of `offwhite-character`. + +```js +assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md new file mode 100644 index 00000000000000..ce246f4cc8e4d8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md @@ -0,0 +1,84 @@ +--- +id: 60b69a66b6ddb80858c51583 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Create four `div` elements inside your `offwhite-character` element. Give those `div` elements the following `id` values, in order: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. + +# --hints-- + +You should add four `div` elements within your `.offwhite-character` element. + +```js +assert(document.querySelectorAll('#offwhite-character div').length === 4); +``` + +Your first new `div` element should have the `id` of `white-hat`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); +``` + +Your second new `div` element should have the `id` of `black-mask`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); +``` + +Your third new `div` element should have the `id` of `gray-instrument`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); +``` + +Your fourth new `div` element should have the `id` of `tan-table`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md new file mode 100644 index 00000000000000..ee55e2f69be2bb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md @@ -0,0 +1,79 @@ +--- +id: 60b69a66b6ddb80858c51584 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +This character needs eyes. Create two `div` elements in the `black-mask` element. Give them the classes `eyes left` and `eyes right`, in that order. + +# --hints-- + +You should create 2 `div` elements within your `#black-mask` element. + +```js +assert(document.querySelectorAll('#black-mask div').length === 2); +``` + +Your first new `div` should have the classes `eyes` and `left`. + +```js +assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); +assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); +``` + +Your second new `div` should have the classes `eyes` and `right`. + +```js +assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); +assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md new file mode 100644 index 00000000000000..8bf16e74e07008 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md @@ -0,0 +1,74 @@ +--- +id: 60b69a66b6ddb80858c51585 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Create some "dots" for the instrument. Add five `div` elements within your `gray-instrument` element. Set the `class` of each to `black-dot`. + +# --hints-- + +You should have five new `div` elements within your `#gray-instrument` element. + +```js +assert(document.querySelectorAll('#gray-instrument div').length === 5); +``` + +Your five `div` elements should all have the class `black-dot`. + +```js +assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md new file mode 100644 index 00000000000000..e9e0ac1ec8e1d2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md @@ -0,0 +1,93 @@ +--- +id: 60b69a66b6ddb80858c51586 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Using an `id` selector, create a rule for your `offwhite-character` element. Give it a `width` of `300px`, a `height` of `550px`, and a `background-color` of `GhostWhite`. + +# --hints-- + +You should use the `#offwhite-character` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); +``` + +Your `#offwhite-character` should have a `width` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); +``` + +Your `#offwhite-character` should have a `height` property set to `550px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); +``` + +Your `#offwhite-character` should have a `background-color` property set to `GhostWhite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md new file mode 100644 index 00000000000000..5db936805c1863 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md @@ -0,0 +1,91 @@ +--- +id: 60b69a66b6ddb80858c51587 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Move the `offwhite-character` into place by giving it a `position` of `absolute`, a `top` value of `20%`, and a `left` value of `17.5%`. + +# --hints-- + +Your `#offwhite-character` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); +``` + +Your `#offwhite-character` selector should have a `top` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); +``` + +Your `#offwhite-character` selector should have a `left` property set to `17.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md new file mode 100644 index 00000000000000..f63613b9cf9d31 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md @@ -0,0 +1,102 @@ +--- +id: 60b69a66b6ddb80858c51588 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Using an `id` selector, style your `white-hat` element. Give it a `width` and `height` of `0`, and a `border-style` of `solid`. + +# --hints-- + +You should use a `#white-hat` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); +``` + +Your `#white-hat` selector should have a `width` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); +``` + +Your `#white-hat` selector should have a `height` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); +``` + +Your `#white-hat` selector should have a `border-style` property set to `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md new file mode 100644 index 00000000000000..c0e3af83307c0f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md @@ -0,0 +1,88 @@ +--- +id: 60b69a66b6ddb80858c51589 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +That does not look quite right. Set a `border-width` of `0 120px 140px 180px` to size the hat properly. + +# --hints-- + +Your `#white-hat` selector should have a `border-width` property set to `0 120px 140px 180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md new file mode 100644 index 00000000000000..1ca1213abbb0f5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md @@ -0,0 +1,107 @@ +--- +id: 60b69a66b6ddb80858c5158a +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Now you have a large box. Give it a `border-top-color`, `border-right-color`, and `border-left-color` of `transparent`. Set the `border-bottom-color` to `GhostWhite`. This will make it look more like a hat. + +# --hints-- + +Your `#white-hat` selector should have a `border-top-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); +``` + +Your `#white-hat` selector should have a `border-right-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); +``` + +Your `#white-hat` selector should have a `border-left-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); +``` + +Your `#white-hat` selector should have a `border-bottom-color` property set to `GhostWhite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md new file mode 100644 index 00000000000000..bead4697825b97 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md @@ -0,0 +1,105 @@ +--- +id: 60b69a66b6ddb80858c5158b +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Give the hat a `position` of `absolute`, a `top` value of `-140px`, and a `left` value of `0`. + +# --hints-- + +Your `#white-hat` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); +``` + +Your `#white-hat` selector should have a `top` property set to `-140px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); +``` + +Your `#white-hat` selector should have a `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md new file mode 100644 index 00000000000000..5c5c74f64a20c8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md @@ -0,0 +1,116 @@ +--- +id: 60b69a66b6ddb80858c5158c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Using an `id` selector, create a rule for your `black-mask` element. Give it a `width` of `100%`, a `height` of `50px`, and a `background-color` of `rgb(45, 31, 19)`. + +# --hints-- + +You should have a `#black-mask` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); +``` + +Your `#black-mask` selector should have a `width` property set to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); +``` + +Your `#black-mask` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); +``` + +Your `#black-mask` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md new file mode 100644 index 00000000000000..b273157bdb7a21 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md @@ -0,0 +1,114 @@ +--- +id: 60b69a66b6ddb80858c5158d +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Give the mask a `position` of `absolute`, and a `top` and `left` value of `0`. + +# --hints-- + +Your `#black-mask` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); +``` + +Your `#black-mask` selector should have a `top` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); +``` + +Your `#black-mask` selector should have a `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md new file mode 100644 index 00000000000000..c3e0e38be1b3fa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md @@ -0,0 +1,105 @@ +--- +id: 60b69a66b6ddb80858c5158e +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +To ensure you can see the mask, give it a `z-index` of `1`. + +# --hints-- + +Your `#black-mask` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md new file mode 100644 index 00000000000000..fc0fae2e7a9044 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md @@ -0,0 +1,126 @@ +--- +id: 60b69a66b6ddb80858c5158f +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Using an `id` selector, give your `gray-instrument` element a `width` of `15%`, a `height` of `40%`, and a `background-color` of `rgb(167, 162, 117)`. + +# --hints-- + +You should have a `#gray-instrument` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); +``` + +Your `#gray-instrument` selector should have a `width` property set to `15%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); +``` + +Your `#gray-instrument` selector should have a `height` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); +``` + +Your `#gray-instrument` selector should have a `background-color` property set to `rgb(167, 162, 117)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md new file mode 100644 index 00000000000000..a7cbed1d57b168 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md @@ -0,0 +1,124 @@ +--- +id: 60b69a66b6ddb80858c51590 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Now move it into place with a `position` of `absolute`, a `top` value of `50px`, and a `left` value of `125px`. + +# --hints-- + +Your `#gray-instrument` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); +``` + +Your `#gray-instrument` selector should have a `top` value set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); +``` + +Your `#gray-instrument` selector should have a `left` value set to `125px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md new file mode 100644 index 00000000000000..5d6ef9fbde837d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md @@ -0,0 +1,115 @@ +--- +id: 60b69a66b6ddb80858c51591 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Set the `z-index` to `1`. + +# --hints-- + +Your `#gray-instrument` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md new file mode 100644 index 00000000000000..b10e323676844e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md @@ -0,0 +1,136 @@ +--- +id: 60b69a66b6ddb80858c51592 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Use a class selector to create a rule for the `black-dot` elements. Set the `width` to `10px`, the `height` to `10px`, and the `background-color` to `rgb(45, 31, 19)`. + +# --hints-- + +You should have a `.black-dot` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); +``` + +Your `.black-dot` selector should have a `width` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); +``` + +Your `.black-dot` selector should have a `height` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); +``` + +Your `.black-dot` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md new file mode 100644 index 00000000000000..22348e36dba01e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md @@ -0,0 +1,125 @@ +--- +id: 60b69a66b6ddb80858c51593 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +These dots are just a little too square. Give the `black-dot` class a `border-radius` of `50%` to fix it. + +# --hints-- + +Your `.black-dot` selector should have a `border-radius` property set to `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md new file mode 100644 index 00000000000000..dbfebcb75381c3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md @@ -0,0 +1,135 @@ +--- +id: 60b69a66b6ddb80858c51594 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Move the dots into place by setting the `display` to `block`, the `margin` to `auto`, and the `margin-top` to `65%`. + +# --hints-- + +Your `.black-dot` selector should have a `display` property set to `block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); +``` + +Your `.black-dot` selector should have a `margin` property set to `auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); +``` + +Your `.black-dot` selector should have a `margin-top` property set to `65%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md new file mode 100644 index 00000000000000..f56993c187a85a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md @@ -0,0 +1,146 @@ +--- +id: 60b69a66b6ddb80858c51595 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Use an id selector to style your `tan-table` element. Give it a `width` of `450px`, a `height` of `140px`, and a `background-color` of `#D2691E`. + +# --hints-- + +You should have a `#tan-table` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); +``` + +Your `#tan-table` selector should have a `width` property set to `450px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); +``` + +Your `#tan-table` selector should have a `height` property set to `140px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); +``` + +Your `#tan-table` selector should have a `background-color` property set to `#D2691E`. + +```js +assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + + --fcc-editable-region-- + + --fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md new file mode 100644 index 00000000000000..27ff5626f51292 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md @@ -0,0 +1,144 @@ +--- +id: 60b69a66b6ddb80858c51596 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Move the table into place by giving it a `position` of `absolute`, a `top` value of `275px`, and a `left` value of `15px`. + +# --hints-- + +Your `#tan-table` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); +``` + +Your `#tan-table` selector should have a `top` property set to `275px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); +``` + +Your `#tan-table` selector should have a `left` property set to `15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md new file mode 100644 index 00000000000000..ac81ebf4ae2308 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md @@ -0,0 +1,135 @@ +--- +id: 60b69a66b6ddb80858c51597 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Give the table a `z-index` of `1`. + +# --hints-- + +Your `#tan-table` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md new file mode 100644 index 00000000000000..6a179c25d3fa27 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md @@ -0,0 +1,142 @@ +--- +id: 60b69a66b6ddb80858c51598 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +After your `div#offwhite-character` element, add a `div` with the `id` of `black-character`. + +# --hints-- + +You should add a new `div` element within the `.characters` element. + +```js +assert(document.querySelectorAll('.characters > div')?.length === 2); +``` + +Your new `div` element should have the `id` set to `black-character`. + +```js +assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md new file mode 100644 index 00000000000000..5d21944a5724fd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md @@ -0,0 +1,156 @@ +--- +id: 60b69a66b6ddb80858c51599 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Within your new `black-character` element, add three `div` elements with the following `id` values, in order: `black-hat`, `gray-mask`, `white-paper`. + +# --hints-- + +You should have three `div` elements within your `#black-character` element. + +```js +assert(document.querySelectorAll('#black-character > div')?.length === 3); +``` + +Your first new `div` element should have the `id` set to `black-hat`. + +```js +assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); +``` + +Your second new `div` element should have the `id` set to `gray-mask`. + +```js +assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); +``` + +Your third new `div` element should have the `id` set to `white-paper`. + +```js +assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md new file mode 100644 index 00000000000000..b2366247374ba5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md @@ -0,0 +1,158 @@ +--- +id: 60b69a66b6ddb80858c5159a +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +The mask needs eyes. Within your `gray-mask` element, add two `div` elements. The first should have the `class` set to `eyes left`, and the second should have the `class` set to `eyes right`. + +# --hints-- + +You should have two `div` elements within your `#gray-mask` element. + +```js +assert(document.querySelectorAll('#gray-mask > div')?.length === 2); +``` + +Your first new `div` element should have the `class` set to `eyes left`. + +```js +const first = document.querySelectorAll('#gray-mask > div')?.[0]; +assert(first?.classList?.contains('eyes')); +assert(first?.classList?.contains('left')); +``` + +Your second new `div` element should have the `class` set to `eyes right`. + +```js +const second = document.querySelectorAll('#gray-mask > div')?.[1]; +assert(second?.classList?.contains('eyes')); +assert(second?.classList?.contains('right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md new file mode 100644 index 00000000000000..b98a9cf0d51d79 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md @@ -0,0 +1,161 @@ +--- +id: 60b69a66b6ddb80858c5159b +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Time to use some FontAwesome icons. + +The `i` element is used for idiomatic text, or text that is separate from the "normal" text content. This could be for _italic_ text, such as scientific terms, or for icons like those provided by FontAwesome. + +Within your `white-paper` element, add four `i` elements. Give them all a `class` value of `fas fa-music`. + +This special class is how FontAwesome determines which icon to load. `fas` indicates the category of icons (FontAwesome Solid, here), while `fa-music` selects the specific icon. + +# --hints-- + +You should have four new `i` elements within your `#white-paper` element. + +```js +assert(document.querySelectorAll('#white-paper > i')?.length === 4); +``` + +All of your `i` elements should have the `class` set to `fas fa-music`. + +```js +const icons = document.querySelectorAll('#white-paper > i'); +for (const icon of icons) { + assert(icon.classList?.contains('fas')); + assert(icon.classList?.contains('fa-music')); +}; +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md new file mode 100644 index 00000000000000..242c3caa6c0b3d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md @@ -0,0 +1,169 @@ +--- +id: 60b69a66b6ddb80858c5159c +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Use an `id` selector to create a rule for your `black-character` element. Set the `width` to `300px`, the `height` to `500px`, and the `background-color` to `rgb(45, 31, 19)`. + +# --hints-- + +You should use a `#black-character` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')); +``` + +Your `#black-character` selector should have a `width` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); +``` + +Your `#black-character` selector should have a `height` property set to `500px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); +``` + +Your `#black-character` selector should have a `background-color` property to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md new file mode 100644 index 00000000000000..3d874506421a85 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md @@ -0,0 +1,167 @@ +--- +id: 60b69a66b6ddb80858c5159d +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Move the `black-character` element into place by setting the `position` to `absolute`, the `top` to `30%`, and the `left` to `59%`. + +# --hints-- + +Your `#black-character` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); +``` + +Your `#black-character` selector should have a `top` property set to `30%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); +``` + +Your `#black-character` selector should have a `left` property set to `59%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md new file mode 100644 index 00000000000000..c664c139b70f9d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md @@ -0,0 +1,178 @@ +--- +id: 60b69a66b6ddb80858c5159e +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Use an `id` selector to create a rule for your `black-hat` element. Give it a `width` of `0`, a `height` of `0`, and a `border-style` of `solid`. + +# --hints-- + +You should have a `#black-hat` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); +``` + +Your `#black-hat` selector should have a `width` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); +``` + +Your `#black-hat` selector should have a `height` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); +``` + +Your `#black-hat` selector should have a `border-style` property set to `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md new file mode 100644 index 00000000000000..4ec131261bbb16 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md @@ -0,0 +1,183 @@ +--- +id: 60b69a66b6ddb80858c5159f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Just like with your `white-hat`, you should style the border for the `black-hat` element. Give it a `border-top-color`, `border-right-color`, and `border-bottom-color` of `transparent`. Set the `border-left-color` to `rgb(45, 31, 19)`. + +# --hints-- + +Your `#black-hat` selector should have a `border-top-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); +``` + +Your `#black-hat` selector should have a `border-right-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); +``` + +Your `#black-hat` selector should have a `border-bottom-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); +``` + +Your `#black-hat` selector should have a `border-left-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md new file mode 100644 index 00000000000000..9d9ea3a43af0b5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md @@ -0,0 +1,181 @@ +--- +id: 60b69a66b6ddb80858c515a0 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Now position the `black-hat` element. Give it a `position` of `absolute`, with a `top` of `-150px` and a `left` of `0`. + +# --hints-- + +Your `#black-hat` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); +``` + +Your `#black-hat` selector should have a `top` property set to `-150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); +``` + +Your `#black-hat` selector should have a `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md new file mode 100644 index 00000000000000..9ab114b49bebfc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md @@ -0,0 +1,192 @@ +--- +id: 60b69a66b6ddb80858c515a1 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Using an `id` selector, style the `gray-mask` element. Give it a `width` of `150px`, a `height` of `150px`, and a `background-color` of `rgb(167, 162, 117)`. + +# --hints-- + +You should have a `#gray-mask` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); +``` + +Your `#gray-mask` selector should have a `width` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); +``` + +Your `#gray-mask` selector should have a `height` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') +``` + +Your `#gray-mask` selector should have a `background-color` property set to `rgb(167, 162, 117)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md new file mode 100644 index 00000000000000..d4a4c61f5f1818 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md @@ -0,0 +1,190 @@ +--- +id: 60b69a66b6ddb80858c515a2 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Position the `gray-mask` by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`. + +# --hints-- + +Your `#gray-mask` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); +``` + +Your `#gray-mask` selector should have a `top` property set to `-10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); +``` + +Your `#gray-mask` selector should have a `left` property set to `70px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md new file mode 100644 index 00000000000000..f2cd5cabe3b386 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md @@ -0,0 +1,201 @@ +--- +id: 60b69a66b6ddb80858c515a3 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Using an `id` selector, create a rule for the `white-paper` element. Set the `width` to `400px`, the `height` to `100px`, and the `background-color` to `GhostWhite`. + +# --hints-- + +You should have a `#white-paper` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); +``` + +Your `#white-paper` selector should have a `width` property set to `400px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); +``` + +Your `#white-paper` selector should have a `height` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); +``` + +Your `#white-paper` selector should have a `background-color` property set to `GhostWhite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md new file mode 100644 index 00000000000000..09fb494c5cb59b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md @@ -0,0 +1,199 @@ +--- +id: 60b69a66b6ddb80858c515a4 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Give the `white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place. + +# --hints-- + +Your `#white-paper` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); +``` + +Your `#white-paper` selector should have a `top` property set to `250px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); +``` + +Your `#white-paper` selector should have a `left` property set to `-150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md new file mode 100644 index 00000000000000..84cf6626a6ad7a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md @@ -0,0 +1,190 @@ +--- +id: 60b69a66b6ddb80858c515a5 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Set the `z-index` of the `white-paper` to `1`. + +# --hints-- + +Your `#white-paper` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md new file mode 100644 index 00000000000000..a710c91f66bd6a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md @@ -0,0 +1,211 @@ +--- +id: 60b69a66b6ddb80858c515a6 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +FontAwesome icons come with their own styling to define the icon. However, you can still set the styling yourself as well, to change things like the color and size. For now, use a `class` selector to target your `fa-music` icons. Set the `display` to `inline-block`, the `margin-top` to `8%`, and the `margin-left` to `13%`. + +# --hints-- + +You should have a `.fa-music` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); +``` + +Your `.fa-music` selector should have a `display` property set to `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); +``` + +Your `.fa-music` selector should have a `margin-top` property set to `8%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); +``` + +Your `.fa-music` selector should have a `margin-left` property set to `13%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md new file mode 100644 index 00000000000000..69ca38a023520c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md @@ -0,0 +1,217 @@ +--- +id: 60b69a66b6ddb80858c515a7 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Below your `black-character` element, add two new `div` elements. These will be the shawl. Give both of them a `class` of `blue`. Then give the first one an `id` of `blue-left`, and the second an `id` of `blue-right`. + +# --hints-- + +You should have two new `div` elements within your `.characters` element. + +```js +assert(document.querySelectorAll('.characters > div')?.length === 4); +``` + +Your two new `div` elemnts should have the `class` set to `blue`. + +```js +const divs = document.querySelectorAll('.characters > div'); +assert(divs?.[2]?.classList?.contains('blue')) +assert(divs?.[3]?.classList?.contains('blue')) +``` + +Your first new `div` should have an `id` of `blue-left`. + +```js +assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); +``` + +Your second new `div` should have an `id` of `blue-right`. + +```js +assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md new file mode 100644 index 00000000000000..d9b322e0482a8e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md @@ -0,0 +1,207 @@ +--- +id: 60b69a66b6ddb80858c515a8 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Use a `class` selector to target your new `blue` elements. Set the `background-color` to `#1E90FF`. + +# --hints-- + +You should have a `.blue` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')); +``` + +Your `.blue` selector should have a `background-color` property set to `#1E90FF`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md new file mode 100644 index 00000000000000..ae9e6cfc3be391 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md @@ -0,0 +1,217 @@ +--- +id: 60b69a66b6ddb80858c515a9 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Select the `blue-left` element with an `id` selector. Give it a `width` of `500px` and a `height` of `300px`. + +# --hints-- + +You should have a `#blue-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); +``` + +Your `#blue-left` selector should have a `width` property set to `500px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); +``` + +Your `#blue-left` selector should have a `height` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md new file mode 100644 index 00000000000000..89ddb101527750 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md @@ -0,0 +1,220 @@ +--- +id: 60b69a66b6ddb80858c515aa +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Now set the `position` to `absolute`, the `top` to `20%`, and the `left` to `20%`. + +# --hints-- + +Your `#blue-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); +``` + +Your `#blue-left` selector should have a `top` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); +``` + +Your `#blue-left` selector should have a `left` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md new file mode 100644 index 00000000000000..8778c7dcc57bcd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md @@ -0,0 +1,225 @@ +--- +id: 60b69a66b6ddb80858c515ab +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Next, target your `blue-right` element with an `id` selector. Set the `width` to `400px` and the `height` to `300px`. + +# --hints-- + +You should have a `#blue-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); +``` + +Your `#blue-right` selector should have a `width` property set to `400px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); +``` + +Your `#blue-right` selector should have a `height` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md new file mode 100644 index 00000000000000..07ff223f6367cb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md @@ -0,0 +1,228 @@ +--- +id: 60b69a66b6ddb80858c515ac +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Give the `blue-right` the correct positioning with `position` set to `absolute`, `top` set to `50%`, and `left` set to `40%`. + +# --hints-- + +Your `#blue-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); +``` + +Your `#blue-right` selector should have a `top` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); +``` + +Your `#blue-right` selector should have a `left` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md new file mode 100644 index 00000000000000..637a48480f7c48 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md @@ -0,0 +1,225 @@ +--- +id: 60b69a66b6ddb80858c515ad +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Below your `blue` elements, add another `div`. Give it the `id` value of `orange-character`. + +# --hints-- + +You should have a new `div` element within your `characters` element. + +```js +assert(document.querySelectorAll('.characters > div')?.length === 5); +``` + +Your new `div` element should have the `id` set to `orange-character`. + +```js +assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md new file mode 100644 index 00000000000000..c1c59b688a308f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md @@ -0,0 +1,245 @@ +--- +id: 60b69a66b6ddb80858c515ae +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Within that `orange-character` element, add four `div` elements. Give them the `id` values of `black-round-hat`, `eyes-div`, `triangles`, and `guitar`, in order. + +# --hints-- + +You should have four new `div` elements within your `orange-character` element. + +```js +assert(document.querySelectorAll('#orange-character > div')?.length === 4); +``` + +Your first new `div` element should have an `id` set to `black-round-hat`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); +``` + +Your second new `div` element should have an `id` set to `eyes-div`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); +``` + +Your third new `div` element should have an `id` set to `triangles`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); +``` + +Your fourth new `div` element should have an `id` set to `guitar`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md new file mode 100644 index 00000000000000..05b0be2b25522e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md @@ -0,0 +1,240 @@ +--- +id: 60b69a66b6ddb80858c515af +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +The `eyes-div` element should hold some eyes. Add two `div` elements inside. Give the first a `class` of `eyes left`, and give the second a `class` of `eyes right`. + +# --hints-- + +You should have two `div` elements nested in your `eyes-div`. + +```js +assert(document.querySelectorAll('#eyes-div > div')?.length === 2); +``` + +The first new `div` should have the `class` set to `eyes left`. + +```js +assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); +assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); +``` + +The second new `div` should have the `class` set to `eyes right`. + +```js +assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); +assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md new file mode 100644 index 00000000000000..ca5c36c7e978c7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md @@ -0,0 +1,238 @@ +--- +id: 60b69a66b6ddb80858c515b0 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Within the `triangles` div, you will need to add the elements that will become your triangles. Create thirty `div` elements and give each of them the class `triangle`. + +# --hints-- + +You should have 30 `div` elements within your `triangles` element. + +```js +assert(document.querySelectorAll('#triangles > div')?.length === 30); +``` + +All 30 of your new `div` elements should have the `class` set to `triangle`. + +```js +const divDivDiv = document.querySelectorAll('#triangles > div'); +for (const div of divDivDiv) { + assert(div?.classList?.contains('triangle')); +} +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md new file mode 100644 index 00000000000000..d3cebcda48e45a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md @@ -0,0 +1,298 @@ +--- +id: 60b69a66b6ddb80858c515b1 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Within the `guitar` element, create three `div` elements. Give the first two a `class` value of `guitar`. Then give the first an `id` of `guitar-left`, and the second an `id` of `guitar-right`. Add an `id` to the third `div` with the value `guitar-neck`. + +The third `div` should not have the `guitar` class. + +# --hints-- + +You should have three new `div` elements within your `guitar` element. + +```js +assert(document.querySelectorAll('#guitar > div')?.length === 3); +``` + +Your first new `div` should have a `class` set to `guitar`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); +``` + +Your first new `div` should have an `id` set to `guitar-left`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); +``` + +Your second new `div` should have a `class` set to `guitar`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); +``` + +Your second new `div` should have an `id` set to `guitar-right`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); +``` + +Your third new `div` should have an `id` set to `guitar-neck`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); +``` + +You should not give the third new `div` a `class` of `guitar`. + +```js +assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md new file mode 100644 index 00000000000000..dabfe48af95fb7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md @@ -0,0 +1,281 @@ +--- +id: 60b69a66b6ddb80858c515b2 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Use another FontAwesome icon for your `guitar`. Inside both the `guitar-left` and `guitar-right` elements, add an `i` element and give it a `class` of `fas fa-bars`. + +# --hints-- + +Within your `guitar-left` element, you should add an `i` element. + +```js +assert(document.querySelectorAll('#guitar-left > i')?.length === 1); +``` + +Within your `guitar-right` element, you should add an `i` element. + +```js +assert(document.querySelectorAll('#guitar-right > i')?.length === 1); +``` + +Your two new `i` elements should have the `class` set to `fas fa-bars`. + +```js +assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); +assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); +assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); +assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- +
+ +
+
+ +
+ --fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md new file mode 100644 index 00000000000000..9b136991bffaa5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md @@ -0,0 +1,287 @@ +--- +id: 60b69a66b6ddb80858c515b3 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Select your `orange-character` element with an `id` selector. Give it a `width` of `250px`, a `height` of `550px`, and a `background-color` of `rgb(240, 78, 42)`. + +# --hints-- + +You should have an `#orange-character` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); +``` + +Your `#orange-character` selector should have a `width` property set to `250px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); +``` + +Your `#orange-character` selector should have a `height` property set to `550px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); +``` + +Your `#orange-character` selector should have a `background-color` property set to `rgb(240, 78, 42)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md new file mode 100644 index 00000000000000..f92832aef81d9d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md @@ -0,0 +1,285 @@ +--- +id: 60b69a66b6ddb80858c515b4 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Give the `orange-character` a `position` of `absolute`, a `top` of `25%`, and a `left` of `40%`. + +# --hints-- + +Your `#orange-character` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); +``` + +Your `#orange-character` selector should have a `top` property set to `25%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); +``` + +Your `#orange-character` selector should have a `left` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md new file mode 100644 index 00000000000000..41a66838da8e70 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md @@ -0,0 +1,296 @@ +--- +id: 60b69a66b6ddb80858c515b5 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Style your `black-round-hat` element with an `id` selector. Set the `width` to `180px`, the `height` to `150px`, and the `background-color` to `rgb(45, 31, 19)`. + +# --hints-- + +You should have a `#black-round-hat` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); +``` + +Your `#black-round-hat` selector should have a `width` property set to `180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); +``` + +Your `#black-round-hat` selector should have a `height` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); +``` + +Your `#black-round-hat` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md new file mode 100644 index 00000000000000..bc32b3da8af573 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md @@ -0,0 +1,282 @@ +--- +id: 60b69a66b6ddb80858c515b6 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +The `black-round-hat` should probably be round. Give it a `border-radius` of `50%` to fix this. + +# --hints-- + +Your `#black-round-hat` selector should have a `border-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md new file mode 100644 index 00000000000000..684ddb05638b91 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md @@ -0,0 +1,295 @@ +--- +id: 60b69a66b6ddb80858c515b7 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Move the `black-round-hat` into place with a `position` of `absolute`, a `top` of `-100px`, and a `left` of `5px`. + +# --hints-- + +Your `#black-round-hat` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); +``` + +Your `#black-round-hat` selector should have a `top` property set to `-100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); +``` + +Your `#black-round-hat` selector should have a `left` property set to `5px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md new file mode 100644 index 00000000000000..c3a9f1d9ab43e6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md @@ -0,0 +1,286 @@ +--- +id: 60b69a66b6ddb80858c515b8 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Put the `black-round-hat` on the correct layer with a `z-index` of `-1`. + +# --hints-- + +Your `#black-round-hat` selector should have a `z-index` property set to `-1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md new file mode 100644 index 00000000000000..62a066895360fa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md @@ -0,0 +1,301 @@ +--- +id: 60b69a66b6ddb80858c515b9 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Use an `id` selector to create a rule for your `eyes-div` element. Set the `width` to `180px` and the `height` to `50px`. + +# --hints-- + +You should create an `#eyes-div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); +``` + +Your `#eyes-div` selector should have a `width` property set to `180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); +``` + +Your `#eyes-div` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md new file mode 100644 index 00000000000000..6e88b2914acd4d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md @@ -0,0 +1,304 @@ +--- +id: 60b69a66b6ddb80858c515ba +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Now move the `eyes-div` into position with `position` set to `absolute`, `top` set to `-40px`, and `left` set to `20px`. + +# --hints-- + +Your `#eyes-div` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); +``` + +Your `#eyes-div` selector should have a `top` property set to `-40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); +``` + +Your `#eyes-div` selector should have a `left` property set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md new file mode 100644 index 00000000000000..6bde742748f956 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md @@ -0,0 +1,295 @@ +--- +id: 60b69a66b6ddb80858c515bc +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Give the `eyes-div` a `z-index` of `3`. + +# --hints-- + +Your `#eyes-div` selector should have a `z-index` property set to `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md new file mode 100644 index 00000000000000..71aecaf68e695d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md @@ -0,0 +1,348 @@ +--- +id: 60b69a66b6ddb80858c515bd +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Now use a `class` selector to target `guitar`. This will style the two "halves" of your guitar. Set the `width` to `150px`, the `height` to `120px`, the `background-color` to `Goldenrod`, and the `border-radius` to `50%`. + +# --hints-- + +You should create a `.guitar` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')); +``` + +Your `.guitar` selector should have a `width` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); +``` + +Your `.guitar` selector should have a `height` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); +``` + +Your `.guitar` selector should have a `background-color` property set to `Goldenrod`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); +``` + +Your `.guitar` selector should have a `border-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md new file mode 100644 index 00000000000000..d86af8e1424c0f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md @@ -0,0 +1,337 @@ +--- +id: 60b69a66b6ddb80858c515be +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Select the `id` with value `guitar-left`, and set the `position` to `absolute` and the `left` to `0px`. + +# --hints-- + +You should create a new `#guitar-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); +``` + +Your `#guitar-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md new file mode 100644 index 00000000000000..906f2e34894887 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md @@ -0,0 +1,348 @@ +--- +id: 60b69a66b6ddb80858c515bf +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Select the `id` with value `guitar-right`, and also set `position` to `absolute`. This time, set `left` to `100px`. + +# --hints-- + +You should create a new `#guitar-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); +``` + +Your `#guitar-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); +``` + +Your `#guitar-right` selector should have a `left` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md new file mode 100644 index 00000000000000..3cb8fbddd8d96a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md @@ -0,0 +1,359 @@ +--- +id: 60b69a66b6ddb80858c515c0 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Now you need to move the bar icons into place. Create a `class` selector for the `fa-bars` class. Set the `display` to `block`, the `margin-top` to `30%`, and the `margin-left` to `40%`. + +# --hints-- + +You should create a `.fa-bars` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); +``` + +Your `.fa-bars` selector should have a `display` property set to `block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); +``` + +Your `.fa-bars` selector should have a `margin-top` property set to `30%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); +``` + +Your `.fa-bars` selector should have a `margin-left` property set to `30%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md new file mode 100644 index 00000000000000..a54bda5ecc9039 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md @@ -0,0 +1,365 @@ +--- +id: 60b69a66b6ddb80858c515c1 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Use an `id` selector to create a `guitar-neck` rule. Set the `width` to `200px`, the `height` to `30px`, and the `background-color` to `#D2691E`. + +# --hints-- + +You should create a `#guitar-neck` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); +``` + +Your `#guitar-neck` selector should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); +``` + +Your `#guitar-neck` selector should have a `height` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); +``` + +Your `#guitar-neck` selector should have a `background-color` property set to `#D2691E`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md new file mode 100644 index 00000000000000..ffed208de97880 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md @@ -0,0 +1,363 @@ +--- +id: 60b69a66b6ddb80858c515c2 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Now move the `guitar-neck` with a `position` of `absolute`, a `top` value of `45px`, and a `left` value of `200px`. + +# --hints-- + +Your `#guitar-neck` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); +``` + +Your `#guitar-neck` selector should have a `top` property set to `45px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); +``` + +Your `#guitar-neck` selector should have a `left` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md new file mode 100644 index 00000000000000..8716af059fcd06 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md @@ -0,0 +1,354 @@ +--- +id: 60b69a66b6ddb80858c515c3 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Give the `guitar-neck` a `z-index` of `3`. + +# --hints-- + +Your `#guitar-neck` selector should have a `z-index` property set to `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md new file mode 100644 index 00000000000000..571f7988ee9cd6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md @@ -0,0 +1,381 @@ +--- +id: 60b69a66b6ddb80858c515c4 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Time to style your `eyes` elements. Use a `class` selector to set the `width` to `35px`, the `height` to `20px`, the `background-color` to `#8B4513`, and the `border-radius` to `20px 50%`. + +# --hints-- + +You should create a `.eyes` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')); +``` + +Your `.eyes` selector should have a `width` property set to `35px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); +``` + +Your `.eyes` selector should have a `height` property set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); +``` + +Your `.eyes` selector should have a `background-color` property set to `#8B4513`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); +``` + +Your `.eyes` selector should have a `border-radius` property set to `20px 50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md new file mode 100644 index 00000000000000..ae3f6cd2287deb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md @@ -0,0 +1,382 @@ +--- +id: 60b69a66b6ddb80858c515c5 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Target the `class` with value `right` and set the `position` to `absolute`, `top` to `15px`, and `right` to `30px`. + +# --hints-- + +You should create a `.right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')); +``` + +Your `.right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); +``` + +Your `.right` selector should have a `top` property set to `15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); +``` + +Your `.right` selector should have a `right` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md new file mode 100644 index 00000000000000..dcbabcdb878b10 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md @@ -0,0 +1,388 @@ +--- +id: 60b69a66b6ddb80858c515c6 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +For the `class` with value `left`, create the selector and set the `position` to `absolute`, the `top` to `15px`, and the `left` to `30px`. + +# --hints-- + +You should create a new `.left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')); +``` + +Your `.left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); +``` + +Your `.left` selector should have a `top` property set to `15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); +``` + +Your `.left` selector should have a `left` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { +width: 150px; +height: 120px; +background-color: Goldenrod; +border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +.right { + position: absolute; + top: 15px; + right: 30px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md new file mode 100644 index 00000000000000..b561680d5017fc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md @@ -0,0 +1,739 @@ +--- +id: 60b69a66b6ddb80858c515c7 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +One last step. The FontAwesome icons are a little too small. Target all of them with a `class` selector for `fas`, and set the `font-size` to `30px`. + +With that, your Picasso painting is complete! + +# --hints-- + +You should create a `.fas` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fas')); +``` + +Your `.fas` selector should have a `font-size` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +.right { + position: absolute; + top: 15px; + right: 30px; +} + +.left { + position: absolute; + top: 15px; + left: 30px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +# --solutions-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +.right { + position: absolute; + top: 15px; + right: 30px; +} + +.left { + position: absolute; + top: 15px; + left: 30px; +} + +.fas { + font-size: 30px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md new file mode 100644 index 00000000000000..a5188d3c2b8100 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md @@ -0,0 +1,74 @@ +--- +id: 60b80da8676fb3227967a731 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Go ahead and link your CSS file now, even though you have not written any CSS yet. + +Add a `link` element with a `rel` of `stylesheet`, a `type` of `text/css`, and an `href` of `styles.css`. + +# --hints-- + + +Your code should have a `link` element. + +```js +assert.match(code, //i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / + + + + Picasso Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md new file mode 100644 index 00000000000000..4623a3131c09d2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md @@ -0,0 +1,312 @@ +--- +id: 60ba890832b4940f24d1936b +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Adjust the layout of the `triangle` elements with a `display` of `inline-block`. + +# --hints-- + +Your `.triangle` selector should have a `display` property set to `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md new file mode 100644 index 00000000000000..8cd02f39d880a9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md @@ -0,0 +1,326 @@ +--- +id: 60ba89123a445e0f5c9e4022 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Give your `triangle` elements the correct color. Set the `border-top-color`, `border-bottom-color`, and `border-left-color` to `transparent`. Set the `border-right-color` to `Gold`. + +# --hints-- + +Your `.triangle` selector should have a `border-top-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); +``` + +Your `.triangle` selector should have a `border-bottom-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); +``` + +Your `.triangle` selector should have a `border-left-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); +``` + +Your `.triangle` selector should have a `border-right-color` property set to `Gold`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md new file mode 100644 index 00000000000000..361b2ffc376947 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md @@ -0,0 +1,312 @@ +--- +id: 60ba8913f1704c0f7a8906b8 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Style the border of your `triangle` elements. Set the `border-style` to `solid` and the `border-width` to `42px 45px 45px 0`. + +# --hints-- + +Your `.triangle` selector should have a `border-style` property set to `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); +``` + +Your `.triangle` selector should have a `border-width` property set to `42px 45px 45px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md new file mode 100644 index 00000000000000..f7e92d7fa0d28c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md @@ -0,0 +1,315 @@ +--- +id: 60ba89146b25080f99ab54ad +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Create a `class` selector for your `triangle` elements. Set the `width` to `0` and the `height` to `0`. + +# --hints-- + +You should create a `.triangle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')); +``` + +Your `.triangle` selector should have a `width` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); +``` + +Your `.triangle` selector should have a `height` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md new file mode 100644 index 00000000000000..6fc2462a445fb0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md @@ -0,0 +1,310 @@ +--- +id: 60ba8914bab51f0fb8228e9c +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Target your `triangles` element with an `id` selector. Set the `width` to `250px` and the `height` to `550px`. + +# --hints-- + +You should add a `#triangles` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#triangles')); +``` + +Your `#triangles` selector should have a `width` property set to `250px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); +``` + +Your `#triangles` selector should have a `height` property set to `550px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md new file mode 100644 index 00000000000000..658d21853684e3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md @@ -0,0 +1,327 @@ +--- +id: 60ba929345ab0714a3743655 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Now use an `id` selector for `guitar`. Set the `width` to `100%`, and the `height` to `100px`. + +# --hints-- + +You should create a `#guitar` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')); +``` + +Your `#guitar` selector should have a `width` property set to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); +``` + +Your `#guitar` selector should have a `height` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md new file mode 100644 index 00000000000000..7abb6047ce00df --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md @@ -0,0 +1,330 @@ +--- +id: 60ba9296d4d6b414c1b10995 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +In the same `#guitar` selector, set the `position` to `absolute`, the `top` to `120px`, and the `left` to `0px`. + +# --hints-- + +Your `#guitar` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); +``` + +Your `#guitar` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); +``` + +Your `#guitar` selector should have a `left` property set to `0px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md new file mode 100644 index 00000000000000..29f21bbfc0def9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md @@ -0,0 +1,321 @@ +--- +id: 60ba92987c1e4914dfa7a0b9 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Give the `#guitar` rule a `z-index` of `3`. + +# --hints-- + +Your `#guitar` selector should have a `z-index` property set to `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md new file mode 100644 index 00000000000000..20ecc4ee123477 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md @@ -0,0 +1,164 @@ +--- +id: 60bad32219ebcb4a8810ac6a +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Set the `border-width` of the `black-hat` to `150px 0 0 300px`. + +# --hints-- + +Your `#black-hat` selector should have a `border-width` property set to `150px 0 0 300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md new file mode 100644 index 00000000000000..2bac65664c8414 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md @@ -0,0 +1,123 @@ +--- +id: 61fd5a93fd62bb35968adeab +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Set up your HTML with the `DOCTYPE`, `html`, `head`, and `body` elements. Give your `head` element the appropriate `meta` elements for the `charset` and `viewport`, a `title` element with an appropriate title, and a `link` element for your stylesheet. + +# --hints-- + +Your code should have a `` declaration. + +```js +assert(code.match(//i)); +``` + +Your code should have an `html` element. + +```js +assert.equal(document.querySelectorAll('html')?.length, 1); +``` + +Your code should have a `head` element within the `html` element. + +```js +assert.equal(document.querySelectorAll('head')?.length, 1); +``` + +Your code should have a `body` element within the `html` element. + +```js +assert.equal(document.querySelectorAll('body')?.length, 1); +``` + +Your `head` element should come before your `body` element. + +```js +assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD'); +``` + +You should have two `meta` elements. + +```js +const meta = document.querySelectorAll('meta'); +assert.equal(meta?.length, 2); +``` + +One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); +assert.exists(target); +``` + +The other `meta` element should have the `charset` attribute set to `UTF-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +assert.exists(target); +``` + +Your code should have a `title` element. + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +Your `title` should have some text. + +```js +const title = document.querySelector('title'); +assert.isAtLeast(title?.textContent?.length, 1); +``` + +Your code should have a `link` element. + +```js +assert(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / + + + + + Balance Sheet + + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md new file mode 100644 index 00000000000000..b9b28c13c5a3e9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md @@ -0,0 +1,52 @@ +--- +id: 61fd66c687e610436494c6f1 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Within your `section` element, add an `h1` element with a nested `span` element. + +# --hints-- + +Your `section` element should have an `h1` element. + +```js +assert(document.querySelector('section')?.children?.[0]?.localName === 'h1'); +``` + +Your `h1` element should have a `span` element. + +```js +assert(document.querySelector('h1')?.children?.[0]?.localName === 'span'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md new file mode 100644 index 00000000000000..91114165f62598 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md @@ -0,0 +1,78 @@ +--- +id: 61fd67a656743144844941cb +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Screen readers announce HTML elements based on the document flow. We will eventually want the balance sheet to have a heading of "Balance Sheet" and a subheading of "AcmeWidgetCorp". However, this order does not make sense if announced by a screen reader. + +Give your existing `span` the `class` attribute set to `flex`, and add two `span` elements within it. Give the first the text `AcmeWidgetCorp`. Give the second the text `Balance Sheet`. You will use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader. + +# --hints-- + +Your existing span element should have the `class` attribute set to `flex`. + +```js +assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex')); +``` + +Your existing `span` element should have two new `span` elements within it. + +```js +assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span'); +assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span'); +``` + +Your new `span` elements should not have a `class` attribute. + +```js +assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length); +assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length); +``` + +Your first new `span` element should have the text `AcmeWidgetCorp`. + +```js +assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp'); +``` + +Your second new `span` element should have the text `Balance Sheet`. + +```js +assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+--fcc-editable-region-- + + +--fcc-editable-region-- +

+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md new file mode 100644 index 00000000000000..0c58d222145ad9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md @@ -0,0 +1,65 @@ +--- +id: 61fd6ab779390f49148773bb +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Below your `h1` element, create a `div` element. Give it an `id` attribute set to `years`. You want this particular element to be hidden from screen readers, so give it the `aria-hidden` attribute set to `true`. + +# --hints-- + +You should create a new `div` element after your `h1` element. + +```js +assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div'); +``` + +Your new `div` element should have an `id` attribute set to `years`. + +```js +assert(document.querySelector('div')?.getAttribute('id') === 'years'); +``` + +Your new `div` element should have the `aria-hidden` attribute set to `true`. + +```js +assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md new file mode 100644 index 00000000000000..c748a499e57eb5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md @@ -0,0 +1,79 @@ +--- +id: 61fd6b7c83dbf54a08cf0498 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Within your `div` element, add three `span` elements. Give each of them a `class` attribute set to `year`, and add the following text (in order): `2019`, `2020`, and `2021`. + +# --hints-- + +Your `div` element should have three `span` elements. + +```js +assert(document.querySelector('div')?.children?.length === 3); +``` + +Each `span` element should have a `class` attribute set to `year`. + +```js +const spans = [...document.querySelector('div')?.children]; +spans.forEach(span => assert(span?.classList?.contains('year'))); +``` + +Your first `span` should have the text `2019`. + +```js +assert(document.querySelector('div')?.children?.[0]?.textContent === '2019'); +``` + +Your second `span` should have the text `2020`. + +```js +assert(document.querySelector('div')?.children?.[1]?.textContent === '2020'); +``` + +Your third `span` should have the text `2021`. + +```js +assert(document.querySelector('div')?.children?.[2]?.textContent === '2021'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md new file mode 100644 index 00000000000000..cef21895c3b400 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md @@ -0,0 +1,80 @@ +--- +id: 61fd6cc9475a784b7776233e +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Below your existing `div` element, add a new `div` element with a `class` set to `table-wrap`. This will be the container for your tables. + +Within that, add three `table` elements. You will be using CSS to style these into a single table, but using separate tables will help screen readers understand the document flow. + +# --hints-- + +You should create a new `div` element. + +```js +assert(document.querySelectorAll('div')?.length === 2); +``` + +Your new `div` element should have the `class` set to `table-wrap`. + +```js +assert(document.querySelector('.table-wrap')?.localName === 'div'); +``` + +Your `.table-wrap` element should come after your existing `div`. + +```js +assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap')); +``` + +Your `.table-wrap` element should have three `table` elements. + +```js +const children = [...(document.querySelector('.table-wrap')?.children ?? [])]; +assert(children?.length === 3); +children.forEach(child => assert(child?.localName === 'table')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd70336ebb3e4f62ee81ba.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd70336ebb3e4f62ee81ba.md new file mode 100644 index 00000000000000..2bfa71d3a1936f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd70336ebb3e4f62ee81ba.md @@ -0,0 +1,73 @@ +--- +id: 61fd70336ebb3e4f62ee81ba +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +HTML tables use the `caption` element to describe what the table is about. The `caption` element should always be the first child of a `table`, but can be positioned with the `caption-side` CSS property. + +Add a `caption` element to your first `table`, and give it the text `Assets`. + +# --hints-- + +Your first `table` element should have a `caption` element. + +```js +assert(document.querySelector('table')?.children?.[0]?.localName === 'caption'); +``` + +Your `caption` element should have the text `Assets`. + +```js +assert(document.querySelector('caption')?.textContent === 'Assets'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+--fcc-editable-region-- + +
+--fcc-editable-region-- + +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md new file mode 100644 index 00000000000000..823c437882781c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md @@ -0,0 +1,86 @@ +--- +id: 61fd719788899952e67692b9 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +The `thead` and `tbody` elements are used to indicate which portion of your table is the header, and which portion contains the primary data or content. + +Add a `thead` and `tbody` to your first `table`, below the `caption` element. + +# --hints-- + +Your first `table` element should have a `thead` element. + +```js +assert(document.querySelectorAll('table')?.[0]?.querySelector('thead')); +``` + +Your first `table` element should have a `tbody` element. + +```js +assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody')); +``` + +Your `thead` element should be immediately below your `caption` element. + +```js +assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead'); +``` + +Your `tbody` element should be immediately below your `thead` element. + +```js +assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+--fcc-editable-region-- + + +
Assets
+--fcc-editable-region-- + +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md new file mode 100644 index 00000000000000..4fc895fe9c305e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md @@ -0,0 +1,86 @@ +--- +id: 61fd71d596e8f253b9408b39 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +The `tr` element is used to indicate a table row. Add a `tr` element within your `thead` element. In your new `tr` element, add a `td` element, followed by three `th` elements. + +The `td` element indicates a data cell, while the `th` element indicates a header cell. + +# --hints-- + +Your `thead` element should have a `tr` element. + +```js +assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr'); +``` + +Your `tr` element should have a `td` element as the first child. + +```js +assert(document.querySelector('tr')?.children?.[0]?.localName === 'td'); +``` + +Your `tr` element should have three `th` elements, after the `td` element. + +```js +assert(document.querySelector('tr')?.children?.[1]?.localName === 'th'); +assert(document.querySelector('tr')?.children?.[2]?.localName === 'th'); +assert(document.querySelector('tr')?.children?.[3]?.localName === 'th'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + +--fcc-editable-region-- + + +--fcc-editable-region-- + + +
Assets
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md new file mode 100644 index 00000000000000..bbada4c7c96ca4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md @@ -0,0 +1,125 @@ +--- +id: 61fd75ea7f663457612dba02 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Within each of your new `th` elements, nest a `span` element with the `class` set to `sr-only year`. Give them the following text (in order): `2019`, `2020`, and `2021`. + +Give your third `th` element the `class` attribute set to `current`. + +Leave the `td` element empty. This element exists only to ensure your table has a four-column layout and associate the headers with the correct columns. + +# --hints-- + +Each of your `th` elements should have a `span` element. + +```js +const ths = [...document.querySelectorAll('th')]; +ths?.forEach(th => { + assert(th?.children?.length === 1); + assert(th?.children?.[0]?.localName === 'span'); +}); +``` + +Each of your new `span` elements should have the `class` attribute set to `sr-only year`. + +```js +const ths = [...document.querySelectorAll('th')]; +ths?.forEach(th => { + assert(th?.children?.[0]?.classList?.contains('sr-only')); + assert(th?.children?.[0]?.classList?.contains('year')); +}); +``` + +Your first `span` element should have the text `2019`. + +```js +assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019'); +``` + +Your second `span` element should have the text `2020`. + +```js +assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020'); +``` + +Your third `span` element should have the text `2021`. + +```js +assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021'); +``` + +Your third `th` element should have the `class` set to `current`. + +```js +assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current')); +``` + +Your `td` element should be empty. + +```js +assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === ''); +assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + +--fcc-editable-region-- + + + + + + + + +--fcc-editable-region-- + + +
Assets
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md new file mode 100644 index 00000000000000..2d190474a185bb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md @@ -0,0 +1,96 @@ +--- +id: 61fd7648a7ba2e5882436831 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Within your `tbody` element, add four `tr` elements. Give the first three a `class` attribute set to `data`, and the fourth a `class` attribute set to `total`. + +# --hints-- + +Your `tbody` element should have four `tr` elements. + +```js +const children = [...document.querySelector('tbody')?.children]; +assert(children?.length === 4); +children.forEach(child => assert(child?.localName === 'tr')); +``` + +Your first three `tr` elements should have the `class` attribute set to `data`. + +```js +const children = [...document.querySelector('tbody')?.children]; +children.forEach((child, index) => { + if (index < 3) { + assert(child?.classList?.contains('data')); + } +}); +``` + +Your fourth `tr` element should have the `class` attribute set to `total`. + +```js +const children = [...document.querySelector('tbody')?.children]; +assert(children?.[3]?.classList?.contains('total')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + +--fcc-editable-region-- + + +--fcc-editable-region-- +
Assets
201920202021
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md new file mode 100644 index 00000000000000..6a431a6c9cd391 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md @@ -0,0 +1,134 @@ +--- +id: 61fd778081276b59d59abad6 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +In your first `tr`, add a `th` element with the text `Cash This is the cash we currently have on hand.`. Wrap all of that text except `Cash ` in a `span` element with the `class` set to `description`. + +Following that, add three `td` elements with the following text (in order): `$25`, `$30`, `$28`. Give the third `td` element a `class` attribute set to `current`. + +# --hints-- + +Your first `tr` should have a `th` element. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')); +``` + +Your `th` element should have the text `Cash This is the cash we currently have on hand.`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.'); +``` + +You should wrap the text `This is the cash we currently have on hand.` in a `span` element. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.'); +``` + +Your `span` element should have the `class` attribute set to `description`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description')); +``` + +You should have three `td` elements. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3); +``` + +Your first `td` element should have the text `$25`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25'); +``` + +Your second `td` element should have the text `$30`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30'); +``` + +Your third `td` element should have the text `$28`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28'); +``` + +Your third `td` element should have the `class` set to `current`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + +--fcc-editable-region-- + + +--fcc-editable-region-- + + + + + + + +
Assets
201920202021
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md new file mode 100644 index 00000000000000..1bf152cc1b3455 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md @@ -0,0 +1,138 @@ +--- +id: 61fd77f7ad2aeb5ae34d07d6 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +In your second `tr` element, add a `th` element with the text `Checking Our primary transactional account.`. Wrap that text, except for `Checking `, in a `span` element with the `class` attribute set to `description`. + +Following that, add three `td` elements with the following text (in order): `$54`, `$56`, `$53`. Give the third `td` element a `class` attribute set to `current`. + +# --hints-- + +Your second `tr` should have a `th` element. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')); +``` + +Your `th` element should have the text `Checking Our primary transactional account.`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.'); +``` + +You should wrap the text `Our primary transactional account.` in a `span` element. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.'); +``` + +Your `span` element should have the `class` attribute set to `description`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description')); +``` + +You should have three `td` elements. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3); +``` + +Your first `td` element should have the text `$54`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54'); +``` + +Your second `td` element should have the text `$56`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56'); +``` + +Your third `td` element should have the text `$53`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53'); +``` + +Your third `td` element should have the `class` set to `current`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + +--fcc-editable-region-- + + +--fcc-editable-region-- + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md new file mode 100644 index 00000000000000..95fe235ac53570 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md @@ -0,0 +1,142 @@ +--- +id: 61fd78621573aa5e8b512f5e +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +In your third `tr` element, add a `th` element with the text `Savings Funds set aside for emergencies.`. Wrap that text, except for `Savings `, in a `span` element with the `class` attribute set to `description`. + +Following that, add three `td` elements with the following text (in order): `$500`, `$650`, `$728`. Give the third `td` element a `class` attribute set to `current`. + +# --hints-- + +Your third `tr` should have a `th` element. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')); +``` + +Your `th` element should have the text `Savings Funds set aside for emergencies.`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.'); +``` + +You should wrap the text `Funds set aside for emergencies.` in a `span` element. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.'); +``` + +Your `span` element should have the `class` attribute set to `description`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description')); +``` + +You should have three `td` elements. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3); +``` + +Your first `td` element should have the text `$500`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500'); +``` + +Your second `td` element should have the text `$650`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650'); +``` + +Your third `td` element should have the text `$728`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728'); +``` + +Your third `td` element should have the `class` set to `current`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +--fcc-editable-region-- + + +--fcc-editable-region-- + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md new file mode 100644 index 00000000000000..a0cc86d1820f22 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md @@ -0,0 +1,140 @@ +--- +id: 61fd7a160ed17960e971f28b +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +In your fourth `tr` element, add a `th` element with the text `Total Assets`. Wrap the text `Assets` in a `span` element with the `class` attribute set to `sr-only`. + +Following that, add three `td` elements with the following text (in order): `$579`, `$736`, `$809`. Give the third `td` element a `class` attribute set to `current`. + +# --hints-- + +Your fourth `tr` should have a `th` element. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')); +``` + +Your `th` element should have the text `Total Assets`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets'); +``` + +You should wrap the text `Assets` in a `span` element. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Assets'); +``` + +Your `span` element should have the `class` attribute set to `sr-only`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only')); +``` + +You should have three `td` elements. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3); +``` + +Your first `td` element should have the text `$579`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579'); +``` + +Your second `td` element should have the text `$736`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736'); +``` + +Your third `td` element should have the text `$809`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +--fcc-editable-region-- + + +--fcc-editable-region-- + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md new file mode 100644 index 00000000000000..5eecaafadd1f2d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md @@ -0,0 +1,130 @@ +--- +id: 61fd7b3fcaa5406257abc5d1 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Time to move on to your second table. Start by giving it a `caption` element set to `Liabilities`. Then add your `thead` and `tbody`. + +# --hints-- + +Your second `table` element should have a `caption` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption'); +``` + +Your `caption` element should have the text `Liabilities`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities'); +``` + +Your second `table` element should have a `thead` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')); +``` + +Your second `table` element should have a `tbody` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')); +``` + +Your `thead` element should be immediately below your `caption` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.nextElementSibling?.localName === 'thead'); +``` + +Your `tbody` element should be immediately below your `thead` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+--fcc-editable-region-- + +
+--fcc-editable-region-- + +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md new file mode 100644 index 00000000000000..f5f4c5de965707 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md @@ -0,0 +1,119 @@ +--- +id: 61fd8e491324ce717da97ffe +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements. + +# --hints-- + +Your `thead` element should have a `tr` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr'); +``` + +Your `tr` element should have a `td` element as the first child. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td'); +``` + +Your `tr` element should have three `th` elements, after the `td` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th'); +assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[2]?.localName === 'th'); +assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[3]?.localName === 'th'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+--fcc-editable-region-- + + + + + + +
Liabilities
+--fcc-editable-region-- + +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md new file mode 100644 index 00000000000000..304c3e45f3de06 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md @@ -0,0 +1,149 @@ +--- +id: 61fd8fd08af43372f02952d0 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Give each `th` element a `span` element with the class set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`. + +# --hints-- + +Each of your `th` elements should have a `span` element. + +```js +const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')]; +ths?.forEach(th => { + assert(th?.children?.length === 1); + assert(th?.children?.[0]?.localName === 'span'); +}); +``` + +Each of your new `span` elements should have the `class` attribute set to `sr-only`. + +```js +const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')]; +ths?.forEach(th => { + assert(th?.children?.[0]?.classList?.contains('sr-only')); +}); +``` + +Your first `span` element should have the text `2019`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019'); +``` + +Your second `span` element should have the text `2020`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020'); +``` + +Your third `span` element should have the text `2021`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021'); +``` + +Your `td` element should be empty. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.textContent === ''); +assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.children?.length === 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+--fcc-editable-region-- + + + + + + + + + + + + +
Liabilities
+--fcc-editable-region-- + +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md new file mode 100644 index 00000000000000..b76ae6fb42d798 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md @@ -0,0 +1,131 @@ +--- +id: 61fd9126aa72a474301fc49f +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Within the `tbody` element, add four `tr` elements. Give the first three the `class` attribute set to `data`, and the fourth the `class` attribute set to `total`. + +# --hints-- + +Your `tbody` element should have four `tr` elements. + +```js +const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children]; +assert(children?.length === 4); +children.forEach(child => assert(child?.localName === 'tr')); +``` + +Your first three `tr` elements should have the `class` attribute set to `data`. + +```js +const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children]; +children.forEach((child, index) => { + if (index < 3) { + assert(child?.classList?.contains('data')); + } +}); +``` + +Your fourth `tr` element should have the `class` attribute set to `total`. + +```js +const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children]; +assert(children?.[3]?.classList?.contains('total')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+--fcc-editable-region-- + + + + + + + + + + + + +
Liabilities
201920202021
+--fcc-editable-region-- + +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md new file mode 100644 index 00000000000000..556edae19cbb89 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md @@ -0,0 +1,169 @@ +--- +id: 61fd933ba685de776a94997e +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Within the first `tr`, add a `th` element with the text `Loans The outstanding balance on our startup loan.`. Wrap that text, except for `Loans `, within a `span` element with the `class` set to `description`. + +Add three `td` elements below that, and give them the following text, in order: `$500`, `$250`, and `$0`. Give the third `td` element a `class` set to `current`. + +# --hints-- + +Your first `tr` should have a `th` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')); +``` + +Your `th` element should have the text `Loans The outstanding balance on our startup loan.`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.'); +``` + +You should wrap the text `The outstanding balance on our startup loan.` in a `span` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.'); +``` + +Your `span` element should have the `class` attribute set to `description`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description')); +``` + +You should have three `td` elements. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3); +``` + +Your first `td` element should have the text `$500`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$500'); +``` + +Your second `td` element should have the text `$250`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250'); +``` + +Your third `td` element should have the text `$0`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0'); +``` + +Your third `td` element should have the `class` set to `current`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + +--fcc-editable-region-- + + + + + + + + +--fcc-editable-region-- + +
Liabilities
201920202021
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md new file mode 100644 index 00000000000000..fd5863887492e0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md @@ -0,0 +1,173 @@ +--- +id: 61fd94056e0355785fbba4d3 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Within the second `tr`, add a `th` element with the text `Expenses Annual anticipated expenses, such as payroll.`. Wrap that text, except for `Expenses `, within a `span` element with the `class` set to `description`. + +Add three `td` elements below that, and give them the following text, in order: `$200`, `$300`, and `$400`. Give the third `td` element a `class` set to `current`. + +# --hints-- + +Your second `tr` should have a `th` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')); +``` + +Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.'); +``` + +You should wrap the text `Annual anticipated expenses, such as payroll.` in a `span` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.'); +``` + +Your `span` element should have the `class` attribute set to `description`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description')); +``` + +You should have three `td` elements. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3); +``` + +Your first `td` element should have the text `$200`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200'); +``` + +Your second `td` element should have the text `$300`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300'); +``` + +Your third `td` element should have the text `$400`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400'); +``` + +Your third `td` element should have the `class` set to `current`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + +--fcc-editable-region-- + + + + + + + + + + + + +--fcc-editable-region-- + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md new file mode 100644 index 00000000000000..6b3594e3a35066 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md @@ -0,0 +1,177 @@ +--- +id: 61fd986ddbcbd47ba8fbc5ec +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Within the third `tr`, add a `th` element with the text `Credit The outstanding balance on our credit card.`. Wrap that text, except for `Credit `, within a `span` element with the `class` set to `description`. + +Add three `td` elements below that, and give them the following text, in order: `$50`, `$50`, and `$75`. Give the third `td` element a `class` set to `current`. + +# --hints-- + +Your third `tr` should have a `th` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')); +``` + +Your `th` element should have the text `Credit The outstanding balance on our credit card.`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.'); +``` + +You should wrap the text `The outstanding balance on our credit card.` in a `span` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.'); +``` + +Your `span` element should have the `class` attribute set to `description`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description')); +``` + +You should have three `td` elements. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3); +``` + +Your first `td` element should have the text `$50`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50'); +``` + +Your second `td` element should have the text `$50`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50'); +``` + +Your third `td` element should have the text `$75`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75'); +``` + +Your third `td` element should have the `class` set to `current`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + +--fcc-editable-region-- + + + + + + + + + + + + + + + + +--fcc-editable-region-- + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md new file mode 100644 index 00000000000000..3df95a88b0f872 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md @@ -0,0 +1,181 @@ +--- +id: 61fd990577d8227dd93fbeeb +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +In your fourth `tr` element, add a `th` element with the text `Total Liabilities`. Wrap the text `Liabilities` in a `span` element with the `class` attribute set to `sr-only`. + +Following that, add three `td` elements with the following text (in order): `$750`, `$600`, `$475`. Give the third `td` element a `class` attribute set to `current`. + +# --hints-- + +Your fourth `tr` should have a `th` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')); +``` + +Your `th` element should have the text `Total Liabilities`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities'); +``` + +You should wrap the text `Liabilities` in a `span` element. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities'); +``` + +Your `span` element should have the `class` attribute set to `sr-only`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only')); +``` + +You should have three `td` elements. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3); +``` + +Your first `td` element should have the text `$750`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750'); +``` + +Your second `td` element should have the text `$600`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600'); +``` + +Your third `td` element should have the text `$475`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475'); +``` + +Your third `td` element should have the `class` set to `current`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + +--fcc-editable-region-- + + + + + + + + + + + + + + + + + + + + +--fcc-editable-region-- + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md new file mode 100644 index 00000000000000..7de519d4f93526 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md @@ -0,0 +1,165 @@ +--- +id: 61fd9a4ff2fc4481b9157bd7 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +For your third table, add a `caption` with the text `Net Worth`, and set up a table header and table body. + +# --hints-- + +Your third `table` element should have a `caption` element. + +```js +assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption'); +``` + +Your `caption` element should have the text `Net Worth`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth'); +``` + +Your third `table` element should have a `thead` element. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')); +``` + +Your third `table` element should have a `tbody` element. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')); +``` + +Your `thead` element should be immediately below your `caption` element. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.nextElementSibling?.localName === 'thead'); +``` + +Your `tbody` element should be immediately below your `thead` element. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+--fcc-editable-region-- + +
+--fcc-editable-region-- +
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md new file mode 100644 index 00000000000000..2734201d5ac517 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md @@ -0,0 +1,198 @@ +--- +id: 61fd9ad665a4a282c8106be3 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`. + +# --hints-- + +Your `thead` element should have a `tr` element. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr'); +``` + +Your `tr` element should have a `td` element as the first child. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td'); +``` + +Your `tr` element should have three `th` elements, after the `td` element. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th'); +assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[2]?.localName === 'th'); +assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th'); +``` + +Each of your `th` elements should have a `span` element. + +```js +const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')]; +ths?.forEach(th => { + assert(th?.children?.length === 1); + assert(th?.children?.[0]?.localName === 'span'); +}); +``` + +Each of your new `span` elements should have the `class` attribute set to `sr-only`. + +```js +const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')]; +ths?.forEach(th => { + assert(th?.children?.[0]?.classList?.contains('sr-only')); +}); +``` + +Your first `span` element should have the text `2019`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019'); +``` + +Your second `span` element should have the text `2020`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020'); +``` + +Your third `span` element should have the text `2021`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021'); +``` + +Your `td` element should be empty. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === ''); +assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.children?.length === 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+--fcc-editable-region-- + + + + + + +
Net Worth
+--fcc-editable-region-- +
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md new file mode 100644 index 00000000000000..9db70729f4e72c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md @@ -0,0 +1,208 @@ +--- +id: 61fd9b7285bde783ad5b8aac +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Within the `tbody`, add a `tr` with the `class` set to `total`. In that, add a `th` with the text `Total Net Worth`, and wrap `Net Worth` in a `span` with the `class` set to `sr-only`. + +Then add three `td` elements, giving the third a `class` set to `current`, and giving each the following text: `$-171`, `$136`, `$334`. + +# --hints-- + +Your `tbody` element should have one `tr` element. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1); +``` + +Your `tr` element should have the `class` set to `total`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total')); +``` + +Your `tr` should have a `th` element. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')); +``` + +Your `th` element should have the text `Total Net Worth`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth'); +``` + +You should wrap the text `Net Worth` in a `span` element. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth'); +``` + +Your `span` element should have the `class` attribute set to `sr-only`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only')); +``` + +You should have three `td` elements. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3); +``` + +Your first `td` element should have the text `$-171`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171'); +``` + +Your second `td` element should have the text `$136`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136'); +``` + +Your third `td` element should have the text `$334`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334'); +``` + +Your third `td` element should have the `class` set to `current`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+--fcc-editable-region-- + + + + + + + + + + + + +
Net Worth
201920202021
+--fcc-editable-region-- +
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md new file mode 100644 index 00000000000000..d6f43946ecb24f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md @@ -0,0 +1,158 @@ +--- +id: 61fd9d9fbdfe078800317055 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Time to style your table. Start by resetting the box model. Create an `html` selector and give it a `box-sizing` property set to `border-box`. + +# --hints-- + +You should have an `html` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')); +``` + +Your `html` selector should have a `box-sizing` property set to `border-box`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md new file mode 100644 index 00000000000000..ef76a35f2ed8e9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md @@ -0,0 +1,168 @@ +--- +id: 61fda307bde0b091cf7d884a +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Create a `body` selector and give it a `font-family` property set to `sans-serif` and a `color` set to `#0a0a23`. + +# --hints-- + +You should have a `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` selector should have a `font-family` property set to `sans-serif`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family') === 'sans-serif'); +``` + +Your `body` selector should have a `color` property set to `#0a0a23`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color') === 'rgb(10, 10, 35)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md new file mode 100644 index 00000000000000..0d32f178f444a2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md @@ -0,0 +1,171 @@ +--- +id: 61fda339eadcfd92a6812bed +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Before you get too far into your styling, you should make use of the `sr-only` class. You can use CSS to make elements with this class completely hidden from the visual page, but still be announced by screen readers. + +The CSS you are about to write is a common set of properties used to ensure elements are completely hidden visually. + +The `span[class~="sr-only"]` selector will select any `span` element whose `class` *includes* `sr-only`. Create that selector, and give it a `border` property set to `0`. + +# --hints-- + +You should have an `span[class~="sr-only"]` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')); +``` + +Your `span[class~="sr-only"]` selector should have a `border` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md new file mode 100644 index 00000000000000..c2beaaa7c61ea2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md @@ -0,0 +1,178 @@ +--- +id: 61fdac1e31692f9a9ad97295 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`. + +The `clip-path` property determines the shape the `clip` property should take. Use both the `clip-path` and `-webkit-clip-path` selectors to set the value to `inset(50%)`, forming the clip-path into a rectangle within the element. + +# --hints-- + +Your `span[class~="sr-only"]` selector should have a `clip` property set to `rect(1px, 1px, 1px, 1px)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)'); +``` + +Your `span[class~="sr-only"] ` selector should have a `clip-path` property set to `inset(50%)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)'); +``` + +Your `span[class~="sr-only"]` selector should have a `-webkit-clip-path` property set to `inset(50%)`. + +```js +assert(/-webkit-clip-path\s*:\s*inset\(\s*50%\s*\)\s*(;|})/.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +span[class~="sr-only"] { + border: 0; + +} +--fcc-editable-region-- + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md new file mode 100644 index 00000000000000..b2da77872ddaca --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md @@ -0,0 +1,173 @@ +--- +id: 61fdaea3999cb19d76ce717b +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Now you need to size these elements down. Give your `span[class~="sr-only"]` selector a `width` and `height` property set to `1px`. + +# --hints-- + +Your `span[class~="sr-only"]` selector should have a `width` property set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px'); +``` + +Your `span[class~="sr-only"]` selector should have a `height` property set to `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + +} +--fcc-editable-region-- + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md new file mode 100644 index 00000000000000..b82816458231d7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md @@ -0,0 +1,175 @@ +--- +id: 61fdaf9ff894b6a084ecdc1b +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +To prevent the text content from overflowing, give your `span[class~="sr-only"]` selector an `overflow` property set to `hidden` and a `white-space` property set to `nowrap`. + +# --hints-- + +Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden'); +``` + +Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + +} +--fcc-editable-region-- + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md new file mode 100644 index 00000000000000..8284abe755c8af --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md @@ -0,0 +1,183 @@ +--- +id: 61fdafe6f07fd7a1c6785bc2 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Finally, you need to take these hidden elements out of the document flow. Give the `span[class~="sr-only"]` selector a `position` property set to `absolute`, a `padding` property set to `0`, and a `margin` property set to `-1px`. This will ensure that not only are they no longer visible, but they are not even within the page view. + +# --hints-- + +Your `span[class~="sr-only"]` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute'); +``` + +Your `span[class~="sr-only"]` selector should have a `padding` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px'); +``` + +Your `span[class~="sr-only"]` selector should have a `margin` property set to `-1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + overflow: hidden; + white-space: nowrap; + +} +--fcc-editable-region-- + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md new file mode 100644 index 00000000000000..aecbddc1a7a416 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md @@ -0,0 +1,193 @@ +--- +id: 61fdb04d9939f0a26ca51c2b +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`. + +# --hints-- + +You should have an `h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +Your `h1` selector should have a `max-width` property set to `37.25rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem'); +``` + +Your `h1` selector should have a `margin` property set to `0 auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto'); +``` + +Your `h1` selector should have a `padding` property set to `1.5rem 1.25rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md new file mode 100644 index 00000000000000..5ec7bcff299878 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md @@ -0,0 +1,199 @@ +--- +id: 620159cd5431aa34bc6a4c9c +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Target your flex container with an `h1 .flex` selector. Give it a `display` property set to `flex` to enable the flexbox layout. Then set the `flex-direction` property to `column-reverse` - this will display the nested elements from bottom to top. Finally, set the `gap` property to `1rem` to create some space between the elements. + +# --hints-- + +You should have an `h1 .flex` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')); +``` + +Your `h1 .flex` selector should have a `display` property set to `flex`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('display') === 'flex'); +``` + +Your `h1 .flex` selector should have a `flex-direction` property set to `column-reverse`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('flex-direction') === 'column-reverse'); +``` + +Your `h1 .flex` selector should have a `gap` property set to `1rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md new file mode 100644 index 00000000000000..ab8865eb0d6946 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md @@ -0,0 +1,195 @@ +--- +id: 62015a5da1c95c358f079ebb +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +The `:first-of-type` pseudo-selector is used to target the first element that matches the selector. Create an `h1 .flex span:first-of-type` selector to target the first `span` element in your `.flex` container. Remember that your `span` elements are reversed, visually, so this will appear to be the second element on the page. + +Give your new selector a `font-size` property of `0.7em` to make it look like a sub-heading. + +# --hints-- + +You should have an `h1 .flex span:first-of-type` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')); +``` + +Your `h1 .flex span:first-of-type` selector should have a `font-size` property set to `0.7em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.getPropertyValue('font-size') === '0.7em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md new file mode 100644 index 00000000000000..1cea40b76013fc --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md @@ -0,0 +1,197 @@ +--- +id: 62015cd2654a1139321a89d2 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +The `:last-of-type` pseudo-selector does the exact opposite - it targets the last element that matches the selector. Create an `h1 .flex span:last-of-type` selector to target the last `span` in your flex container, and give it a `font-size` property set to `1.2em` to make it look like a header. + +# --hints-- + +You should have an `h1 .flex span:last-of-type` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')); +``` + +Your `h1 .flex span:last-of-type` selector should have a `font-size` property set to `1.2em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.getPropertyValue('font-size') === '1.2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md new file mode 100644 index 00000000000000..85bd4b078771cd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md @@ -0,0 +1,213 @@ +--- +id: 62015d8942384c3aed48329e +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +You wrapped your table in a section element - now you can style that to give your table a border. Create a `section` selector, and give it a `max-width` property set to `40rem` for responsive design. Set the `margin` property to `0 auto` to center it, and set the `border` property to `2px solid #d0d0d5`. + +# --hints-- + +You should have a `section` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('section')); +``` + +Your `section` selector should have a `max-width` property set to `40rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem'); +``` + +Your `section` selector should have a `margin` property set to `0 auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto'); +``` + +Your `section` selector should have a `border` property set to `2px solid #d0d0d5`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md new file mode 100644 index 00000000000000..f5c19d377b7ab6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md @@ -0,0 +1,225 @@ +--- +id: 620167374bb8b4455cd11125 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The last part of your table heading is your years. Create a `#years` selector, and enable flexbox. Justify the content to the end of the flex direction, and make the element sticky. Fix it to the top of its container with `top: 0`. + +# --hints-- + +You should have a `#years` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')); +``` + +Your `#years` selector should have a `display` property set to `flex`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex'); +``` + +Your `#years` selector should have a `justify-content` property set to `flex-end`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('justify-content') === 'flex-end'); +``` + +Your `#years` selector should have a `position` property set to `sticky`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('position') === 'sticky'); +``` + +Your `#years` selector should have a `top` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md new file mode 100644 index 00000000000000..cc6bc8d721fc2c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md @@ -0,0 +1,213 @@ +--- +id: 620174ed519dd7506c1a4b61 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Now apply some color to your `#years`. Make the text `#fff` and the background `#0a0a23`. + +# --hints-- + +Your `#years` should have a `color` property set to `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)'); +``` + +Your `#years` should have a `background-color` property set to `#0a0a23`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +--fcc-editable-region-- +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md new file mode 100644 index 00000000000000..428977715645d2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md @@ -0,0 +1,230 @@ +--- +id: 620175b3710a0951cfa86edf +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +The `calc()` function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element: + +```css +.example { + margin: 10px; + width: calc(100% - 20px); +} +``` + +Ensure your years do not get hidden by setting a `z-index` of `999`. Then, give it a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`. + +# --hints-- + +Your `#years` selector should have a `z-index` property set to `999`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index') === '999'); +``` + +Your `#years` selector should have a `margin` property set to `0 -2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px'); +``` + +Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`. + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding'); +assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +--fcc-editable-region-- +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md new file mode 100644 index 00000000000000..5081a07ca21e6a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md @@ -0,0 +1,233 @@ +--- +id: 6201782cc420715562f36271 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Style the text within your `#years` element by creating a `#years span[class]` selector. The `span[class]` syntax will target any `span` element that has a `class` attribute set, regardless of the attribute's value. + +Give your new selector a `bold` font, a width of `4.5rem`, and text aligned to the right. + +# --hints-- + +You should have a `#years span[class]` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')); +``` + +Your `#years span[class]` selector should have a `font-weight` property set to `bold`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold'); +``` + +Your `#years span[class]` selector should have a `width` property set to `4.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem'); +``` + +Your `#years span[class]` selector should have a `text-align` property set to `right`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md new file mode 100644 index 00000000000000..48464e039d7cff --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md @@ -0,0 +1,225 @@ +--- +id: 620179bc0a6a2358c72b90ad +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +You wrapped your tables in a container with the `table-wrap` class. Create a selector for that class, and give it a `padding` set to `0 0.75rem 1.5rem 0.75rem`. + +# --hints-- + +You should have a `.table-wrap` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')); +``` + +Your `.table-wrap` selector should have a `padding` property set to `0 0.75rem 1.5rem 0.75rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md new file mode 100644 index 00000000000000..03e0b25bf20afe --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md @@ -0,0 +1,231 @@ +--- +id: 62017b6f47454059bf2d3bd1 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Before you start diving in to the table itself, your `span` elements are currently bolded. Create a `span:not(.sr-only)` selector and give it a `font-weight` property set to `normal`. + +The `:not()` pseudo-selector is used to target all elements that do not match the selector - in this case, any of your `span` elements that do not have the `span[class~="sr-only"]` class. This ensures that your earlier rules for the `sr-only` class are not overwritten. + +# --hints-- + +You should have a `span:not(.sr-only)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')); +``` + +Your `span:not(.sr-only)` selector should have a `font-weight` property set to `normal`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md new file mode 100644 index 00000000000000..46f57aac10630e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md @@ -0,0 +1,299 @@ +--- +id: 62017f47c87be96457c49f46 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Rather than having to constantly double-check you are not overwriting your earlier properties, you can use the `!important` keyword to ensure these properties are always applied, regardless of order or specificity. + +Give each property in your `span[class~="sr-only"]` selector an `!important` keyword. Do not change any of the values. + +# --hints-- + +Your `span[class~="sr-only"]` selector should have the `border` property set to `0 !important`. + +```js +// log it +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important')); +``` + +Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;')); +``` + +Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('clip-path: inset(50%) !important;')); +``` + +Your `span[class~="sr-only"]` selector should have the `-webkit-clip-path` property set to `inset(50%) !important`. + +```js +// this one gets removed apparently +assert(code.includes('-webkit-clip-path: inset(50%) !important;')); +``` + +Your `span[class~="sr-only"]` selector should have the `height` property set to `1px !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('height: 1px !important;')); +``` + +Your `span[class~="sr-only"]` selector should have the `width` property set to `1px !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('width: 1px !important;')); +``` + +Your `span[class~="sr-only"]` selector should have the `position` property set to `absolute !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('position: absolute !important;')); +``` + +Your `span[class~="sr-only"]` selector should have the `overflow` property set to `hidden !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('overflow: hidden !important;')); +``` + +Your `span[class~="sr-only"]` selector should have the `white-space` property set to `nowrap !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('white-space: nowrap !important;')); +``` + +Your `span[class~="sr-only"]` selector should have the `padding` property set to `0 !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('padding: 0px !important;')); +``` + +Your `span[class~="sr-only"]` selector should have the `margin` property set to `-1px !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('margin: -1px !important;')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} +--fcc-editable-region-- + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span:not(.sr-only) { + font-weight: normal; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md new file mode 100644 index 00000000000000..4be6f539f22133 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md @@ -0,0 +1,237 @@ +--- +id: 62017fa5bbef406580ceb44f +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Now that you have added the `!important` keyword, you can remove the `:not(.sr-only)` from your `span` selector. + +# --hints-- + +You should not have a `span:not(.sr-only)` selector. + +```js +assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'))); +``` + +You should have a `span` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span')); +``` + +You should not change the `font-weight`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-weight') === 'normal'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +--fcc-editable-region-- +span:not(.sr-only) { + font-weight: normal; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md new file mode 100644 index 00000000000000..3afc1a25c3260a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md @@ -0,0 +1,239 @@ +--- +id: 62018243f046a368fab8ffb6 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Create a `table` selector to target your tables. Set the `border-collapse` property to `collapse`, which will allow cell borders to collapse into a single border, instead of a border around each cell. Also set the `border` property to `0` to hide the borders themselves. + +# --hints-- + +You should have a `table` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table')); +``` + +Your `table` selector should have a `border-collapse` property set to `collapse`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-collapse') === 'collapse'); +``` + +Your `table` selector should have a `border` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md new file mode 100644 index 00000000000000..bf345f1f5bef13 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md @@ -0,0 +1,243 @@ +--- +id: 6201830cb0c74b69f1b41635 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Ensure your table fills its container with a `width` property set to `100%`, then position it relatively and give it a top margin of `3rem`. + +# --hints-- + +Your `table` selector should have a `width` property set to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%'); +``` + +Your `table` selector should have a `position` property set to `relative`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('position') === 'relative'); +``` + +Your `table` selector should have a `margin-top` property set to `3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('margin-top') === '3rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +--fcc-editable-region-- +table { + border-collapse: collapse; + border: 0; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md new file mode 100644 index 00000000000000..c490f4533b6962 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md @@ -0,0 +1,253 @@ +--- +id: 620186f4b6b8356d2def576b +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Next you need to style your `caption` elements to look more like headers. Create a `table caption` selector. Set the text to have a color of `#356eaf`, a size of `1.3em`, and a normal weight. + +# --hints-- + +You should have a `table caption` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')); +``` + +Your `table caption` selector should have a `color` property set to `#356eaf`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('color') === 'rgb(53, 110, 175)'); +``` + +Your `table caption` selector should have a `font-size` property set to `1.3em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-size') === '1.3em'); +``` + +Your `table caption` selector should have a `font-weight` property set to `normal`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-weight') === 'normal'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md new file mode 100644 index 00000000000000..520a8d6597fea1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md @@ -0,0 +1,252 @@ +--- +id: 62018ba1aa263770c953be66 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Now give the captions an absolute position, and shift them `-2.25rem` from the top and `0.5rem` from the left. + +# --hints-- + +Your `table caption` selector should have the `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute'); +``` + +Your `table caption` selector should have the `top` property set to `-2.25rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('top') === '-2.25rem'); +``` + +Your `table caption` selector should have the `left` property set to `0.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('left') === '0.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +--fcc-editable-region-- +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md new file mode 100644 index 00000000000000..5e51c2b415daef --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md @@ -0,0 +1,262 @@ +--- +id: 62018c3e94434a71af1d5eaa +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container (because we are using flexbox). + +# --hints-- + +You should have a `tbody td` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tbody td')); +``` + +Your `tbody td` selector should have a `width` property set to `100vw`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('width') === '100vw'); +``` + +Your `tbody td` selector should have a `min-width` property set to `4rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem'); +``` + +Your `tbody td` selector should have a `max-width` property set to `4rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md new file mode 100644 index 00000000000000..3a993cd5aa3541 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md @@ -0,0 +1,256 @@ +--- +id: 62018ec29b3ae674f40bef31 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Now target the `th` elements within your table body, and give them a width of the entire container, less `12rem`. + +# --hints-- + +You should have a `tbody th` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tbody th')); +``` + +Your `tbody th` selector should have a `width` property set to `calc(100% - 12rem)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('width') === 'calc(100% - 12rem)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md new file mode 100644 index 00000000000000..191e7516aa73cd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md @@ -0,0 +1,266 @@ +--- +id: 62019093fe30e278e797d2f6 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +The `[attribute="value"]` selector targets any element that has an attribute with a specific value. Create a `tr[class="total"]` selector to target specifically your `tr` elements with the `total` class. Give it a bottom border of `4px double #0a0a23` and make the font bold. + +# --hints-- + +You should have a `tr[class="total"]` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')); +``` + +Your `tr[class="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)'); +``` + +Your `tr[class="total"]` selector should have a `font-weight` property set to `bold`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md new file mode 100644 index 00000000000000..ff5b3982fd0f84 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md @@ -0,0 +1,271 @@ +--- +id: 620191707bc65579ddd3ce15 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Using the same selector syntax, target the `th` elements within your table rows where the `class` is `total`. Align the text to the left, and give them a padding of `0.5rem 0 0.25rem 0.5rem`. + +# --hints-- + +You should have a `tr[class="total"] th` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')); +``` + +Your `tr[class="total"] th` selector should have a `text-align` property set to `left`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left'); +``` + +Your `tr[class="total"] th` selector should have a `padding` property set to `0.5rem 0 0.25rem 0.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md new file mode 100644 index 00000000000000..6e24c5cd5aa936 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md @@ -0,0 +1,278 @@ +--- +id: 620192a767533a7ad19d96d7 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +The key difference between `tr[class="total"]` and `tr.total` is that the first will select `tr` elements where the *only* class is `total`. The second will select `tr` elements where the class *includes* total. + +In your case, `tr.total` will work. You can use this selector to target all `td` elements within your `.total` rows. Align the text to the right, and give them a padding of `0 0.25rem`. + +# --hints-- + +You should have a `tr.total td` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total td')); +``` + +Your `tr.total td` selector should have a `text-align` property set to `right`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right'); +``` + +Your `tr.total td` selector should have a `padding` property set to `0 0.25rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md new file mode 100644 index 00000000000000..b104424cf3c651 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md @@ -0,0 +1,275 @@ +--- +id: 6201995d9ab88e80f1989dce +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +The `:nth-of-type()` pseudo-selector is used to target specific elements based on their order among siblings of the same type. Use this pseudo-selector to target the third `td` element within your `total` table rows. Give it a right padding of `0.5rem`. + +# --hints-- + +You should have a `tr.total td:nth-of-type(3)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')); +``` + +Your `tr.total td:nth-of-type(3)` selector should have a `padding-right` property set to `0.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md new file mode 100644 index 00000000000000..b740aa86b06e60 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md @@ -0,0 +1,279 @@ +--- +id: 620199c7a7a32c81d4db3410 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Give your `tr.total` elements a hover effect that changes the background to `#99c9ff`. + +# --hints-- + +You should have a `tr.total:hover` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')); +``` + +Your `tr.total:hover` selector should have the `background-color` property set to `#99c9ff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyValue('background-color') === 'rgb(153, 201, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md new file mode 100644 index 00000000000000..be02adf939b5cb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md @@ -0,0 +1,285 @@ +--- +id: 6201a1a7af32c287bd6b8183 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Select your `td` elements with the `class` value of `current`, and make the font italic. + +# --hints-- + +You should have a `td.current` selector. + +```js +const def = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert(def('td.current') || def('td[class="current"]')); +``` + +Your `td.current` selector should have the `font-style` property set to `italic`. + +```js +const font = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style'); +assert((font('td.current') || font('td[class="current"]')) === 'italic'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md new file mode 100644 index 00000000000000..d0d89039b98212 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md @@ -0,0 +1,289 @@ +--- +id: 6201a1cc668a34888f5b2f52 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Select the `tr` elements with the `class` set to `data`. Give them a background image of `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`. + +# --hints-- + +You should have a `tr.data` selector. + +```js +const def = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert(def('tr.data') || def('tr[class="data"]')); +``` + +Your `tr.data` selector should have the `background-image` property set to `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`. + +```js +const bg = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('background-image'); +assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md new file mode 100644 index 00000000000000..a112aada317053 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md @@ -0,0 +1,303 @@ +--- +id: 6201a20d742f5c89736c8cfb +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Select the `th` elements within your `tr.data` elements. Align the text to the left, and give them a top padding of `0.3rem` and a left padding of `0.5rem`. + +# --hints-- + +You should have a `tr.data th` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th')); +``` + +Your `tr.data th` selector should have a `text-align` property set to `left`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('text-align') === 'left'); +``` + +Your `tr.data th` selector should have a `padding-top` property set to `0.3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-top') === '0.3rem'); +``` + +Your `tr.data th` selector should have a `padding-left` property set to `0.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-left') === '0.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +tr.data { + background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md new file mode 100644 index 00000000000000..2e4293eb5ac608 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md @@ -0,0 +1,321 @@ +--- +id: 6201a42e39bf3b95b6a33bf3 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Create a `tr.data th .description` selector to target the elements with the `class` set to `description` that are within your `th` elements in your `.data` table rows. Give them a block display, make the text italic with a normal weight, and position them with a `padding` set to `1rem 0 0.75rem` and a right margin of `-13.5rem`. + +# --hints-- + +You should have a `tr.data th .description` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')); +``` + +Your `tr.data th .description` selector should have a `display` property set to `block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block'); +``` + +Your `tr.data th .description` selector should have a `font-style` property set to `italic`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic'); +``` + +Your `tr.data th .description` selector should have a `font-weight` property set to `normal`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal'); +``` + +Your `tr.data th .description` selector should have a `padding` property set to `1rem 0 0.75rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem'); +``` + +Your `tr.data th .description` selector should have a `margin-right` property set to `-13.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +tr.data { + background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); +} + +tr.data th { + text-align: left; + padding-top: 0.3rem; + padding-left: 0.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md new file mode 100644 index 00000000000000..ed374cf01ba1de --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md @@ -0,0 +1,297 @@ +--- +id: 6201a4adcc6414968b391592 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Your `span` elements now all have more specific styling, which means you can remove your `span` rule. + +# --hints-- + +You should not have a `span` selector. + +```js +assert(!(new __helpers.CSSHelp(document).getStyle('span'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +--fcc-editable-region-- +span { + font-weight: normal; +} +--fcc-editable-region-- + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +tr.data { + background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); +} + +tr.data th { + text-align: left; + padding-top: 0.3rem; + padding-left: 0.5rem; +} + +tr.data th .description { + display: block; + font-weight: normal; + font-style: italic; + padding: 1rem 0 0.75rem; + margin-right: -13.5rem; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md new file mode 100644 index 00000000000000..72f45fb6dbc15f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md @@ -0,0 +1,313 @@ +--- +id: 6201a5258af7b398b030bfaf +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Your dollar amounts are currently misaligned. Create a selector to target the `td` elements within your `tr.data` elements. Vertically align the text to the top, horizontally align the text to the right, and set the padding to `0.3rem 0.25rem 0`. + +# --hints-- + +You should have a `tr.data td` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data td')); +``` + +Your `tr.data td` selector should have a `vertical-align` property set to `top`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('vertical-align') === 'top'); +``` + +Your `tr.data td` selector should have a `text-align` property set to `right`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('text-align') === 'right'); +``` + +Your `tr.data td` selector should have a `padding` property set to `0.3rem 0.25rem 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('padding') === '0.3rem 0.25rem 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +tr.data { + background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); +} + +tr.data th { + text-align: left; + padding-top: 0.3rem; + padding-left: 0.5rem; +} + +tr.data th .description { + display: block; + font-weight: normal; + font-style: italic; + padding: 1rem 0 0.75rem; + margin-right: -13.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md new file mode 100644 index 00000000000000..6dacc929d481ce --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md @@ -0,0 +1,591 @@ +--- +id: 6201a59be346d399c21d10b1 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Create another selector for the `td` elements within your `tr.data` element, but specifically select the last one. Give this a right padding of `0.5rem`. + +With this, your balance sheet is complete! + +# --hints-- + +You should have a `tr.data td:last-of-type` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')); +``` + +Your `tr.data td:last-of-type` selector should have a `padding-right` property set to `0.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getPropertyValue('padding-right') === '0.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +tr.data { + background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); +} + +tr.data th { + text-align: left; + padding-top: 0.3rem; + padding-left: 0.5rem; +} + +tr.data th .description { + display: block; + font-weight: normal; + font-style: italic; + padding: 1rem 0 0.75rem; + margin-right: -13.5rem; +} + +tr.data td { + vertical-align: top; + padding: 0.3rem 0.25rem 0; + text-align: right; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +# --solutions-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +tr.data { + background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); +} + +tr.data th { + text-align: left; + padding-top: 0.3rem; + padding-left: 0.5rem; +} + +tr.data th .description { + display: block; + font-weight: normal; + font-style: italic; + padding: 1rem 0 0.75rem; + margin-right: -13.5rem; +} + +tr.data td { + vertical-align: top; + padding: 0.3rem 0.25rem 0; + text-align: right; +} + +tr.data td:last-of-type { + padding-right: 0.5rem; +} +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md new file mode 100644 index 00000000000000..8e72dacba39bb6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md @@ -0,0 +1,131 @@ +--- +id: 612e6afc009b450a437940a1 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Begin with the basic HTML structure. Add a `DOCTYPE` declaration and `html`, `head`, `body`, and `title` elements. Set the `title` to `Piano`. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `DOCTYPE` declaration should be at the beginning of your HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +The `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +The `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +The `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +Your code should have a `title` element. + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +Your project should have a title of `Piano`. + +```js +const title = document.querySelector('title'); +assert.equal(title?.text?.trim()?.toLowerCase(), 'piano') +``` + +Remember, the casing and spelling matter for the title. + +```js +const title = document.querySelector('title'); +assert.equal(title?.text?.trim(), 'Piano'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md new file mode 100644 index 00000000000000..b5d494349b6e8f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md @@ -0,0 +1,64 @@ +--- +id: 612e77aba7ca691f598feb02 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Add two `meta` tags, one to optimize your page for mobile devices, and one to specify an accepted `charset` for the page. + +# --hints-- + +You should add two `meta` elements to your page. + +```js +const meta = document.querySelector('meta'); +assert.exists(meta); +``` + +You should have two `meta` elements. + +```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 2); +``` + +One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); +assert.exists(target); +``` + +The other `meta` element should have the `charset` attribute set to `UTF-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset') === 'UTF-8'); +assert.exists(target); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + Piano + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md new file mode 100644 index 00000000000000..a05d27b6d5a5e2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md @@ -0,0 +1,57 @@ +--- +id: 612e78af05201622d4bab8aa +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Time to start working on the piano. Create a `div` element within your `body` element with the `id` set to `piano`. + +# --hints-- + +You should create a new `div` element. + +```js +const div = document.querySelector('div'); +assert.exists(div); +``` + +Your `div` should be within your `body` element. + +```js +const div = document.querySelector('div'); +assert(div?.parentElement?.localName === 'body'); +``` + +Your `div` should have the `id` set to `piano`. + +```js +const div = document.querySelector('div'); +assert(div?.getAttribute('id') === 'piano'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md new file mode 100644 index 00000000000000..ccee7b24ca3cff --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md @@ -0,0 +1,60 @@ +--- +id: 612e7d1c29fb872d6384379c +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Nest a second `div` within your existing `div`, and set the `class` to be `keys`. + +# --hints-- + +You should create a second `div` element. + +```js +const divDiv = document.querySelectorAll('div'); +assert(divDiv?.length === 2); +``` + +Your new `div` element should be within your existing `div` element. + +```js +const div = document.querySelector('div'); +assert(div?.children?.length === 1); +assert(div?.children?.[0]?.localName === 'div'); +``` + +Your new `div` element should have the `class` set to `keys`. + +```js +const div = document.querySelector('div'); +assert(div?.children?.[0]?.className === 'keys'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + +
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md new file mode 100644 index 00000000000000..e705e507f1af3f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md @@ -0,0 +1,60 @@ +--- +id: 612e804c54d5e7308d7ebe56 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Within your `.keys` element, add seven `div` elements. Give them all the class `key`. + +# --hints-- + +You should create seven new `div` elements. + +```js +const divDivDiv = document.querySelectorAll('div'); +assert(divDivDiv?.length === 9); +``` + +Your seven new `div` elements should be within your `.keys` element. + +```js +const keys = document.querySelector('.keys'); +assert([...keys?.children].length === 7); +assert([...keys?.children].every(child => child?.tagName === 'DIV')); +``` + +Your seven new `div` elements should all have the `class` set to `key`. + +```js +const keys = document.querySelector('.keys'); +assert([...keys?.children].every(child => child?.classList?.contains('key'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + --fcc-editable-region-- +
+
+
+ --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md new file mode 100644 index 00000000000000..9e5b35d91d22e0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md @@ -0,0 +1,95 @@ +--- +id: 612e813b3ba67633222cbe54 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Remember that a `class` attribute can have multiple values. To separate your white keys from your black keys, you'll add a second `class` value of `black--key`. Add this to your second, third, fifth, sixth, and seventh `.key` elements. + +# --hints-- + +Your second `.key` element should also have a `class` of `black--key`. + +```js +const key = document.querySelectorAll('.key')?.[1]; +assert(key?.className?.includes('black--key')); +``` + +Your third `.key` should have `black--key` in the `class`. + +```js +const third = document.querySelectorAll('.key')?.[2]; +assert(third?.classList?.contains('black--key')); +``` + +Your fifth `.key` should have `black--key` in the `class`. + +```js +const fifth = document.querySelectorAll('.key')?.[4]; +assert(fifth?.classList?.contains('black--key')); +``` + +Your sixth `.key` should have `black--key` in the `class`. + +```js +const sixth = document.querySelectorAll('.key')?.[5]; +assert(sixth?.classList?.contains('black--key')); +``` + +Your seventh `.key` should have `black--key` in the `class`. + +```js +const seventh = document.querySelectorAll('.key')?.[6]; +assert(seventh?.classList?.contains('black--key')); +``` + +You should have five `.black--key` elements. + +```js +const blackKeys = document.querySelectorAll('.black--key'); +assert(blackKeys?.length === 5); +``` + +You should have seven `.key` elements. + +```js +const keys = document.querySelectorAll('.key'); +assert(keys?.length === 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md new file mode 100644 index 00000000000000..30f34f0019a572 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md @@ -0,0 +1,74 @@ +--- +id: 612e8279827a28352ce83a72 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Now copy the set of seven `.key` elements, and paste two more sets into the `.keys` div. + +# --hints-- + +You should have 21 `.key` elements. + +```js +const keys = document.querySelectorAll('.key'); +assert(keys?.length === 21); +``` + +You should have 15 `.black--key` elements. + +```js +const blackKeys = document.querySelectorAll('.black--key'); +assert(blackKeys?.length === 15); +``` + +All `.key` elements should be within your `.keys` element. + +```js +const keys = document.querySelector('.keys'); +assert(keys?.querySelectorAll('.key')?.length === 21); +``` + +All `.black--key` elements should be within your `.keys` element. + +```js +const keys = document.querySelector('.keys'); +assert(keys?.querySelectorAll('.black--key')?.length === 15); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md new file mode 100644 index 00000000000000..9d8262affc3717 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md @@ -0,0 +1,99 @@ +--- +id: 612e83ec2eca1e370f830511 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Add a `link` element within your `head` element. For that `link` element, set the `rel` attribute to `stylesheet` and the `href` to `./styles.css`. + +# --hints-- + +Your code should have a `link` element. + +```js +assert.match(code, //i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / + + + --fcc-editable-region-- + + Piano + + --fcc-editable-region-- + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md new file mode 100644 index 00000000000000..d539ea1ac7d8df --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md @@ -0,0 +1,77 @@ +--- +id: 612e89562043183c86df287c +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Browsers can apply default margin and padding values to specific elements. To make sure your piano looks correct, you need to reset the box model. + +Add an `html` rule selector to your CSS file, and set the `box-sizing` property to `border-box`. + +# --hints-- + +You should have an `html` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')); +``` + +Your `html` selector should have the `box-sizing` property set to `border-box`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md new file mode 100644 index 00000000000000..eaa7f3845165a5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md @@ -0,0 +1,83 @@ +--- +id: 612e89d254fe5d3df7d6693d +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Now that you have reset the `html` box model, you need to pass that on to the elements within as well. To do this, you can set the `box-sizing` property to `inherit`, which will tell the targeted elements to use the same value as the parent element. + +You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the `::before` and `::after` pseudo-elements. + +The `::before` selector creates a pseudo-element which is the first child of the selected element, while the `::after` selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project. + +For now, create a CSS selector to target all elements with `*`, and include the pseudo-elements with `::before` and `::after`. Set the `box-sizing` property to `inherit`. + +# --hints-- + +You should have a `*, ::before, ::after` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')); +``` + +Your `*, ::before, ::after` selector should have the `box-sizing` property set to `inherit`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +html { + box-sizing: border-box; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md new file mode 100644 index 00000000000000..22689fbd3c2076 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md @@ -0,0 +1,95 @@ +--- +id: 612e8eebe3a6dc3fcc33a66f +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Now target your `#piano` element with an `id` selector. Set `background-color` property to `#00471b`, the `width` property to `992px` and the `height` property to `290px`. + +# --hints-- + +You should have a `#piano` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')); +``` + +Your `#piano` selector should have the `background-color` property set to `#00471b`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)'); +``` + +Your `#piano` selector should have a `width` property set to `992px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px'); +``` + +Your `#piano` selector should have the `height` set to `290px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md new file mode 100644 index 00000000000000..589b568a35c640 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md @@ -0,0 +1,81 @@ +--- +id: 612e95ef2e4bdf41f69067f9 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Set the `margin` of the `#piano` to `80px auto`. + +# --hints-- + +Your `#piano` selector should have the `margin` property set to `80px auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +--fcc-editable-region-- +#piano { + background-color: #00471b; + width: 992px; + height: 290px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md new file mode 100644 index 00000000000000..98474ac22d0ecd --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md @@ -0,0 +1,102 @@ +--- +id: 612e96fc87fe8e44f69f7ec5 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Time to style the keys. Below the `#piano` rule, target the `.keys` element with a `class` selector. Give the new rule a `background-color` property of `#040404`, a `width` property of `949px` and a `height` property of `180px`. + +# --hints-- + +You should have a `.keys` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')); +``` + +Your `.keys` selector should have a `background-color` property set to `#040404`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)'); +``` + +Your `.keys` selector should have the `width` property set to `949px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px'); +``` + +Your `.keys` selector should have a `height` property set to `180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md new file mode 100644 index 00000000000000..626289efbd44b4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md @@ -0,0 +1,88 @@ +--- +id: 612e98f3245c98475e49cfc6 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Give the `.keys` a `padding-left` of `2px`. + +# --hints-- + +Your `.keys` selector should have a `padding-left` property set to `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; +} + +--fcc-editable-region-- +.keys { + background-color: #040404; + width: 949px; + height: 180px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md new file mode 100644 index 00000000000000..20cf09d8b8e076 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md @@ -0,0 +1,89 @@ +--- +id: 612e9a21381a1949327512e6 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Move the keys into position by adjusting the `#piano` selector. Set the `padding` property to `90px 20px 0 20px`. + +# --hints-- + +Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +--fcc-editable-region-- +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; +} +--fcc-editable-region-- + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md new file mode 100644 index 00000000000000..cfb6ace0682e34 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md @@ -0,0 +1,117 @@ +--- +id: 612e9d142affc44a453655db +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`. + +# --hints-- + +You should have a `.key` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')); +``` + +Your `.key` selector should have a `background-color` property set to `#ffffff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)'); +``` + +Your `.key` selector should have the `position` property set to `relative`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative'); +``` + +Your `.key` selector should have a `width` property set to `41px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px'); +``` + +Your `.key` selector should have a `height` property set to `175px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px'); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md new file mode 100644 index 00000000000000..79d798d06bd622 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md @@ -0,0 +1,103 @@ +--- +id: 612e9f1e7e5ccd4fa9ada0be +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Give the `.key` a `margin` of `2px` and a `float` property set to `left`. + +# --hints-- + +Your `.key` selector should have a `margin` property set to `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px'); +``` + +Your `.key` selector should have a `float` property set to `left`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +--fcc-editable-region-- +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md new file mode 100644 index 00000000000000..83382588091259 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md @@ -0,0 +1,119 @@ +--- +id: 612ea4c4993aba52ab4aa32e +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Now it is time to use the pseudo-selectors you prepared for earlier. To create the black keys, add a new `.key.black--key::after` selector. This will target the elements with the class `key black--key`, and select the pseudo-element after these elements in the HTML. + +In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty. + +The `content` property is used to set or override the content of the element. By default, the psuedo-elements created by the `::before` and `::after` pseudo-selectors are empty, and the elements will not be rendered to the page. Setting the `content` property to an empty string `""` will ensure the element is rendered to the page while still being empty. + +If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass. + +# --hints-- + +You should have a `.key.black--key::after` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')); +``` + +Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)'); +``` + +Your `.key.black--key::after` selector should have a `content` property set to `""`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md new file mode 100644 index 00000000000000..95cff83e89653f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md @@ -0,0 +1,110 @@ +--- +id: 612ea97df5742154772f312e +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Give the `.key.black--key::after` a `position` property set to `absolute` and a `left` property set to `-18px`. + +# --hints-- + +Your `.key.black--key::after` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute'); +``` + +Your `.key.black--key::after` selector should have a `left` property set to `-18px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +--fcc-editable-region-- +.key.black--key::after { + background-color: #1d1e22; + content: ""; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md new file mode 100644 index 00000000000000..1a90c13773462c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md @@ -0,0 +1,112 @@ +--- +id: 612ead8788d28655ef8db056 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +For the `.key.black--key::after`, set the `width` to `32px` and the `height` to `100px`. + +# --hints-- + +Your `.key.black--key::after` should have a `width` property set to `32px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px'); +``` + +Your `.key.black--key::after` should have a `height` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +--fcc-editable-region-- +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md new file mode 100644 index 00000000000000..a6b261c11affae --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md @@ -0,0 +1,144 @@ +--- +id: 612eaf56b7ba3257fdbfb0db +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +The piano needs the freeCodeCamp logo to make it official. + +Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`. + +# --hints-- + +You should add a new `img` element. + +```js +assert(document.querySelectorAll('img')?.length === 1); +``` + +Your `img` element should come before your first `.key` element. + +```js +const img = document.querySelector('img'); +assert(img?.nextElementSibling?.className === 'keys'); +assert(img?.previousElementSibling === null); +``` + +Your `img` element should have a `class` set to logo. + +```js +const img = document.querySelector('img'); +assert(img?.className === 'logo'); +``` + +Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. + +```js +const img = document.querySelector('img'); +assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg'); +``` + +Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`. + +```js +assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo'); +``` + +Remember that casing and spelling matter. + +```js +assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + + --fcc-editable-region-- +
+
+ --fcc-editable-region-- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md new file mode 100644 index 00000000000000..b440525a213896 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md @@ -0,0 +1,129 @@ +--- +id: 612eb4893b63c75bb9251ddf +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Start styling the logo by creating a `.logo` selector. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`. + +# --hints-- + +You should have a `.logo` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.logo')); +``` + +Your `.logo` selector should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px'); +``` + +Your `.logo` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute'); +``` + +Your `.logo` selector should have a `top` property set to `23px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md new file mode 100644 index 00000000000000..96cde490be7141 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md @@ -0,0 +1,115 @@ +--- +id: 612eb75153591b5e3b1ab65e +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`. + +# --hints-- + +Your `#piano` selector should have a `position` property set to `relative`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +--fcc-editable-region-- +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} +--fcc-editable-region-- + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md new file mode 100644 index 00000000000000..a366499ca2c30a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md @@ -0,0 +1,116 @@ +--- +id: 612eb7ca8c275d5f89c73333 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +To smooth the sharp edges of the piano and keys, start by giving the `#piano` a `border-radius` of `10px`. + +# --hints-- + +Your `#piano` selector should have a `border-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +--fcc-editable-region-- +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; +} +--fcc-editable-region-- + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md new file mode 100644 index 00000000000000..8fbcc75a72f097 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md @@ -0,0 +1,117 @@ +--- +id: 612eb8e984cd73677a92b7e9 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Give the `.key` selector a `border-radius` value of `0 0 3px 3px`. + +# --hints-- + +Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +--fcc-editable-region-- +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} +--fcc-editable-region-- + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md new file mode 100644 index 00000000000000..071c5a0daf28d0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md @@ -0,0 +1,118 @@ +--- +id: 612eb934f64a4d6890a45518 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to match the keys. + +# --hints-- + +Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +--fcc-editable-region-- +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; +} +--fcc-editable-region-- + +.logo { + width: 200px; + position: absolute; + top: 23px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md new file mode 100644 index 00000000000000..bc306625f97a63 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md @@ -0,0 +1,127 @@ +--- +id: 612ebcba99bfa46a15370b11 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Now you need to make it responsive. Add a `@media` query with a `max-width` of `768px`. + +# --hints-- + +You should add a new `@media` query. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1); +``` + +Your `@media` query should have a `max-width` of `768px`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md new file mode 100644 index 00000000000000..4ab31ee005a7a8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md @@ -0,0 +1,133 @@ +--- +id: 612ebe7fe6d07e6b76d1cae2 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Add a new `#piano` selector within your `@media` query, and set the `width` to `358px`. + +# --hints-- + +Your `@media` rule should have a `#piano` selector. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const piano = rules?.find(rule => rule.selectorText === '#piano'); +assert(piano); +``` + +Your new `#piano` selector should have a `width` of `358px`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const piano = rules?.find(rule => rule.selectorText === '#piano'); +assert(piano?.style.width === '358px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +--fcc-editable-region-- +@media (max-width: 768px) { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md new file mode 100644 index 00000000000000..0175c56dae38d5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md @@ -0,0 +1,136 @@ +--- +id: 612ebedec97e096c8bf64999 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Within the `@media` query, add a `.keys` selector and set the `width` to `318px`. + +# --hints-- + + +Your `@media` rule should have a `.keys` selector. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const keys = rules?.find(rule => rule.selectorText === '.keys'); +assert(keys); +``` + +Your new `.keys` selector should have a `width` of `318px`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const keys = rules?.find(rule => rule.selectorText === '.keys'); +assert(keys?.style.width === '318px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +--fcc-editable-region-- +@media (max-width: 768px) { + #piano { + width: 358px; + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md new file mode 100644 index 00000000000000..8e90e21a505e2a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md @@ -0,0 +1,139 @@ +--- +id: 612ebf9a210f2b6d77001e68 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Now add a `.logo` selector to the `@media` query, and set the `width` property to `150px`. + +# --hints-- + +Your `@media` rule should have a `.logo` selector. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const logo = rules?.find(rule => rule.selectorText === '.logo'); +assert(logo); +``` + +Your new `.logo` selector should have a `width` of `150px`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const logo = rules?.find(rule => rule.selectorText === '.logo'); +assert(logo?.style.width === '150px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +--fcc-editable-region-- +@media (max-width: 768px) { + #piano { + width: 358px; + } + + .keys { + width: 318px; + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md new file mode 100644 index 00000000000000..e7781588289f4b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md @@ -0,0 +1,133 @@ +--- +id: 612ec0490ae8626e9adf82e4 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +You might have noticed the keys collapse when the browser window is smaller than `768px`. Set `overflow` to `hidden` in the first `.keys` selector, to take care of this issue. This property will hide any element that is pushed outside the set `width` value of `.keys`. + +# --hints-- + +Your original `.keys` selector should have the `overflow` property set to `hidden`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +--fcc-editable-region-- +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} +--fcc-editable-region-- + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +@media (max-width: 768px) { + #piano { + width: 358px; + } + + .keys { + width: 318px; + } + + .logo { + width: 150px; + } +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md new file mode 100644 index 00000000000000..86268fada3157c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md @@ -0,0 +1,144 @@ +--- +id: 612ec19d5268da7074941f84 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Add another `@media` rule to apply if the browser window is bigger than `769px` but smaller than `1199px`. + +# --hints-- + +You should add a new `@media` query. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2); +``` + +Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`. + +```js +const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText; +assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)'); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; + overflow: hidden; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +@media (max-width: 768px) { + #piano { + width: 358px; + } + + .keys { + width: 318px; + } + + .logo { + width: 150px; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md new file mode 100644 index 00000000000000..190d2eca0d36c8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md @@ -0,0 +1,288 @@ +--- +id: 612ec29c84b9a6718b1f5cec +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`. + +With that, your piano is complete! + +# --hints-- + +Your second `@media` rule should have a `#piano` selector. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); +const piano = rules?.find(rule => rule.selectorText === '#piano'); +assert(piano); +``` + +Your new `#piano` selector should have a `width` of `675px`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); +const piano = rules?.find(rule => rule.selectorText === '#piano'); +assert(piano?.style.width === '675px'); +``` + +Your second `@media` rule should have a `.keys` selector. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); +const keys = rules?.find(rule => rule.selectorText === '.keys'); +assert(keys); +``` + +Your new `.keys` selector should have a `width` of `633px`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); +const keys = rules?.find(rule => rule.selectorText === '.keys'); +assert(keys?.style.width === '633px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; + overflow: hidden; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +@media (max-width: 768px) { + #piano { + width: 358px; + } + + .keys { + width: 318px; + } + + .logo { + width: 150px; + } +} + +--fcc-editable-region-- +@media (max-width: 1199px) and (min-width: 769px) { + +} +--fcc-editable-region-- +``` + +# --solutions-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; + overflow: hidden; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +@media (max-width: 768px) { + #piano { + width: 358px; + } + + .keys { + width: 318px; + } + + .logo { + width: 150px; + } +} + +@media (max-width: 1199px) and (min-width: 769px) { + #piano { + width: 675px; + } + + .keys { + width: 633px; + } +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md new file mode 100644 index 00000000000000..0354bd888aadd7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md @@ -0,0 +1,55 @@ +--- +id: 60a3e3396c7b40068ad6996a +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +By now, you should be familiar with the basic elements an HTML page should have. + +Set up your code with a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element. + +# --hints-- + +Your code should have a `` declaration. + +```js +assert(code.match(//i)); +``` + +Your code should have an `html` element. + +```js +assert(document.querySelectorAll('html').length === 1); +``` + +Your code should have a `head` element within the `html` element. + +```js +assert(document.querySelectorAll('head').length === 1); +``` + +Your code should have a `body` element within the `html` element. + +```js +assert(document.querySelectorAll('body').length === 1); +``` + +Your `head` element should come before your `body` element. + +```js +assert(document.querySelector('body').previousElementSibling.tagName === 'HEAD'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md new file mode 100644 index 00000000000000..9582c687c7ea2e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md @@ -0,0 +1,65 @@ +--- +id: 60a3e3396c7b40068ad6996b +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Within the `head` element, add a `meta` tag which sets the `charset` to `UTF-8`, and a `title` element with the value `Rothko Painting`. + +Within the `body` element, add an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. +# --hints-- + +Your code should have a `meta` tag. + +```js +assert(document.querySelectorAll('meta').length === 1); +``` + +The `meta` tag should set the `charset` to `UTF-8`. + +```js +assert(document.querySelector('meta').getAttribute('charset') === 'UTF-8'); +``` + +Your code should have a `title` element. + +```js +assert(document.querySelectorAll('title').length === 1); +``` + +The `title` should be `Rothko Painting`. + +```js +assert(document.querySelector('title').innerText === 'Rothko Painting'); +``` + +Your code should have an `img` element. + +```js +assert(document.querySelectorAll('img').length === 1); +``` + +The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. + +```js +assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md new file mode 100644 index 00000000000000..45b81206b357b7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md @@ -0,0 +1,42 @@ +--- +id: 60a3e3396c7b40068ad6996c +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +In the CSS box model, every HTML element is treated as a box with four areas. + +Imagine you receive a box from your favorite online retailer -- the content is the item in the box, or in our case, a header, paragraph, or image element. + +Change the `src` attribute in the `` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`. + +# --hints-- + +The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png` + +```js +assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko Painting + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md new file mode 100644 index 00000000000000..765122fc40d12e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md @@ -0,0 +1,41 @@ +--- +id: 60a3e3396c7b40068ad6996d +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it. + +Think of the border like the cardboard box your item was shipped in. + +Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` + +# --hints-- + +The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` + +```js +assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko Painting + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md new file mode 100644 index 00000000000000..df9f52fe8a47ef --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md @@ -0,0 +1,43 @@ +--- +id: 60a3e3396c7b40068ad6996e +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Margin is the area outside of the box, and can be used to control the space between other boxes or elements. + +Here the bottom element has a larger top margin, pushing it further down the page. + +Now that you understand the CSS box model, let's get started on the Rothko painting. + +Remove the `` element. + +# --hints-- + +You should not have an `img` element in your code. + +```js +assert(document.querySelector('img') === null); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko Painting + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md new file mode 100644 index 00000000000000..d5c739abeac89f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md @@ -0,0 +1,47 @@ +--- +id: 60a3e3396c7b40068ad6996f +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Add a `div` element in the `body`. + +Set the `class` attribute equal to `canvas`. For example, `
`. + +This will act as the canvas for your painting. + +# --hints-- + +Your code should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 1) +``` + +The `div` element should have a `class` with the value `canvas`. + +```js +assert(document.querySelector('div').className.split(' ').includes('canvas')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko Painting + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md new file mode 100644 index 00000000000000..0ea1371583c0b8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md @@ -0,0 +1,59 @@ +--- +id: 60a3e3396c7b40068ad69970 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Before you can start styling the `div` you added, you need to link your CSS to your HTML. + +Add a `link` element to link your `styles.css` file. Set the `href` to `./styles.css`, and remember to set the `rel` attribute to `stylesheet`. + +# --hints-- + +Your code should have a `link` element. + +```js +assert(//.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko Painting +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md new file mode 100644 index 00000000000000..5692e34e757f21 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md @@ -0,0 +1,69 @@ +--- +id: 60a3e3396c7b40068ad69971 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Time for CSS. + +Even though your `
` has no text, it's still treated as a box with content. +Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. +Here's a CSS rule that sets the width of the class `card` to 300 pixels: + +```css +.card { + width: 300px; +} +``` + +# --hints-- + +Your code should have a `.canvas` selector. + +```js +const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas'); +assert(hasCanvas) +``` + +You should set the `width` property to `500px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px') +assert(hasWidth); +``` + +Your `.canvas` element should have a `width` of `500px`. + +```js +const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width'); +assert(width === '500px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko Painting + + + +
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md new file mode 100644 index 00000000000000..65f77ecc018afa --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md @@ -0,0 +1,54 @@ +--- +id: 60a3e3396c7b40068ad69972 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Add the `height` property with the value `600px` to your `.canvas` rule. + +# --hints-- + +You should set the `height` property to `600px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px'); +assert(hasHeight); +``` + +Your `.canvas` element should have a `height` of `600px`. + +```js +const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height'); +assert(canvasHeight === '600px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md new file mode 100644 index 00000000000000..6e38ea0aace5e2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md @@ -0,0 +1,55 @@ +--- +id: 60a3e3396c7b40068ad69973 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Change the `background-color` of the canvas to `#4d0f00`. + +# --hints-- + +You should set the `background-color` property to `#4d0f00`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)'); +assert(hasBackground); +``` + +Your `.canvas` element should have a `background-color` of `#4d0f00`. + +```js +const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color'); +assert(canvasBackground === 'rgb(77, 15, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md new file mode 100644 index 00000000000000..2af09ce1ff8f28 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md @@ -0,0 +1,67 @@ +--- +id: 60a3e3396c7b40068ad69974 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Every painting needs a frame. + +Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class. +# --hints-- + +You should add a new `div` element. + +```js +assert(document.querySelectorAll('div').length === 2) +``` + +Your `.canvas` element should be nested in the new `div` element. + +```js +assert(document.querySelector('.canvas').parentElement.tagName === 'DIV'); +``` + +Your new `div` should have a `class` with the value `frame`. + +```js +assert(document.querySelector('div').className.split(' ').includes('frame')); +``` + +Your new `div` should be within your `body` element. + +```js +assert(document.querySelector('div').parentElement.tagName === 'BODY'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} +``` + +```html + + + + + Rothko Painting + + + +--fcc-editable-region-- + +
+
+ +--fcc-editable-region-- + + ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md new file mode 100644 index 00000000000000..351e6bf526ecd1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md @@ -0,0 +1,67 @@ +--- +id: 60a3e3396c7b40068ad69975 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Write a new rule using the `.frame` class selector. + +Use the `border` shorthand declaration to give the `.frame` element a solid, black border with a width of `50px`. + +# --hints-- + +Your code should have a `.frame` selector. + +```js +const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame'); +assert(hasFrame); +``` + +You should set the `border` property to `50px solid black`. + +```js +const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black'); +assert(hasBorder); +``` + +Your `.frame` element should have a `50px solid black` `border`. + +```js +const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border'); +assert(frameBorder === '50px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md new file mode 100644 index 00000000000000..a66a09fe26bfda --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md @@ -0,0 +1,64 @@ +--- +id: 60a3e3396c7b40068ad69976 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +The frame is much too wide. + +In `.frame`, set its `width` to 500 pixels. + +# --hints-- + +You should set the `width` property to `500px`. + +```js +const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px'); +assert(widthFilter.length === 2); +``` + +Your `.frame` element should have a `width` of `500px`. + +```js +const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width'); +assert(frameWidth === '500px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md new file mode 100644 index 00000000000000..fffa032b224934 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md @@ -0,0 +1,65 @@ +--- +id: 60a3e3396c7b40068ad69977 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Use padding to adjust the spacing within an element. + +In `.frame`, use the `padding` shorthand property to increase the space between the `.frame` and `.canvas` elements by `50px`. The shorthand will increase space in the top, bottom, left, and right of the element's border and canvas within. + +# --hints-- + +You should set the `padding` property to `50px`. + +```js +const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px'); +assert(hasPadding); +``` + +Your `.frame` element should have a `padding` value of `50px`. + +```js +const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding'); +assert(framePadding === '50px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md new file mode 100644 index 00000000000000..34a33d9846d777 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md @@ -0,0 +1,66 @@ +--- +id: 60a3e3396c7b40068ad69978 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Use margins to adjust the spacing outside of an element. + +Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page. + +# --hints-- + +You should set the `margin` property to `20px auto`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto'); +assert(hasMargin); +``` + +Your `.frame` element should have a `margin` value of `20px auto`. + +```js +const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin'); +assert(frameMargin === '20px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md new file mode 100644 index 00000000000000..74560ee054158f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md @@ -0,0 +1,71 @@ +--- +id: 60a3e3396c7b40068ad69979 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Add a new `div` element inside of your `.canvas` element. + +Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle. + +# --hints-- + +You should create a new `div` element. + +```js +assert(document.querySelectorAll('div').length === 3); +``` + +You should nest the new `div` element within your `.canvas` element. + +```js +assert(document.querySelector('.canvas').children[0].tagName === 'DIV'); +``` + +Your new `div` should have a `class` attribute with a value `one`. + +```js +assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one')); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md new file mode 100644 index 00000000000000..6490cbccbe01cb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md @@ -0,0 +1,74 @@ +--- +id: 60a3e3396c7b40068ad6997a +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Write a new rule that targets `.one` and set its `width` to 425 pixels. + +# --hints-- + +You should have a `.one` selector. + +```js +const hasOne = new __helpers.CSSHelp(document).getStyle('.one'); +assert(hasOne); +``` + +You should set the `width` property to `425px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px'); +assert(hasWidth); +``` + +Your `.one` element should have a `width` value of `425px`. + +```js +const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width'); +assert(oneWidth === '425px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md new file mode 100644 index 00000000000000..4478884a82d7ed --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md @@ -0,0 +1,70 @@ +--- +id: 60a3e3396c7b40068ad6997b +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Now set the `height` for `.one` to 150 pixels. + +# --hints-- + +You should set the `height` property to `150px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px'); +assert(hasHeight); +``` + +Your `.one` element should have a `height` value of `150px`. + +```js +const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height'); +assert(oneHeight === '150px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md new file mode 100644 index 00000000000000..bd9e89c942fd7c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md @@ -0,0 +1,71 @@ +--- +id: 60a3e3396c7b40068ad6997c +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Set the `background-color` of `.one` to `#efb762`. + +# --hints-- + +You should set the `background-color` property to `#efb762`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)'); +assert(hasBackground) +``` + +Your `.one` element should have a `background-color` value of `#efb762`. + +```js +const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color'); +assert(oneBackground === 'rgb(239, 183, 98)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md new file mode 100644 index 00000000000000..11b91323beccf1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md @@ -0,0 +1,74 @@ +--- +id: 60a3e3396c7b40068ad6997d +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Use margins to position the `.one` element on the canvas. + +Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`. + +# --hints-- + +You should set the `margin` property to `20px auto`. + +```js +const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto'); +assert(marginFilter.length === 2); +``` + +Your `.one` element should have a `margin` value of `20px auto`. + +```js +const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin'); +assert(oneMargin === '20px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md new file mode 100644 index 00000000000000..902607455a2ac4 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md @@ -0,0 +1,75 @@ +--- +id: 60a3e3396c7b40068ad6997e +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels. + +Add `padding` of `1px` to the `.canvas` element to give the `.one` element something solid to push off of. + +# --hints-- + +You should set the `padding` property to `1px`. + +```js +const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px'); +assert(hasPadding); +``` + +Your `.canvas` element should have a `padding` value of `1px`. + +```js +const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding'); +assert(canvasPadding === '1px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md new file mode 100644 index 00000000000000..05297dd3a73d3e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md @@ -0,0 +1,82 @@ +--- +id: 60a3e3396c7b40068ad6997f +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels. + +Replace the `padding` property with `overflow` set to `hidden` - changing the canvas back to its original dimensions. + +# --hints-- + +You should remove the `padding` property from the `.canvas` selector. + +```js +const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding'); +assert(!canvasPadding); +``` + +You should set the `overflow` property to `hidden`. + +```js +const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden'); +assert(hasOverflow); +``` + +Your `.canvas` element should have an `overflow` value of `hidden`. + +```js +const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow'); +assert(canvasOverflow === 'hidden') +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +--fcc-editable-region-- + padding: 1px; +--fcc-editable-region-- +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md new file mode 100644 index 00000000000000..94455c3665d2d8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md @@ -0,0 +1,84 @@ +--- +id: 60a3e3396c7b40068ad69980 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle. + +# --hints-- + +You should not change the existing `.one` element. + +```js +assert(document.querySelectorAll('.one').length === 1); +``` + +You should have a second `div` element in your `.canvas` element. + +```js +assert(document.querySelector('.canvas').children[1].tagName === 'DIV'); +``` + +Your second `div` element should have a `class` value of `two`. + +```js +assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two')); +``` + +Your `.two` element should come after your `.one` element. + +```js +assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one')); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md new file mode 100644 index 00000000000000..da0bd2e49db6d3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md @@ -0,0 +1,84 @@ +--- +id: 60a3e3396c7b40068ad69981 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels. + +# --hints-- + +You should have a `.two` selector. + +```js +const hasTwo = new __helpers.CSSHelp(document).getStyle('.two'); +assert(hasTwo); +``` + +You should set the `width` property to `475px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px'); +assert(hasWidth); +``` + +Your `.two` element should have a `width` value of `475px`. + +```js +const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width'); +assert(twoWidth === '475px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md new file mode 100644 index 00000000000000..6a7eb6c6d086f6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md @@ -0,0 +1,79 @@ +--- +id: 60a3e3396c7b40068ad69982 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Set the `height` of the `.two` element to 200 pixels. + +# --hints-- + +You should set the `height` property to `200px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px'); +assert(hasHeight); +``` + +Your `.two` element should have a `height` value of `200px`. + +```js +const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height'); +assert(twoHeight === '200px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md new file mode 100644 index 00000000000000..19608f2692aa5a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md @@ -0,0 +1,80 @@ +--- +id: 60a3e3396c7b40068ad69983 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Set the `background-color` of the `.two` element to `#8f0401`. + +# --hints-- + +You should set the `background-color` property to `#8f0401`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)'); +assert(hasBackground); +``` + +Your `.two` element should have a `background-color` value of `#8f0401`. + +```js +const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color'); +assert(twoBackground === 'rgb(143, 4, 1)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md new file mode 100644 index 00000000000000..2def25b262fcca --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md @@ -0,0 +1,81 @@ +--- +id: 60a3e3396c7b40068ad69984 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Center the `.two` element by setting its `margin` to `auto`. + +# --hints-- + +You should set the `margin` property to `auto`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto'); +assert(hasMargin); +``` + +Your `.two` element should have a `margin` value of `auto`. + +```js +const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); +assert(twoMargin === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md new file mode 100644 index 00000000000000..5994749bd4f2e0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md @@ -0,0 +1,93 @@ +--- +id: 60a3e3396c7b40068ad69986 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle. + +# --hints-- + +Your existing `.one` and `.two` elements should not be changed. + +```js +assert(document.querySelectorAll('.one').length === 1); +assert(document.querySelectorAll('.two').length === 1); +``` + +Your new `div` should be nested in your `.canvas` element. + +```js +assert(document.querySelector('.canvas').children[2].tagName === 'DIV'); +``` + +Your new `div` should come after your `.two` element. + +```js +assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV'); +``` + +Your new `div` element should have a `class` with the value `three`. + +```js +assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three')); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md new file mode 100644 index 00000000000000..1376ec85ccf07e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md @@ -0,0 +1,94 @@ +--- +id: 60a3e3396c7b40068ad69987 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +You don't always have to use pixels when sizing an element. + +Create a new rule, `.three`, and set its `width` to `91%`. + +# --hints-- + +You should use the `.three` selector. + +```js +const hasThree = new __helpers.CSSHelp(document).getStyle('.three'); +assert(hasThree); +``` + +You should set the `width` property to `91%`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%'); +assert(hasWidth); +``` + +Your `.three` element should have a `width` value of `91%`. + +```js +const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width'); +assert(threeWidth === '91%'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md new file mode 100644 index 00000000000000..c1a860a81826a1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md @@ -0,0 +1,87 @@ +--- +id: 60a3e3396c7b40068ad69988 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Set the `height` of `.three` to `28%`. + +# --hints-- + +You should set the `height` property to `28%`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%'); +assert(hasHeight); +``` + +Your `.three` element should have a `height` value of `28%`. + +```js +const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height'); +assert(threeHeight === '28%'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +.three { + width: 91%; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md new file mode 100644 index 00000000000000..b5a40dfd37c1f9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md @@ -0,0 +1,88 @@ +--- +id: 60a3e3396c7b40068ad69989 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Change the `background-color` of `.three` to `#b20403`. + +# --hints-- + +You should set the `background-color` property to `#b20403`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)'); +assert(hasBackground); +``` + +Your `.three` element should have a `background-color` value of `#b20403`. + +```js +const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color'); +assert(threeBackground === 'rgb(178, 4, 3)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +.three { + width: 91%; + height: 28%; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md new file mode 100644 index 00000000000000..3ed4e87a89a31c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md @@ -0,0 +1,89 @@ +--- +id: 60a3e3396c7b40068ad6998a +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Center the `.three` element on the canvas by setting its `margin` to `auto`. + +# --hints-- + +You should set the `margin` property to `auto`. + +```js +const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto'); +assert(marginFilter.length === 2); +``` + +Your `.three` element should have a `margin` value of `auto`. + +```js +const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin'); +assert(threeMargin === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md new file mode 100644 index 00000000000000..e16dc6aa5136b8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md @@ -0,0 +1,93 @@ +--- +id: 60a3e3396c7b40068ad6998b +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +It's helpful to have your margins push in one direction. + +In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels. + +In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels. + +# --hints-- + +You should set the `margin` property to `0 auto 20px`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px'); +assert(hasMargin); +``` + +Your `.two` element should have a `margin` value of `0 auto 20px`. + +```js +const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); +assert(twoMargin === '0px auto 20px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; +--fcc-editable-region-- + margin: auto; +--fcc-editable-region-- +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md new file mode 100644 index 00000000000000..66c06fd0e9c19e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md @@ -0,0 +1,92 @@ +--- +id: 60a3e3396c7b40068ad6998c +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +The colors and shapes of your painting are too sharp to pass as a Rothko. + +Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element. + +# --hints-- + +You should set the `filter` property to `blur(2px)`. + +```js +const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)'); +assert(hasFilter); +``` + +Your `.canvas` element should have a `filter` value of `blur(2px)`. + +```js +const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter'); +assert(canvasFilter === 'blur(2px)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md new file mode 100644 index 00000000000000..0731cd76597139 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md @@ -0,0 +1,116 @@ +--- +id: 60a3e3396c7b40068ad6998d +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel. + +Here's an example of a rule that increases the `blur` of two elements: + +```css +h1, p { + filter: blur(3px); +} +``` + +# --hints-- + +You should have a `.one, .two` selector. + +```js +const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two'); +assert(oneTwo); +``` + +You should set the `filter` property to `blur(1px)`. + +```js +const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)'); +assert(hasFilter) +``` + +Your `.one` element should have a `filter` value of `blur(1px)`. + +```js +const one = document.querySelector('.one'); +const oneFilter = getComputedStyle(one).filter; +assert(oneFilter === 'blur(1px)'); +``` + +Your `.two` element should have a filter value of `blur(1px)`. + +```js +const two = document.querySelector('.two'); +const twoFilter = getComputedStyle(two).filter; +assert(twoFilter === 'blur(1px)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md new file mode 100644 index 00000000000000..504855f1620fa7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md @@ -0,0 +1,95 @@ +--- +id: 60a3e3396c7b40068ad6998e +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Increase the `blur` of `.three` by 2 pixels. + +# --hints-- + +You should set the `filter` property to `blur(2px)`. + +```js +const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)'); +assert(filterFilter.length === 2); +``` + +Your `.three` element should have a `filter` value of `blur(2px)`. + +```js +const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter'); +assert(threeFilter === 'blur(2px)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md new file mode 100644 index 00000000000000..251253face2f6b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md @@ -0,0 +1,98 @@ +--- +id: 60a3e3396c7b40068ad6998f +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +The rectangles are too small and their edges don't have the soft quality of a painting. + +Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`. + +# --hints-- + +You should set the `box-shadow` property to `0 0 3px 3px #efb762`. + +```js +const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px'); +assert(hasBoxShadow); +``` + +Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`. + +```js +const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow'); +assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md new file mode 100644 index 00000000000000..8ecac547a24951 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md @@ -0,0 +1,97 @@ +--- +id: 60a3e3396c7b40068ad69990 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`. + +# --hints-- + +You should set the `box-shadow` property to `0 0 3px 3px #8f0401`. + +```js +const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px'); +assert(hasBoxShadow); +``` + +Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`. + +```js +const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow'); +assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md new file mode 100644 index 00000000000000..a0e9e6ae11b9a1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md @@ -0,0 +1,98 @@ +--- +id: 60a3e3396c7b40068ad69991 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`. + +# --hints-- + +You should set the `box-shadow` property to `0 0 5px 5px #b20403`. + +```js +const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px'); +assert(hasBoxShadow); +``` + +Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`. + +```js +const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow'); +assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md new file mode 100644 index 00000000000000..f26f0c94b90599 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md @@ -0,0 +1,101 @@ +--- +id: 60a3e3396c7b40068ad69992 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The corners of each rectangle are still too sharp. + +Round each corner of the `.one` element by 9 pixels, using the `border-radius` property. + +# --hints-- + +You should set the `border-radius` property to `9px`. + +```js +const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px'); +assert(hasBorderRadius); +``` + +Your `.one` element should have a `border-radius` value of `9px`. + +```js +const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius'); +assert(oneBorderRadius === '9px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md new file mode 100644 index 00000000000000..e3effb601d3018 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md @@ -0,0 +1,100 @@ +--- +id: 60a3e3396c7b40068ad69993 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Use the `border-radius` property on the `.two` selector, to set its top-left and bottom-right radii to `8px`, and top-right and bottom-left radii to `10px`. + +# --hints-- + +You should set the `border-radius` property to `8px 10px`. + +```js +const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px'); +assert(hasBorderRadius); +``` + +Your `.two` element should have a `border-radius` value of `8px 10px`. + +```js +const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius'); +assert(twoBorderRadius === '8px 10px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md new file mode 100644 index 00000000000000..6656f427a1bd9d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md @@ -0,0 +1,103 @@ +--- +id: 60a3e3396c7b40068ad69994 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners. + +Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels. + +# --hints-- + +You should set the `border-radius` property to `30px 25px 60px 12px`. + +```js +const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px'); +assert(hasBorderRadius); +``` + +Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`. + +```js +const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius'); +assert(threeBorderRadius === '30px 25px 60px 12px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md new file mode 100644 index 00000000000000..14e9bd84d529c2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md @@ -0,0 +1,104 @@ +--- +id: 60a3e3396c7b40068ad69995 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Rotate each rectangle to give them more of an imperfect, hand-painted look. + +Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees. + +# --hints-- + +You should set the `transform` property to `rotate(-0.6deg)`. + +```js +const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)'); +assert(hasTransform); +``` + +Your `.one` element should have a `transform` value of `rotate(-0.6deg)`. + +```js +const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform'); +assert(oneTransform === 'rotate(-0.6deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md new file mode 100644 index 00000000000000..ed50b6b0893ad9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md @@ -0,0 +1,103 @@ +--- +id: 60a3e3396c7b40068ad69996 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Rotate the `.two` element clockwise by 0.4 degrees. + +# --hints-- + +You should set the `transform` property to `rotate(0.4deg)`. + +```js +const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)'); +assert(hasTransform); +``` + +Your `.two` element should have a `transform` value of `rotate(0.4deg)`. + +```js +const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform'); +assert(twoTransform === 'rotate(0.4deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; + transform: rotate(-0.6deg); +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md new file mode 100644 index 00000000000000..9bce8c939637cb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md @@ -0,0 +1,180 @@ +--- +id: 60a3e3396c7b40068ad69997 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Rotate `.three` counter clockwise by 0.2 degrees. + +With this final step, your Rothko painting is now complete. + +# --hints-- + +You should set the `transform` property to `rotate(-0.2deg)`. + +```js +const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)'); +assert(hasTransform); +``` + +Your `.three` element should have a `transform` value of `rotate(-0.2deg)`. + +```js +const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform'); +assert(threeTransform === 'rotate(-0.2deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; + transform: rotate(-0.6deg); +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; + transform: rotate(0.4deg); +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` + +## --solutions-- + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; + transform: rotate(-0.6deg); +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; + transform: rotate(0.4deg); +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; + transform: rotate(-0.2deg); +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md new file mode 100644 index 00000000000000..4526afe38b14f0 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md @@ -0,0 +1,55 @@ +--- +id: 615f2abbe7d18d49a1e0e1c8 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +We've provided a basic HTML boilerplate for you. + +Create an `h1` element within your `body` element and give it the text `Nutrition Facts`. + +# --hints-- + +You should add a new `h1` element. + +```js +assert.exists(document.querySelector('h1')); +``` + +Your `h1` element should be within your `body` element. + +```js +assert(document.querySelector('h1')?.parentElement?.localName === 'body'); +``` + +Your `h1` element should have the text `Nutrition Facts`. + +```js +assert(document.querySelector('h1')?.innerText === 'Nutrition Facts'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + Nutrition Label + + + + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md new file mode 100644 index 00000000000000..11b8188cc989fb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md @@ -0,0 +1,60 @@ +--- +id: 615f2d4150fe0d4cbd0f2628 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Below your `h1` element, add a `p` element with the text `8 servings per container`. + +# --hints-- + +You should add a new `p` element. + +```js +assert.exists(document.querySelector('p')); +``` + +Your `p` element should be within your `body` element. + +```js +assert(document.querySelector('p')?.parentElement?.localName === 'body'); +``` + +Your `p` element should come after your `h1` element. + +```js +assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1'); +``` + +Your `p` element should have the text `8 servings per container`. + +```js +assert(document.querySelector('p')?.innerText === '8 servings per container'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + Nutrition Label + + +

Nutrition Facts

+ + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md new file mode 100644 index 00000000000000..94213e09246518 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md @@ -0,0 +1,61 @@ +--- +id: 615f34948891834dd77655a6 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Add a second `p` element with the text `Serving size 2/3 cup (55g)`. + +# --hints-- + +You should have a second `p` element. + +```js +assert(document.querySelectorAll('p')?.length === 2); +``` + +Your second `p` element should be within your `body` element. + +```js +assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body'); +``` + +Your second `p` element should come after your existing `p` element. + +```js +assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p'); +``` + +Your second `p` element should have the text `Serving size 2/3 cup (55g)`. + +```js +assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + Nutrition Label + + +

Nutrition Facts

+

8 servings per container

+ + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md new file mode 100644 index 00000000000000..ebed308079d62c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md @@ -0,0 +1,67 @@ +--- +id: 615f34ecc1091b4fd5a8a484 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`. + +This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`. + +Also add a `link` element to link your `styles.css` file. + +# --hints-- + +You should have two `link` elements. + +```js +assert(code.match(/ link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800')); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + Nutrition Label + + + +

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+ + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md new file mode 100644 index 00000000000000..ad1b189bed05b6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md @@ -0,0 +1,53 @@ +--- +id: 615f357957e370510f21ea16 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Create a `body` selector and give it a `font-family` set to `Open Sans` with a fallback of `sans-serif`. + +Remember that fonts with spaces in the name must be wrapped in quotes for CSS. + +# --hints-- + +You should have a `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` selector should have a `font-family` property set to `"Open Sans", sans-serif`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open Sans", sans-serif'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md new file mode 100644 index 00000000000000..52a336e05226bb --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md @@ -0,0 +1,55 @@ +--- +id: 615f378014c2da526a109c81 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +The font is a bit small. Create an `html` selector and set the font to have a size of `16px`. + +# --hints-- + +You should have an `html` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')); +``` + +Your `html` selector should have a `font-size` property set to `16px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +body { + font-family: 'Open Sans', sans-serif; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md new file mode 100644 index 00000000000000..96e33cc1a34914 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md @@ -0,0 +1,64 @@ +--- +id: 615f38279e5c3d53692ea441 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Wrap your `h1` and `p` elements in a `div` element. Give that `div` a `class` attribute set to `label`. + +# --hints-- + +You should create a new `div` element. + +```js +assert(document.querySelector('div')); +``` + +Your new `div` element should have the `class` attribute set to `label`. + +```js +assert(document.querySelector('div')?.classList?.contains('label')); +``` + +Your `h1` and `p` elements should be within your new `.label` element. + +```js +const children = [...document.querySelectorAll('h1'), ...document.querySelectorAll('p')]; +assert(children?.every(child => child?.parentElement?.classList?.contains('label'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + +--fcc-editable-region-- + +

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+ +--fcc-editable-region-- + +``` + +```css +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md new file mode 100644 index 00000000000000..13f5f2593b836e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md @@ -0,0 +1,63 @@ +--- +id: 615f38cabc64e3556f98cc1a +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Borders can be used to group and prioritize content. + +Create a `.label` selector and give it a `border` set to `2px solid black`. + +# --hints-- + +You should have a `.label` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.label')); +``` + +Your `.label` selector should have a `border` property set to `2px solid black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md new file mode 100644 index 00000000000000..9f08de011e61f9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md @@ -0,0 +1,59 @@ +--- +id: 615f3949f58e12577dcefb00 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Good use of white space can bring focus to the important elements of your page, and help guide your user's eyes through your text. + +Give your `.label` selector a `width` property set to `270px`. + +# --hints-- + +Your `.label` selector should have a `width` property set to `270px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +--fcc-editable-region-- +.label { + border: 2px solid black; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md new file mode 100644 index 00000000000000..f273bf9a263c32 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md @@ -0,0 +1,64 @@ +--- +id: 615f39d7da41b15851fa3fb9 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Give your `.label` selector a `margin` property set to `20px auto`, and a `padding` property set to `0 7px`. + +# --hints-- + +Your `.label` selector should have a `margin` property set to `20px auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.label')?.margin === '20px auto'); +``` + +Your `.label` selector should have a `padding` property set to `0 7px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +--fcc-editable-region-- +.label { + border: 2px solid black; + width: 270px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md new file mode 100644 index 00000000000000..63304b702e4a6f --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md @@ -0,0 +1,70 @@ +--- +id: 615f3b091162165948e1cb33 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +If you inspect your `.label` element with your browser's developer tools, you may notice that it's actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element's size. + +To solve this, reset the box model by creating a `*` selector and giving it a `box-sizing` property of `border-box`. + +# --hints-- + +You should create a `*` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*')); +``` + +Your `*` selector should have a `box-sizing` property set to `border-box`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md new file mode 100644 index 00000000000000..cb116abcc953ae --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md @@ -0,0 +1,74 @@ +--- +id: 615f3cafd794015aa9547a6d +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Remember that the use of `h1`, `h2`, and similar tags determine the semantic structure of your HTML. However, you can adjust the CSS of these elements to control the visual flow and hierarchy. + +Create an `h1` rule and set the `font-weight` property to `800`. This will make your `h1` text bolder. + +# --hints-- + +You should create an `h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +Your `h1` selector should have a `font-weight` property set to `800`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md new file mode 100644 index 00000000000000..43f69ec85a5835 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md @@ -0,0 +1,68 @@ +--- +id: 615f3d9e59db4b5b8e960762 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Give your `h1` selector a `text-align` property of `center`. + +# --hints-- + +Your `h1` selector should have a `text-align` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +--fcc-editable-region-- +h1 { + font-weight: 800; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md new file mode 100644 index 00000000000000..a0c09b066dc4d6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md @@ -0,0 +1,69 @@ +--- +id: 615f3e1b7233ee5c7595771f +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Fine-tune the placement of your `h1` by giving it a top and bottom margin of `-4px` and a left and right margin of `0`. + +# --hints-- + +Your `h1` selector should have a `margin` property set to `-4px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +--fcc-editable-region-- +h1 { + font-weight: 800; + text-align: center; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md new file mode 100644 index 00000000000000..475d0849491bc6 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md @@ -0,0 +1,78 @@ +--- +id: 615f3e4af8008c5d494d3afe +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Create a `p` selector and remove all margins. + +# --hints-- + +You should create a `p` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('p')); +``` + +Your `p` selector should have a `margin` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + font-weight: 800; + text-align: center; + margin: -4px 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md new file mode 100644 index 00000000000000..56ea061528112a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md @@ -0,0 +1,94 @@ +--- +id: 615f3ed16592445e57941aec +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Lines can help separate and group important content, especially when space is limited. + +Create a `div` element below your `h1` element, and give it a `class` attribute set to `divider`. + +# --hints-- + +You should create a new `div`. + +```js +assert(document.querySelectorAll('div')?.length === 2); +``` + +Your new `div` should have the `class` attribute set to `divider`. + +```js +assert(document.querySelectorAll('div')?.[1]?.classList?.contains('divider')); +``` + +Your `.divider` element should be within your `.label` element. + +```js +assert(document.querySelector('.label')?.querySelector('.divider')); +``` + +Your `.divider` element should come after your `h1` element. + +```js +assert(document.querySelector('.divider')?.previousElementSibling?.localName === 'h1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +--fcc-editable-region-- +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+--fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + font-weight: 800; + text-align: center; + margin: -4px 0; +} + +p { + margin: 0; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md new file mode 100644 index 00000000000000..84de4ac6133fb9 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md @@ -0,0 +1,89 @@ +--- +id: 615f405b89a7ec5f8e2d11f4 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Create a selector for your new `.divider` and set the `border-bottom` property to `1px solid #888989`. Also give it a top and bottom margin of `2px`. It should not have any left or right margin. + +# --hints-- + +You should create a `.divider` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.divider')); +``` + +Your `.divider` selector should have a `border-bottom` property set to `1px solid #888989`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.divider')?.borderBottom === '1px solid rgb(136, 137, 137)'); +``` + +Your `.divider` selector should have a `margin` property set to `2px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + font-weight: 800; + text-align: center; + margin: -4px 0; +} + +p { + margin: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md new file mode 100644 index 00000000000000..79da01c2a7f633 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md @@ -0,0 +1,82 @@ +--- +id: 615f40b01f680e608d360ed4 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +The `letter-spacing` property can be used to adjust the space between each character of text in an element. + +Give your `h1` selector a `letter-spacing` property set to `0.15px` to space them out a bit more. + +# --hints-- + +Your `h1` selector should have a `letter-spacing` property set to `0.15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +--fcc-editable-region-- +h1 { + font-weight: 800; + text-align: center; + margin: -4px 0; +} +--fcc-editable-region-- + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md new file mode 100644 index 00000000000000..9fea5c17ce0404 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md @@ -0,0 +1,89 @@ +--- +id: 615f4172e9eec061d6456221 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Nutrition labels have a lot of bold text to draw attention to important information. Rather than targeting each element that needs to be bold, it is more efficient to use a class to apply the bold styling to every element. + +Give your second `p` element a `class` attribute set to `bold`. + +# --hints-- + +Your second `p` element should have a `class` attribute set to `bold`. + +```js +assert(document.querySelectorAll('p')?.[1]?.classList?.contains('bold')); +``` + +Your first `p` element should not have a `class` attribute set to `bold`. + +```js +assert(!document.querySelector('p')?.classList?.contains('bold')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +--fcc-editable-region-- +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+--fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + font-weight: 800; + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px; +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md new file mode 100644 index 00000000000000..56e13a5ed71998 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md @@ -0,0 +1,102 @@ +--- +id: 615f41c979787462e76dab90 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Your new class does not have any styling yet. Create a `.bold` selector and give it a `font-weight` property set to `800` to make the text bold. + +Go ahead and remove the `font-weight` property from your `h1` selector as well. + +# --hints-- + +You should have a `.bold` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.bold')); +``` + +Your `.bold` selector should have a `font-weight` property set to `800`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.bold')?.fontWeight === '800'); +``` + +Your `h1` selector should not have a `font-weight` property. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === ""); +``` + +You should not remove your `h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +--fcc-editable-region-- +h1 { + font-weight: 800; + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px; +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md new file mode 100644 index 00000000000000..de2bc32eb1e10c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md @@ -0,0 +1,84 @@ +--- +id: 615f423cf65d5864132a0956 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Give your `h1` element a `class` attribute set to `bold`. This will make the text bold again. + +# --hints-- + +Your `h1` element should have a `class` attribute set to `bold`. + +```js +assert(document.querySelector('h1')?.classList?.contains('bold')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +--fcc-editable-region-- +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+--fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md new file mode 100644 index 00000000000000..3e1e57a9a4179c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md @@ -0,0 +1,104 @@ +--- +id: 615f42a021625f656101ef93 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Horizontal spacing between equally important elements can increase the readability of your text. + +Wrap the text `2/3 cup (55g)` in a `span` element, and give it a `class` attribute set to `right`. + +# --hints-- + +You should create a new `span` element. + +```js +assert(document.querySelector('span')); +``` + +Your new `span` element should have the `class` attribute set to `right`. + +```js +assert(document.querySelector('span')?.classList?.contains('right')); +``` + +Your `.right` element should have the text `2/3 cup (55g)`. + +```js +assert(document.querySelector('span')?.textContent === '2/3 cup (55g)'); +``` + +Your `p` element should still have the text `Serving size 2/3 cup (55g)`. + +```js +assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +--fcc-editable-region-- +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+--fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md new file mode 100644 index 00000000000000..a827ed632ca51b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md @@ -0,0 +1,94 @@ +--- +id: 615f4bfb9de4a16703b56eb6 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +The `float` property is used to place an element on the left or right of its container, allowing other content (such as text) to wrap around it. + +Create a new `.right` selector and set the `float` property to `right`. + +# --hints-- + +You should create a new `.right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')); +``` + +Your `.right` selector should have a `float` property set to `right`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.float === 'right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md new file mode 100644 index 00000000000000..c613e7f30f1bd7 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md @@ -0,0 +1,104 @@ +--- +id: 615f4ce9d877b668417c0c42 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Wrap everything within the `.label` element in a new `header` element. + +# --hints-- + +You should create a new `header` element. + +```js +assert(document.querySelector('header')); +``` + +Your `header` element should be within your `.label` element. + +```js +assert(document.querySelector('header')?.parentElement?.classList?.contains('label')); +``` + +Your `h1`, `div`, and `p` elements should be within your new `header` element. + +```js +const children = document.querySelector('header')?.children; +assert(children?.[0]?.localName === 'h1'); +assert(children?.[1]?.localName === 'div'); +assert(children?.[2]?.localName === 'p'); +assert(children?.[3]?.localName === 'p'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +--fcc-editable-region-- +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+--fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md new file mode 100644 index 00000000000000..d7c0c3f1f4150a --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md @@ -0,0 +1,105 @@ +--- +id: 615f4dde9d72e3694cb9ee3b +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Now update your `h1` selector to be `header h1` to specifically target your `h1` element within your new `header`. + +# --hints-- + +You should have a `header h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('header h1')); +``` + +You should not have an `h1` selector. + +```js +assert.isNull(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +You should not change any properties in the selector. + +```js +const style = new __helpers.CSSHelp(document).getStyle('header h1'); +assert(style?.textAlign === 'center'); +assert(style?.margin === '-4px 0px'); +assert(style?.letterSpacing === '0.15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +--fcc-editable-region-- +h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} +--fcc-editable-region-- + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md new file mode 100644 index 00000000000000..2fd85ad3563420 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md @@ -0,0 +1,105 @@ +--- +id: 615f4ec58334106a4170c2a8 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider lg`. + +# --hints-- + +You should create a new `div` element. + +```js +assert(document.querySelectorAll('div')?.length === 3); +``` + +Your new `div` element should come after your `header` element. + +```js +assert(document.querySelector('.label')?.lastElementChild?.localName === 'div'); +``` + +Your new `div` element should have the `class` attribute set to `divider lg`. + +```js +const div = document.querySelector('.label')?.lastElementChild; +assert(div?.classList?.contains('divider')); +assert(div?.classList?.contains('lg')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md new file mode 100644 index 00000000000000..5b5d116e02234c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md @@ -0,0 +1,111 @@ +--- +id: 615f4f9e4a40566b776a8f38 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Create a new `.lg` selector and give it a `height` property set to `10px`. Also create an `.lg, .md` selector and set the `background-color` property to `black`. + +# --hints-- + +You should have a new `.lg` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lg')); +``` + +Your `.lg` selector should have a `height` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lg')?.height === '10px'); +``` + +You should have a new `.lg, .md` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')); +``` + +Your `.lg, .md` selector should have a `background-color` property set to `black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.backgroundColor === 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md new file mode 100644 index 00000000000000..86fe43af33f635 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md @@ -0,0 +1,99 @@ +--- +id: 615f50473cc0196c6dd3892a +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +You may notice there is still a small border at the bottom of your `.lg` element. To reset this, give your `.lg, .md` selector a `border` property set to `0`. + +# --hints-- + +Your `.lg, .md` selector should have a `border` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.borderWidth === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +--fcc-editable-region-- +.lg, .md { + background-color: black; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md new file mode 100644 index 00000000000000..cc1b6599b46b7b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md @@ -0,0 +1,113 @@ +--- +id: 615f51257a8a516d80b6c743 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Create a new `div` below your `.lg` element and give it a `class` attribute set to `calories-info`. + +# --hints-- + +You should create another `div` element. + +```js +assert(document.querySelectorAll('div')?.length === 4); +``` + +Your new `div` should have a `class` attribute set to `calories-info`. + +```js +assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info')); +``` + +Your new `div` should come after the `.lg` element. + +```js +assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('lg')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md new file mode 100644 index 00000000000000..b84b3468ee98ee --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md @@ -0,0 +1,116 @@ +--- +id: 615f51e4e5b24a6e80eccce1 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Within your `.calories-info` element, create a `p` element. Give that `p` element a `class` attribute set to `bold sm-text`, and the text `Amount per serving`. + +# --hints-- + +You should create a new `p` element within your `.calories-info` element. + +```js +assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'p'); +``` + +Your new `p` element should have a `class` attribute set to `bold sm-text`. + +```js +assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('bold')); +assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('sm-text')); +``` + +Your new `p` element should have the text `Amount per serving`. + +```js +assert(document.querySelector('.calories-info')?.children?.[0]?.innerText === 'Amount per serving'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md new file mode 100644 index 00000000000000..e1e10c1c30f230 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md @@ -0,0 +1,113 @@ +--- +id: 615f522dea4f776f64dc3e91 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The `rem` unit stands for `root em`, and is relative to the font size of the `html` element. + +Create an `.sm-text` selector and set the `font-size` to `0.85rem`, which would calculate to be roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`). + +# --hints-- + +You should have an `.sm-text` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sm-text')); +``` + +Your `.sm-text` selector should have a `font-size` property set to `0.85rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sm-text')?.fontSize === '0.85rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md new file mode 100644 index 00000000000000..17a0c4e20f70d3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md @@ -0,0 +1,138 @@ +--- +id: 615f5486b8fd4b71633f69b0 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Below your `.sm-text` element, create a new `h1` element with the text `Calories 230`. Wrap the `230` portion of the text in a `span` element with the `class` set to `right`. + +# --hints-- + +You should have a new `h1` element within your `.calories-info` element. + +```js +assert(document.querySelector('.calories-info')?.querySelector('h1')) +``` + +Your `h1` element should come after your `.sm-text` element. + +```js +assert(document.querySelector('.sm-text')?.nextElementSibling?.localName === 'h1'); +``` + +Your `h1` element should have the text `Calories 230`. + +```js +// the float: right property does weird things to the inner text. +assert(document.querySelector('.calories-info')?.lastElementChild?.innerText.match(/Calories[\s|\n]*230/)); +``` + +You should create a `span` element within your new `h1` element. + +```js +assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')); +``` + +Your `span` element should have the `class` set to `right`. + +```js +assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); +``` + +Your `span` element should have the text `230`. + +```js +assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.innerText === '230'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+--fcc-editable-region-- +
+

Amount per serving

+
+--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.sm-text { + font-size: 0.85rem; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md new file mode 100644 index 00000000000000..d4458ee3f7e049 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md @@ -0,0 +1,119 @@ +--- +id: 615f575b50b91e72af079480 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Create a new `.calories-info h1` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. + +# --hints-- + +You should have a new `.calories-info h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')); +``` + +Your new `.calories-info h1` selector should have a `margin` property set to `-5px -2px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginTop, '-5px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginBottom, '-5px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginLeft, '-2px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginRight, '-2px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.sm-text { + font-size: 0.85rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md new file mode 100644 index 00000000000000..f53ef470cf7516 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md @@ -0,0 +1,120 @@ +--- +id: 615f5af373a68e744a3c5a76 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Create a `.calories-info span` selector and set the `font-size` to `1.2em`. + +# --hints-- + +You should create a `.calories-info span` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')); +``` + +Your `.calories-info span` selector should have a `font-size` property set to `1.2em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '1.2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md new file mode 100644 index 00000000000000..cfd6cc33c9e2ad --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md @@ -0,0 +1,116 @@ +--- +id: 615f5c1cb7575c7551ed8a40 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The larger font size of the number `230` is causing it to overflow. Give the `.calories-info h1` an `overflow` property set to `hidden` to avoid this. + +# --hints-- + +Your `.calories-info h1` selector should have an `overflow` property set to `hidden`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.sm-text { + font-size: 0.85rem; +} + +--fcc-editable-region-- +.calories-info h1 { + margin: -5px -2px; +} +--fcc-editable-region-- + +.calories-info span { + font-size: 1.2em; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md new file mode 100644 index 00000000000000..9d68b8354d1ced --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md @@ -0,0 +1,119 @@ +--- +id: 615f5fd85d0062761f288364 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Typography is often more art than science. You may have to tweak things like alignment until it looks correct. + +Give your `.calories-info span` selector a `margin-top` set to `-7px`. This will shift your `230` text into place. + +# --hints-- + +Your `.calories-info span` selector should have a `margin-top` set to `-7px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.marginTop === '-7px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +--fcc-editable-region-- +.calories-info span { + font-size: 1.2em; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md new file mode 100644 index 00000000000000..b9b50a67f0be8e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md @@ -0,0 +1,126 @@ +--- +id: 615f61338c8ca176d6445574 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider md`. + +# --hints-- + +You should create a new `div` within your `.label` element. + +```js +assert(document.querySelectorAll('.label > div')?.length === 3) +``` + +Your new `div` should have the `class` attribute set to `divider md`. This div should be the last element in your `.label` element. + +```js +const div = document.querySelector('.label')?.lastElementChild; +assert(div?.classList?.contains('divider') && div?.classList?.contains('md')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md new file mode 100644 index 00000000000000..235c6490c3ac2d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md @@ -0,0 +1,127 @@ +--- +id: 615f666ac5edea782feb7e75 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Create an `.md` selector and give it a `height` property of `5px`. + +# --hints-- + +You should create an `.md` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.md')); +``` + +Your `.md` selector should have a `height` property set to `5px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.md')?.height === '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md new file mode 100644 index 00000000000000..62fb6ca61de88d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md @@ -0,0 +1,153 @@ +--- +id: 615f671b6d1919792745aa5d +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Create a new `div` element below your `.md` element. Give it a `class` attribute set to `daily-value sm-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `right bold`. + +# --hints-- + +You should create a new `div` element after your `.md` element. + +```js +assert(document.querySelector('.label')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider')); +assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('md')); +``` + +Your new `div` should have a `class` attribute set to `daily-value sm-text`. + +```js +assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value')); +assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('sm-text')); +``` + +Your new `div` element should have a `p` element. + +```js +assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `% Daily Value *`. + +```js +assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *'); +``` + +Your new `p` element should have a `class` attribute set to `right bold`. + +```js +assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right')); +assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md new file mode 100644 index 00000000000000..80707dcd715e63 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md @@ -0,0 +1,139 @@ +--- +id: 615f6823d0815b7a991f2a75 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The `float` styling is causing the new `p` element to be outside of the label's border. Use your existing `.divider` element as an example to add a new divider after the `p` element. + +# --hints-- + +You should create a new `div` within your `.daily-value.sm-text` element. + +```js +assert(document.querySelectorAll('.daily-value.sm-text > div')?.length === 1) +``` + +Your new `div` should have the `class` attribute set to `divider`. + +```js +assert(document.querySelector('.daily-value.sm-text > div')?.classList?.contains('divider')) +``` + +Your new `div` should come after your `p` element. + +```js +assert(document.querySelector('.daily-value.sm-text > div')?.previousElementSibling?.localName === 'p'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+--fcc-editable-region-- +
+

% Daily Value *

+ +
+--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md new file mode 100644 index 00000000000000..655b881bfe7083 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md @@ -0,0 +1,127 @@ +--- +id: 615f6a7d4ba8037bc086c2c7 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Give the `.divider` selector a `clear` property set to `right`. This will clear the `float` property, pushing the divider and any following content down below the `float` text. + +# --hints-- + +Your `.divider` selector should have a `clear` property set to `right`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +--fcc-editable-region-- +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} +--fcc-editable-region-- + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md new file mode 100644 index 00000000000000..7cb965c2767ab8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md @@ -0,0 +1,165 @@ +--- +id: 615f6b2d164f81809efd9bdc +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Wrap `Total Fat` in a `span` element with the `class` set to `bold`. Wrap `10%` in another `span` element with the `class` set to `bold right`. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `Total Fat 8g 10%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Fat 8g[\s|\n]+10%/)); +``` + +Your `p` element should have two `span` elements. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +``` + +Your first `span` element should wrap the text `Total Fat`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat'); +``` + +Your first `span` element should have the `class` set to `bold`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.className === 'bold'); +``` + +Your second `span` element should wrap the text `10%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.innerText === '10%'); +``` + +Your second `span` element should have the `class` set to `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md new file mode 100644 index 00000000000000..054289a7759930 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md @@ -0,0 +1,156 @@ +--- +id: 615f6cc778f7698258467596 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Below your element with the `Total Fat` text, create a new `p` element with the text `Saturated Fat 1g 5%`. Wrap the `5%` in a `span` with the `class` attribute set to `bold right`. + +# --hints-- + +You should create a new `p` element below your element with the `Total Fat` text. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/)); +``` + +Your new `p` element should have the text `Saturated Fat 1g 5%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/)); +``` + +Your new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.localName === 'span'); +``` + +Your `span` element should have the `class` attribute set to `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +``` + +Your `span` element should wrap the `5%` text. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === "5%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md new file mode 100644 index 00000000000000..569f99e7715e49 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md @@ -0,0 +1,130 @@ +--- +id: 615f6fddaac1e083502d3e6a +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +This new `p` element will need to be indented. Give it a `class` set to `indent`. + +# --hints-- + +Your `p` element with the text `Saturated Fat 1g 5%` should have a `class` attribute set to `indent`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('indent')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+--fcc-editable-region-- +

Saturated Fat 1g 5%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md new file mode 100644 index 00000000000000..592f9c3bd8570b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md @@ -0,0 +1,138 @@ +--- +id: 615f70077a4ff98424236c1e +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Create a new `.indent` selector and give it a `margin-left` property set to `1em`. + +# --hints-- + +You should have a new `.indent` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.indent')); +``` + +Your new `.indent` selector should have a `margin-left` property set to `1em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft === '1em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md new file mode 100644 index 00000000000000..1f363003d9324c --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md @@ -0,0 +1,142 @@ +--- +id: 615f72a872354a850d4f533e +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Create a `.daily-value p` selector to target all of your `p` elements in the `daily-value` section. Give this new selector a `border-bottom` set to `1px solid #888989`. + +# --hints-- + +You should have a new `.daily-value p` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')); +``` + +Your `.daily-value p` selector should have a `border-bottom` property set to `1px solid #888989`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md new file mode 100644 index 00000000000000..8adb231760889e --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md @@ -0,0 +1,149 @@ +--- +id: 615f74a71f1e498619e38ee8 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +The bottom borders under your `% Daily Value *` and `Saturated Fat 1g 5%` elements do not extend the full width of the label. Add `no-divider` to the `class` for these two elements. + +# --hints-- + +Your `p` element with the text `% Daily Value *` should have `no-divider` added to the `class` attribute. Do not remove the existing classes. + +```js +const p = document.querySelector('.daily-value.sm-text')?.firstElementChild; +assert(p?.classList?.contains('no-divider')); +assert(p?.classList?.contains('bold')); +assert(p?.classList?.contains('right')); +``` + +Your `p` element with the text `Saturated Fat 1g 5%` should have `no-divider` added to the `class` attribute. Do not remove the existing classes. + +```js +const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; +assert(p?.classList?.contains('no-divider')); +assert(p?.classList?.contains('indent')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+--fcc-editable-region-- +
+

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md new file mode 100644 index 00000000000000..008b34a3751495 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md @@ -0,0 +1,161 @@ +--- +id: 615f7ad94380408d971d14f6 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The `:not` pseudo-selector can be used to select all elements that do not match the given CSS rule. + +```css +div:not(#example) { + color: red; +} +``` + +The above selects all `div` elements without an `id` of `example`. + +Modify your `.daily-value p` selector to exclude the `.no-divider` elements. + +# --hints-- + +You should have a `.daily-value p:not(.no-divider)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)')); +``` + +You should not have a `.daily-value p` selector. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p')); +``` + +You should not change the properties in the `.daily-value p:not(.no-divider)` selector. + +```js +const style = new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)'); +assert(style?.borderBottom === '1px solid rgb(136, 137, 137)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +--fcc-editable-region-- +.daily-value p { + border-bottom: 1px solid #888989; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md new file mode 100644 index 00000000000000..048f474b01d8c3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md @@ -0,0 +1,146 @@ +--- +id: 615f7bc680f7168ea01ebf99 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Now you will have to add separate dividers below your `.no-divider` elements. + +Your first `.no-divider` element has a `.divider` after it. Create another `.divider` after your second `.no-divider` element. + +# --hints-- + +You should create a new `div` at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +``` + +Your new `div` should have the `class` attribute set to `divider`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md new file mode 100644 index 00000000000000..c1b73b41197788 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md @@ -0,0 +1,165 @@ +--- +id: 615f7c71eab8218f846e4503 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +After your last `.divider`, create another `p` element with the text `Trans Fat 0g`. Italicize the word `Trans` by wrapping it in an `i` element. Give the new `p` element the `class` attribute set to `indent no-divider`. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `Trans Fat 0g`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText === 'Trans Fat 0g'); +``` + +Your new `p` element should have the `class` attribute set to `indent no-divider`. + +```js +const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; +assert(p?.classList?.contains('indent')); +assert(p?.classList?.contains('no-divider')); +``` + +Your new `p` element should have an `i` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'i'); +``` + +Your `i` element should wrap the text `Trans`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Trans'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md new file mode 100644 index 00000000000000..8540c74155e048 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md @@ -0,0 +1,146 @@ +--- +id: 615f7d489a581590d1350288 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Create another `.divider` after your last `p` element. + +# --hints-- + +You should create a new `div` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +``` + +Your new `div` element should have the `class` attribute set to `divider`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md new file mode 100644 index 00000000000000..405e0647f872c5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md @@ -0,0 +1,178 @@ +--- +id: 615f7de4487b64919bb4aa5e +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Wrap the text `Cholesterol` in a `span` element, and give that `span` element the `class` attribute set to `bold`. Wrap the text `0%` in another `span` element, with the `class` set to `bold right`. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `Cholesterol 0mg 0%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Cholesterol 0mg[\s|\n]+0%/)); +``` + +Your new `p` element should have two `span` elements. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +``` + +Your first `span` element should have the `class` attribute set to `bold`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +``` + +Your first `span` element should wrap the text `Cholesterol`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Cholesterol'); +``` + +Your second `span` element should have the `class` attribute set to `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +``` + +Your second `span` element should wrap the text `0%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '0%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md new file mode 100644 index 00000000000000..432939d693b865 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md @@ -0,0 +1,179 @@ +--- +id: 615f7e7281626a92bbd62da8 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Wrap the text `Sodium` in a `span` element with a `class` attribute set to `bold`. Wrap the `7%` text in another `span` element with the `class` set to `bold right`. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `Sodium 160mg 7%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Sodium 160mg[\s|\n]+7%/)); +``` + +Your new `p` element should have two `span` elements. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +``` + +Your first `span` element should have the `class` attribute set to `bold`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +``` + +Your first `span` element should wrap the text `Sodium`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Sodium'); +``` + +Your second `span` element should have the `class` attribute set to `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +``` + +Your second `span` element should wrap the text `7%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '7%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md new file mode 100644 index 00000000000000..815359307b789b --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md @@ -0,0 +1,180 @@ +--- +id: 615f7ecb09de9a938ef94756 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` bold, and the text `13%` bold and right aligned. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `Total Carbohydrate 37g 13%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate 37g[\s|\n]+13%/)); +``` + +Your new `p` element should have two `span` elements. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +``` + +Your first `span` element should have the `class` attribute set to `bold`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +``` + +Your first `span` element should wrap the text `Total Carbohydrate`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Total Carbohydrate'); +``` + +Your second `span` element should have the `class` attribute set to `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +``` + +Your second `span` element should wrap the text `13%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '13%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md new file mode 100644 index 00000000000000..e4b6b8e2f5715d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md @@ -0,0 +1,164 @@ +--- +id: 615f7fa959ab75948f96a0d6 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Below your last `p` element, add another `p` element with the text `Dietary Fiber 4g`. Give the `p` element the `class` necessary to indent it and remove the dividing border. Then create a divider below that `p` element. + +# --hints-- + +You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +``` + +Your new `p` element should have the text `Dietary Fiber 4g`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/)); +``` + +Your new `p` element should have the `class` attribute set to `indent no-divider`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +``` + +Your new `div` should have the `class` attribute set to `divider`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md new file mode 100644 index 00000000000000..1bcd018908d5e2 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md @@ -0,0 +1,166 @@ +--- +id: 615f808d85793195b0f53be9 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Create another `p` element after your last `.divider`, and give it the text `Total Sugars 12g`. Assign that `p` element the `class` values necessary to indent it and remove the bottom border. Then create another `.divider` below your new `p` element. + +# --hints-- + +You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +``` + +Your new `p` element should have the text `Total Sugars 12g`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/)); +``` + +Your new `p` element should have the `class` attribute set to `indent no-divider`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +``` + +Your new `div` should have the `class` attribute set to `divider`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md new file mode 100644 index 00000000000000..4b68bdd6b66f7d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md @@ -0,0 +1,150 @@ +--- +id: 615f829d07b18f96f6f6684b +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +The advantage to creating these dividers is that you can apply specific classes to style them individually. Add `dbl-indent` to the `class` for your last `.divider`. + +# --hints-- + +Your last `.divider` element should have `dbl-indent` added to the `class`. Do not remove the existing value. + +```js +const last = document.querySelector('.daily-value.sm-text')?.lastElementChild; +assert(last?.classList?.contains('dbl-indent')); +assert(last?.classList?.contains('divider')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md new file mode 100644 index 00000000000000..f120cb64b2f8ed --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md @@ -0,0 +1,156 @@ +--- +id: 615f83ef928ec9982b785b6a +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Create a `.dbl-indent` selector and give it a left margin of `2em`. + +# --hints-- + +You should have a new `.dbl-indent` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')); +``` + +Your `.dbl-indent` selector should have a `margin-left` property set to `2em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')?.marginLeft === '2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md new file mode 100644 index 00000000000000..64d06a660a5cf8 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md @@ -0,0 +1,193 @@ +--- +id: 615f84f246e8ba98e3cd97be +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Below your `.dbl-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned. + +Then create another divider after that `p` element. + +# --hints-- + +You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +``` + +Your new `p` element should have the text `Includes 10g Added Sugars 20%`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/)); +``` + +Your new `p` element should have the `class` attribute set to `dbl-indent no-divider`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('dbl-indent')); +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +``` + +Your new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.localName === 'span'); +``` + +Your `span` element should have the `class` attribute set to `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('right')); +``` + +Your `span` element should wrap the text `20%`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type span')?.innerText === '20%'); +``` + +Your new `div` should have the `class` attribute set to `divider`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md new file mode 100644 index 00000000000000..cd8f2458700d09 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md @@ -0,0 +1,176 @@ +--- +id: 615f887466db4ba14b5342cc +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold. + +Following this element, create a large divider. + +# --hints-- + +You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +``` + +Your new `p` element should have the text `Protein 3g`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/)); +``` + +Your new `p` element should have the `class` attribute set to `no-divider`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +``` + +Your new `div` should have the `class` attribute set to `divider lg`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('lg')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md new file mode 100644 index 00000000000000..a2328b173c36e3 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md @@ -0,0 +1,175 @@ +--- +id: 615f89e055040ba294719d2f +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`. Use a `span` to make the `10%` align to the right, but do not make it bold. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `Vitamin D 2mcg 10%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/)); +``` + +Your new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); +``` + +Your `span` element should have the `class` set to `right`. Remember you should not make it bold. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); +assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md new file mode 100644 index 00000000000000..82801b25679fe5 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md @@ -0,0 +1,202 @@ +--- +id: 615f8bfe0f30a1a3c340356b +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Create another `p` element, give it the text `Calcium 260mg 20%`. Align `20%` to the right. Below that, create a `p` element with the text `Iron 8mg 45%`, aligning the `45%` to the right. + +# --hints-- + +You should create two new `p` elements at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +``` + +Your first new `p` element should have the text `Calcium 260mg 20%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/)); +``` + +Your first new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span'); +``` + +Your first `span` element should have the `class` attribute set to `right`. Remember, do not make it bold. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('right')); +assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold')); +``` + +Your first `span` element should wrap the text `20%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%'); +``` + +Your second new `p` element should have the text `Iron 8mg 45%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/)); +``` + +Your second new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'span'); +``` + +Your second `span` element should have the `class` attribute set to `right`. Remember, do not make it bold. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('right')); +assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md new file mode 100644 index 00000000000000..d9873550e4d487 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md @@ -0,0 +1,184 @@ +--- +id: 615f8f1223601fa546e93f31 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Create the final `p` element for your `.daily-value` section. Give it the text `Potassium 235mg 6%`. Align the `6%` text to the right, and remove the bottom border of the `p` element. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the `class` attribute set to `no-divider`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('no-divider')); +``` + +Your new `p` element should have the text `Potassium 235mg 6%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/)); +``` + +Your new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); +``` + +Your `span` element should have the `class` set to `right`. Remember you should not make it bold. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); +assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md new file mode 100644 index 00000000000000..7b132f4d7ae50d --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md @@ -0,0 +1,192 @@ +--- +id: 615f905fbd1017a65ca224eb +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Add a medium divider after your `.daily-value` element. Below that new divider, create a `p` element with the `class` attribute set to `note`. + +Give the `p` element the following text: + +``` +* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice. +``` + +# --hints-- + +You should create a new `div` after your `.daily-value` element. + +```js +assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div'); +``` + +Your new `div` should have the `class` set to `divider md`. + +```js +assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider')); +assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('md')); +``` + +You should create a `p` element after your new `div` element. + +```js +assert(document.querySelector('.label')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the `class` set to `note`. + +```js +assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note')); +``` + +Your new `p` element should have the provided text. + +```js +assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+

Potassium 235mg 6%

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md new file mode 100644 index 00000000000000..7f44865429fdab --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md @@ -0,0 +1,176 @@ +--- +id: 615f94786869e1a7fec54375 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Create a `.note` selector, and set the size of the font to `0.6rem`. Also set the top and bottom margins to `5px`, removing the left and right margins. + +# --hints-- + +You should have a new `.note` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.note')); +``` + +Your `.note` selector should have a `font-size` property set to `0.6rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem'); +``` + +Your `.note` selector should have a `margin` property set to `5px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g 10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+

Potassium 235mg 6%

+
+
+

* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md new file mode 100644 index 00000000000000..cecb81aeeb4740 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md @@ -0,0 +1,325 @@ +--- +id: 615f951dff9317a900ef683f +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Give the `.note` selector a left and right padding of `8px`, removing the top and bottom padding. Also set the `text-indent` property to `-8px`. + +With these last changes, your nutrition label is complete! + +# --hints-- + +Your `.note` selector should have a `padding` property set to `0 8px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px'); +``` + +Your `.note` selector should have a `text-indent` property set to `-8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g 10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+

Potassium 235mg 6%

+
+
+

* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} + +--fcc-editable-region-- +.note { + font-size: 0.6rem; + margin: 5px 0; +} +--fcc-editable-region-- +``` + +## --solutions-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g 10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+

Potassium 235mg 6%

+
+
+

* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} + +.note { + font-size: 0.6rem; + margin: 5px 0; + padding: 0 8px; + text-indent: -8px; +} +``` diff --git a/curriculum/utils.js b/curriculum/utils.js index 09affac00073ed..04f3073e34c5fd 100644 --- a/curriculum/utils.js +++ b/curriculum/utils.js @@ -36,7 +36,8 @@ const superBlockToOrder = { 'machine-learning-with-python': 9, 'coding-interview-prep': 10, 'responsive-web-design': 11, - 'relational-database': 12 + 'relational-database': 12, + '2022/responsive-web-design-qa': 13, }; /** @@ -57,7 +58,8 @@ const superBlockNonAuditedOrder = { 'machine-learning-with-python': 9, 'coding-interview-prep': 10, '2022/responsive-web-design': 11, - 'relational-database': 12 + 'relational-database': 12, + '2022/responsive-web-design-qa': 13, }; const superBlockToNewOrder = { @@ -102,6 +104,7 @@ const directoryToSuperblock = { '11-machine-learning-with-python': 'machine-learning-with-python', '13-relational-databases': 'relational-database', '14-responsive-web-design-22': '2022/responsive-web-design', + '14-responsive-web-design-22-qa': '2022/responsive-web-design-qa', '15-javascript-algorithms-and-data-structures-22': '2022/javascript-algorithms-and-data-structures' }; diff --git a/tools/challenge-editor/api/configs/superBlockList.ts b/tools/challenge-editor/api/configs/superBlockList.ts index 28b0d6eb7ad726..cb9b1c82bb7086 100644 --- a/tools/challenge-editor/api/configs/superBlockList.ts +++ b/tools/challenge-editor/api/configs/superBlockList.ts @@ -51,6 +51,10 @@ export const superBlockList = [ name: '(New) Responsive Web Design', path: '14-responsive-web-design-22' }, + { + name: 'Responsive Web Design QA', + path: '14-responsive-web-design-22-qa' + }, { name: 'JavaScript Algorithms and Data Structures (Beta)', path: '15-javascript-algorithms-and-data-structures-22' diff --git a/tools/challenge-helper-scripts/fs-utils.ts b/tools/challenge-helper-scripts/fs-utils.ts index 410f98deb5f8ff..4c017ccca29a95 100644 --- a/tools/challenge-helper-scripts/fs-utils.ts +++ b/tools/challenge-helper-scripts/fs-utils.ts @@ -16,6 +16,7 @@ export function getSuperBlockSubPath(superBlock: SuperBlocks): string { [SuperBlocks.MachineLearningPy]: '11-machine-learning-with-python', [SuperBlocks.RelationalDb]: '13-relational-databases', [SuperBlocks.RespWebDesignNew]: '14-responsive-web-design-22', + [SuperBlocks.RespWebDesignQA]: '14-responsive-web-design-22-qa', [SuperBlocks.JsAlgoDataStructNew]: '15-javascript-algorithms-and-data-structures-22' }; diff --git a/tools/challenge-helper-scripts/rename-challenge-files.js b/tools/challenge-helper-scripts/rename-challenge-files.js index 38d9e64e2123bb..a009dd70fe2996 100644 --- a/tools/challenge-helper-scripts/rename-challenge-files.js +++ b/tools/challenge-helper-scripts/rename-challenge-files.js @@ -9,31 +9,41 @@ const gray = require('gray-matter'); * node tools/challenge-helper-scripts/rename-challenge-files.js */ (async () => { - const asyncExec = promisify(exec); - const blocks = await readdir( - join( - process.cwd(), - 'curriculum/challenges/english/14-responsive-web-design-22' - ) - ); - for (const block of blocks) { - const files = await readdir( + + function handleRename(blockName) { + + const asyncExec = promisify(exec); + const blocks = await readdir( join( process.cwd(), - `curriculum/challenges/english/14-responsive-web-design-22/${block}` + `curriculum/challenges/english/${blockName}` ) ); - for (const file of files) { - const fileData = await readFile( + for (const block of blocks) { + const files = await readdir( join( process.cwd(), - `curriculum/challenges/english/14-responsive-web-design-22/${block}/${file}` + `curriculum/challenges/english/${blockName}/${block}` ) ); - const challengeId = await gray(fileData).data.id; - await asyncExec( - `git mv curriculum/challenges/english/14-responsive-web-design-22/${block}/${file} curriculum/challenges/english/14-responsive-web-design-22/${block}/${challengeId}.md` - ); + for (const file of files) { + const fileData = await readFile( + join( + process.cwd(), + `curriculum/challenges/english/${blockName}/${block}/${file}` + ) + ); + const challengeId = await gray(fileData).data.id; + await asyncExec( + `git mv curriculum/challenges/english/${blockName}/${block}/${file} curriculum/challenges/english/${blockName}/${block}/${challengeId}.md` + ); + } } } + + const renames =[ + '14-responsive-web-design-22', + '14-responsive-web-design-22-qa', + ].forEach(rename => handleRename(rename)) + })(); diff --git a/utils/index.js b/utils/index.js index 84d39c21c70ca9..4c5a31cbfe6e39 100644 --- a/utils/index.js +++ b/utils/index.js @@ -9,6 +9,7 @@ const idToTitle = new Map( '5e6021435ac9d0ecd8b94b00': 'Information Security', '561abd10cb81ac38a17513bc': 'JavaScript Algorithms and Data Structures', '561add10cb82ac38a17513bc': 'Responsive Web Design', + 'aaaaaaaaaaaaaaaaaaaaaaaa': 'Responsive Web Design QA', '660add10cb82ac38a17513be': 'Legacy Back End', '561add10cb82ac39a17513bc': 'Legacy Data Visualization', '561add10cb82ac38a17513be': 'Legacy Front End', From bd46454c3f97a11225f215de1b75b51657cfdf6d Mon Sep 17 00:00:00 2001 From: Brooke Date: Fri, 22 Jul 2022 16:20:30 -0700 Subject: [PATCH 26/36] PROD-2456 clean up --- client/src/resources/cert-and-project-map.ts | 6 +++--- .../rename-challenge-files.js | 17 +++++------------ 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/client/src/resources/cert-and-project-map.ts b/client/src/resources/cert-and-project-map.ts index 822e2e3341caeb..3a0f3a090e920c 100644 --- a/client/src/resources/cert-and-project-map.ts +++ b/client/src/resources/cert-and-project-map.ts @@ -333,7 +333,6 @@ const certMap = [ } ] }, - { id: 'aaaaaaaaaaaaaaaaaaaaaaaa', title: 'Responsive Web Design QA', @@ -343,12 +342,13 @@ const certMap = [ { id: 'bbbbbbbbbbbbbbbbbbbbbbbb', title: 'Build a Personal Portfolio Webpage QA', - link: getResponsiveWebDesignPathQA('build-a-personal-portfolio-webpage-qa'), + link: getResponsiveWebDesignPathQA( + 'build-a-personal-portfolio-webpage-qa' + ), certSlug: SuperBlocks.RespWebDesignQA } ] }, - { id: '561abd10cb81ac38a17513bc', title: 'JavaScript Algorithms and Data Structures', diff --git a/tools/challenge-helper-scripts/rename-challenge-files.js b/tools/challenge-helper-scripts/rename-challenge-files.js index a009dd70fe2996..385ee97606f650 100644 --- a/tools/challenge-helper-scripts/rename-challenge-files.js +++ b/tools/challenge-helper-scripts/rename-challenge-files.js @@ -9,15 +9,10 @@ const gray = require('gray-matter'); * node tools/challenge-helper-scripts/rename-challenge-files.js */ (async () => { - - function handleRename(blockName) { - + async function handleRename(blockName) { const asyncExec = promisify(exec); const blocks = await readdir( - join( - process.cwd(), - `curriculum/challenges/english/${blockName}` - ) + join(process.cwd(), `curriculum/challenges/english/${blockName}`) ); for (const block of blocks) { const files = await readdir( @@ -41,9 +36,7 @@ const gray = require('gray-matter'); } } - const renames =[ - '14-responsive-web-design-22', - '14-responsive-web-design-22-qa', - ].forEach(rename => handleRename(rename)) - + ['14-responsive-web-design-22', '14-responsive-web-design-22-qa'].forEach( + rename => handleRename(rename) + ); })(); From fdd5407aa2da20ef7a9c3b4071069a516a61707e Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Mon, 25 Jul 2022 16:04:37 +0300 Subject: [PATCH 27/36] PROD-2562 - prevent editor from navigating away on last step of the course, send postmessage event --- .../templates/Challenges/redux/completion-epic.js | 15 +++++++++++---- client/src/utils/iframe-message.ts | 4 ++++ 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/client/src/templates/Challenges/redux/completion-epic.js b/client/src/templates/Challenges/redux/completion-epic.js index f150c4ae99b78f..5e89b202e1bc73 100644 --- a/client/src/templates/Challenges/redux/completion-epic.js +++ b/client/src/templates/Challenges/redux/completion-epic.js @@ -23,7 +23,10 @@ import { import postUpdate$ from '../utils/post-update'; import { mapFilesToChallengeFiles } from '../../../utils/ajax'; import { standardizeRequestBody } from '../../../utils/challenge-request-helpers'; -import { postChallengeCompletedEvent } from '../../../utils/iframe-message'; +import { + postChallengeCompletedEvent, + postNavigationLastChallengeEvent +} from '../../../utils/iframe-message'; import { actionTypes } from './action-types'; import { projectFormValuesSelector, @@ -188,7 +191,12 @@ export default function completionEpic(action$, state$) { filter(Boolean), finalize(async () => { postChallengeCompletedEvent({ meta }); - return navigate(await pathToNavigateTo()); + const nextNavigatePath = await pathToNavigateTo(); + if (nextNavigatePath) { + return navigate(nextNavigatePath); + } else { + postNavigationLastChallengeEvent({ meta }); + } }) ); }) @@ -196,9 +204,8 @@ export default function completionEpic(action$, state$) { } async function findPathToNavigateTo(nextChallengePath, superBlock) { + console.log(nextChallengePath, superBlock); if (nextChallengePath.includes(superBlock)) { return nextChallengePath; - } else { - return `/learn/${superBlock}/#${superBlock}-projects`; } } diff --git a/client/src/utils/iframe-message.ts b/client/src/utils/iframe-message.ts index 8940790fa21a0a..0fcbff8cb1c27f 100755 --- a/client/src/utils/iframe-message.ts +++ b/client/src/utils/iframe-message.ts @@ -1,9 +1,13 @@ export enum PostMessageIframeEvents { + NavigationLastChallenge = 'fcc:nav:last-challenge', ChallengeCompleted = 'fcc:challenge:completed', ChallengeReady = 'fcc:challenge:ready', IncomingUrlUpdate = 'fcc:url:update' } +export const postNavigationLastChallengeEvent = (data: unknown) => + iframeMessage(PostMessageIframeEvents.NavigationLastChallenge, data); + export const postChallengeCompletedEvent = (data: unknown) => iframeMessage(PostMessageIframeEvents.ChallengeCompleted, data); From 209db3ac4f3552242bb23bbd49439896e28941ef Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Mon, 25 Jul 2022 16:04:53 +0300 Subject: [PATCH 28/36] lint --- client/src/assets/icons/index.tsx | 4 +++- curriculum-server/source-curriculum.ts | 12 ++++++------ curriculum/utils.js | 4 ++-- utils/index.js | 2 +- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/client/src/assets/icons/index.tsx b/client/src/assets/icons/index.tsx index 4adcec517a36d4..45f29522fd6003 100644 --- a/client/src/assets/icons/index.tsx +++ b/client/src/assets/icons/index.tsx @@ -35,7 +35,9 @@ const generateIconComponent = ( className: string ): JSX.Element => { // fallback in case super block doesn't exist and for tests - const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign; + const Icon = iconMap[superBlock as keyof typeof iconMap] + ? iconMap[superBlock as keyof typeof iconMap] + : ResponsiveDesign; return ; }; diff --git a/curriculum-server/source-curriculum.ts b/curriculum-server/source-curriculum.ts index 0912ad62f8e965..a505e1e12d79d3 100644 --- a/curriculum-server/source-curriculum.ts +++ b/curriculum-server/source-curriculum.ts @@ -6,8 +6,9 @@ interface Curriculum { [key: string]: unknown; } -const curriculumList: Array = Object.keys(curriculum as Curriculum) -.map(key => { +const curriculumList: Array = Object.keys( + curriculum as Curriculum +).map(key => { if (key === '2022/responsive-web-design') { return { '2022-responsive-web-design': (curriculum as Curriculum)[key] }; } else if (key === '2022/responsive-web-design-qa') { @@ -17,10 +18,9 @@ const curriculumList: Array = Object.keys(curriculum as Curriculum) } }); -const patchedCurriculum = curriculumList - .reduce((prev, curr) => { - return { ...prev, ...curr }; - }, {}); +const patchedCurriculum = curriculumList.reduce((prev, curr) => { + return { ...prev, ...curr }; +}, {}); void fs .mkdir('data', { recursive: true }) diff --git a/curriculum/utils.js b/curriculum/utils.js index 04f3073e34c5fd..fa592a606be5d4 100644 --- a/curriculum/utils.js +++ b/curriculum/utils.js @@ -37,7 +37,7 @@ const superBlockToOrder = { 'coding-interview-prep': 10, 'responsive-web-design': 11, 'relational-database': 12, - '2022/responsive-web-design-qa': 13, + '2022/responsive-web-design-qa': 13 }; /** @@ -59,7 +59,7 @@ const superBlockNonAuditedOrder = { 'coding-interview-prep': 10, '2022/responsive-web-design': 11, 'relational-database': 12, - '2022/responsive-web-design-qa': 13, + '2022/responsive-web-design-qa': 13 }; const superBlockToNewOrder = { diff --git a/utils/index.js b/utils/index.js index 4c5a31cbfe6e39..0135b7bef7c637 100644 --- a/utils/index.js +++ b/utils/index.js @@ -9,7 +9,7 @@ const idToTitle = new Map( '5e6021435ac9d0ecd8b94b00': 'Information Security', '561abd10cb81ac38a17513bc': 'JavaScript Algorithms and Data Structures', '561add10cb82ac38a17513bc': 'Responsive Web Design', - 'aaaaaaaaaaaaaaaaaaaaaaaa': 'Responsive Web Design QA', + aaaaaaaaaaaaaaaaaaaaaaaa: 'Responsive Web Design QA', '660add10cb82ac38a17513be': 'Legacy Back End', '561add10cb82ac39a17513bc': 'Legacy Data Visualization', '561add10cb82ac38a17513be': 'Legacy Front End', From c8c9b72435d724213a285a3fe8618f24c31b8e62 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Mon, 25 Jul 2022 16:13:32 +0300 Subject: [PATCH 29/36] remove console.log --- client/src/templates/Challenges/redux/completion-epic.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/templates/Challenges/redux/completion-epic.js b/client/src/templates/Challenges/redux/completion-epic.js index 5e89b202e1bc73..80ccbf82ce9a97 100644 --- a/client/src/templates/Challenges/redux/completion-epic.js +++ b/client/src/templates/Challenges/redux/completion-epic.js @@ -204,7 +204,6 @@ export default function completionEpic(action$, state$) { } async function findPathToNavigateTo(nextChallengePath, superBlock) { - console.log(nextChallengePath, superBlock); if (nextChallengePath.includes(superBlock)) { return nextChallengePath; } From 52f5f76b691ff1073f300faae4e1c80a0fd072ce Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Mon, 25 Jul 2022 16:36:45 +0300 Subject: [PATCH 30/36] PROD-2585 - Fix issue with fcc reserved & get help link --- .../templates/Challenges/classic/editor.tsx | 23 ++++++----- .../Challenges/classic/multifile-editor.tsx | 4 +- .../src/templates/Challenges/classic/show.tsx | 5 ++- .../Challenges/components/tool-panel.tsx | 40 ------------------- 4 files changed, 19 insertions(+), 53 deletions(-) diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx index 17455f4133cb37..6651a6657dd5f1 100644 --- a/client/src/templates/Challenges/classic/editor.tsx +++ b/client/src/templates/Challenges/classic/editor.tsx @@ -109,6 +109,7 @@ interface EditorProps { usesMultifileEditor: boolean; isChallengeCompleted: boolean; testsRunning: boolean; + showRightsReserved?: boolean; } // TODO: this is grab bag of unrelated properties. There's no need for them to @@ -1128,16 +1129,18 @@ const Editor = (props: EditorProps): JSX.Element => { theme={editorTheme} /> - + {props.showRightsReserved && ( + + )} ); }; diff --git a/client/src/templates/Challenges/classic/multifile-editor.tsx b/client/src/templates/Challenges/classic/multifile-editor.tsx index 0fc5ba87add8a9..22f1d7290397bc 100644 --- a/client/src/templates/Challenges/classic/multifile-editor.tsx +++ b/client/src/templates/Challenges/classic/multifile-editor.tsx @@ -42,6 +42,7 @@ interface MultifileEditorProps { resizeProps: ResizeProps; title: string; showProjectPreview: boolean; + showRightsReserved?: boolean; usesMultifileEditor: boolean; visibleEditors: { indexhtml?: boolean; @@ -121,7 +122,7 @@ const MultifileEditor = (props: MultifileEditorProps) => { > - {editorAndSplitterKeys.map(key => { + {editorAndSplitterKeys.map((key, i) => { const isSplitter = key.endsWith('-splitter'); if (isSplitter) { return ( @@ -147,6 +148,7 @@ const MultifileEditor = (props: MultifileEditorProps) => { title={title} usesMultifileEditor={usesMultifileEditor} showProjectPreview={showProjectPreview} + showRightsReserved={props.showRightsReserved && !i} /> ); diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx index a012a9c3bfce43..8ca27cddf2d433 100644 --- a/client/src/templates/Challenges/classic/show.tsx +++ b/client/src/templates/Challenges/classic/show.tsx @@ -345,7 +345,7 @@ class ShowClassic extends Component { ); } - renderEditor() { + renderEditor(hasEditableBoundaries?: boolean) { const { pageContext: { projectPreview: { showProjectPreview } @@ -376,6 +376,7 @@ class ShowClassic extends Component { title={title} usesMultifileEditor={usesMultifileEditor} showProjectPreview={showProjectPreview} + showRightsReserved={hasEditableBoundaries} /> ) ); @@ -465,7 +466,7 @@ class ShowClassic extends Component { block={block} challengeFiles={challengeFiles} challengeType={challengeType} - editor={this.renderEditor()} + editor={this.renderEditor(hasEditableBoundaries)} hasEditableBoundaries={hasEditableBoundaries} hasNotes={!!notes} hasPreview={this.hasPreview()} diff --git a/client/src/templates/Challenges/components/tool-panel.tsx b/client/src/templates/Challenges/components/tool-panel.tsx index 10d406d00b3e1f..01b474408de873 100644 --- a/client/src/templates/Challenges/components/tool-panel.tsx +++ b/client/src/templates/Challenges/components/tool-panel.tsx @@ -1,7 +1,5 @@ import { Button, - DropdownButton, - MenuItem } from '@freecodecamp/react-bootstrap'; import React from 'react'; import { useTranslation } from 'react-i18next'; @@ -68,11 +66,7 @@ function ToolPanel({ isMobile, isSignedIn, isRunningTests, - openHelpModal, - openVideoModal, openResetModal, - guideUrl, - videoUrl, challengeIsCompleted, submitChallenge }: ToolPanelProps) { @@ -121,40 +115,6 @@ function ToolPanel({ {isMobile ? t('buttons.reset') : t('buttons.reset-code')} )} - - {guideUrl ? ( - - {t('buttons.get-hint')} - - ) : null} - {videoUrl ? ( - - {t('buttons.watch-video')} - - ) : null} - - {t('buttons.ask-for-help')} - -
); } From 594238ff9ec624b7bb4faad80027df69f5a5b2ba Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Mon, 25 Jul 2022 16:54:17 +0300 Subject: [PATCH 31/36] PROD-2606 - fix height of preview iframe --- client/src/templates/Challenges/classic/show.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx index a012a9c3bfce43..9ebb7c610663db 100644 --- a/client/src/templates/Challenges/classic/show.tsx +++ b/client/src/templates/Challenges/classic/show.tsx @@ -134,7 +134,7 @@ const BASE_LAYOUT = { codePane: { flex: 1 }, editorPane: { flex: 1 }, instructionPane: { flex: 1 }, - previewPane: { flex: 0.7 }, + previewPane: { flex: 1 }, notesPane: { flex: 0.7 }, testsPane: { flex: 0.3 } }; From 69020616418864578837a9d213eda6b8b474756c Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 25 Jul 2022 14:38:11 -0700 Subject: [PATCH 32/36] PROD-2456 configure shortened course #time 3h --- client/utils/help-category-map.json | 2 + .../meta.json | 6 +-- .../cccccccccccccccccccccccc.md | 43 ++++++------------- .../dddddddddddddddddddddddd.md | 43 +++++++++++++------ .../eeeeeeeeeeeeeeeeeeeeeeee.md | 2 + .../ffffffffffffffffffffffff.md | 1 + utils/preformatted-block-names.json | 2 + 7 files changed, 54 insertions(+), 45 deletions(-) diff --git a/client/utils/help-category-map.json b/client/utils/help-category-map.json index 96f4eb69362d28..6fa138ac53f9d8 100644 --- a/client/utils/help-category-map.json +++ b/client/utils/help-category-map.json @@ -57,7 +57,9 @@ "data-analysis-with-python-course": "Python", "python-for-penetration-testing": "Python", "learn-html-by-building-a-cat-photo-app": "HTML-CSS", + "learn-html-by-building-a-cat-photo-app-qa": "HTML-CSS", "learn-basic-css-by-building-a-cafe-menu": "HTML-CSS", + "learn-basic-css-by-building-a-cafe-menu-qa": "HTML-CSS", "learn-css-variables-by-building-a-city-skyline": "HTML-CSS", "basic-javascript-rpg-game": "JavaScript", "functional-programming-spreadsheet": "JavaScript", diff --git a/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app-qa/meta.json b/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app-qa/meta.json index 64c236b9a0e8b5..ba909e61dc4cf9 100644 --- a/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app-qa/meta.json +++ b/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app-qa/meta.json @@ -1,5 +1,5 @@ { - "name": "Learn HTML by Building a Cat Photo App", + "name": "Learn HTML by Building a Cat Photo App QA", "isUpcomingChange": false, "usesMultifileEditor": true, "hasEditableBoundaries": true, @@ -11,11 +11,11 @@ "superBlock": "2022/responsive-web-design-qa", "challengeOrder": [ [ - "dddddddddddddddddddddddd", + "cccccccccccccccccccccccc", "Step 1" ], [ - "cccccccccccccccccccccccc", + "dddddddddddddddddddddddd", "Step 2" ] ]} diff --git a/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/cccccccccccccccccccccccc.md b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/cccccccccccccccccccccccc.md index fb488b6b057255..667cffeb4d14e8 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/cccccccccccccccccccccccc.md +++ b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/cccccccccccccccccccccccc.md @@ -1,50 +1,35 @@ --- id: cccccccccccccccccccccccc -title: Step 2 +title: Step 1 challengeType: 0 -dashedName: step-2 +dashedName: step-1 +order: 1 --- # --description-- -Add a `head` element within the `html` element, so you can add a `title` element. The `title` element's text should be `Cafe Menu`. +As you learned in the last few steps of the Cat Photo App, there is a basic structure needed to start building your web page. -# --hints-- - -You should have an opening `` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `` tag. - -```js -assert(code.match(//i)); -``` +Add the `` tag, and an `html` element. -You should have an opening `` tag. - -```js -assert(code.match(/<title>/i)); -``` +# --hints-- -You should have a closing `` tag. +You should have the `DOCTYPE` declaration. ```js -assert(code.match(/<\/title>/i)); +assert(code.match(//i)); ``` -Your `title` element should be nested in your `head` element. +You should have an opening `` tag. ```js -assert(code.match(/\s*.*<\/title>\s*<\/head>/si)); +assert(code.match(/<html>/i)); ``` -Your `title` element should have the text `Cafe Menu`. You may need to check your spelling. +You should have a closing `<html>` tag. Remember that closing tags have a `/` following the opening `<` bracket. ```js -assert.match(document.querySelector('title')?.innerText, /Cafe Menu/i); +assert(code.match(/<\/html>/i)); ``` # --seed-- @@ -52,10 +37,8 @@ assert.match(document.querySelector('title')?.innerText, /Cafe Menu/i); ## --seed-contents-- ```html -<!DOCTYPE html> -<html> --fcc-editable-region-- --fcc-editable-region-- -</html> + ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/dddddddddddddddddddddddd.md b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/dddddddddddddddddddddddd.md index 54351638415f65..4c7dbfc9b527f1 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/dddddddddddddddddddddddd.md +++ b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-basic-css-by-building-a-cafe-menu-qa/dddddddddddddddddddddddd.md @@ -1,34 +1,51 @@ --- id: dddddddddddddddddddddddd -title: Step 1 +title: Step 2 challengeType: 0 -dashedName: step-1 +dashedName: step-2 +order: 2 --- # --description-- -As you learned in the last few steps of the Cat Photo App, there is a basic structure needed to start building your web page. - -Add the `<!DOCTYPE html>` tag, and an `html` element. +Add a `head` element within the `html` element, so you can add a `title` element. The `title` element's text should be `Cafe Menu`. # --hints-- -You should have the `DOCTYPE` declaration. +You should have an opening `<head>` tag. + +```js +assert(code.match(/<head>/i)); +``` + +You should have a closing `</head>` tag. + +```js +assert(code.match(/<head>/i)); +``` + +You should have an opening `<title>` tag. ```js -assert(code.match(/<!DOCTYPE html>/i)); +assert(code.match(/<title>/i)); ``` -You should have an opening `<html>` tag. +You should have a closing `` tag. ```js -assert(code.match(//i)); +assert(code.match(/<\/title>/i)); ``` -You should have a closing `` tag. Remember that closing tags have a `/` following the opening `<` bracket. +Your `title` element should be nested in your `head` element. ```js -assert(code.match(/<\/html>/i)); +assert(code.match(/\s*.*<\/title>\s*<\/head>/si)); +``` + +Your `title` element should have the text `Cafe Menu`. You may need to check your spelling. + +```js +assert.match(document.querySelector('title')?.innerText, /Cafe Menu/i); ``` # --seed-- @@ -36,8 +53,10 @@ assert(code.match(/<\/html>/i)); ## --seed-contents-- ```html +<!DOCTYPE html> +<html> --fcc-editable-region-- --fcc-editable-region-- - +</html> ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/eeeeeeeeeeeeeeeeeeeeeeee.md b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/eeeeeeeeeeeeeeeeeeeeeeee.md index 2606083c51fbae..0786ee17f22a63 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/eeeeeeeeeeeeeeeeeeeeeeee.md +++ b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/eeeeeeeeeeeeeeeeeeeeeeee.md @@ -2,6 +2,8 @@ id: eeeeeeeeeeeeeeeeeeeeeeee challengeType: 0 dashedName: step-1 +title: Step 1 +order: 1 --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/ffffffffffffffffffffffff.md b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/ffffffffffffffffffffffff.md index b2451315d216f8..73769ab873c8df 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/ffffffffffffffffffffffff.md +++ b/curriculum/challenges/english/14-responsive-web-design-22-qa/learn-html-by-building-a-cat-photo-app-qa/ffffffffffffffffffffffff.md @@ -3,6 +3,7 @@ id: ffffffffffffffffffffffff title: Step 2 challengeType: 0 dashedName: step-2 +order: 2 --- # --description-- diff --git a/utils/preformatted-block-names.json b/utils/preformatted-block-names.json index 127411d466059e..6998de790e7871 100644 --- a/utils/preformatted-block-names.json +++ b/utils/preformatted-block-names.json @@ -18,12 +18,14 @@ "json-apis-and-ajax": "JSON APIs and Ajax", "learn-accessibility-by-building-a-quiz": "Learn Accessibility by Building a Quiz", "learn-basic-css-by-building-a-cafe-menu": "Learn Basic CSS by Building a Cafe Menu", + "learn-basic-css-by-building-a-cafe-menu-qa": "Learn Basic CSS by Building a Cafe Menu QA", "learn-css-animation-by-building-a-ferris-wheel": "Learn CSS Animation by Building a Ferris Wheel", "learn-css-flexbox-by-building-a-photo-gallery": "Learn CSS Flexbox by Building a Photo Gallery", "learn-css-grid-by-building-a-magazine": "Learn CSS Grid by Building a Magazine", "learn-css-transforms-by-building-a-penguin": "Learn CSS Transforms by Building a Penguin", "learn-css-variables-by-building-a-city-skyline": "Learn CSS Variables by Building a City Skyline", "learn-html-by-building-a-cat-photo-app": "Learn HTML by Building a Cat Photo App", + "learn-html-by-building-a-cat-photo-app-qa": "Learn HTML by Building a Cat Photo App QA", "learn-html-forms-by-building-a-registration-form": "Learn HTML Forms by Building a Registration Form", "learn-intermediate-css-by-building-a-picasso-painting": "Learn Intermediate CSS by Building a Picasso Painting", "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet", From 304c8269673ce5d346e8cfb86cbcf6ab5b1b3d69 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu <olariu.vasilica@gmail.com> Date: Tue, 26 Jul 2022 16:27:01 +0300 Subject: [PATCH 33/36] PROD-2504 - prevent FCC donate modal --- client/src/components/layouts/learn.tsx | 23 +++---------------- client/src/redux/action-types.js | 2 -- client/src/redux/index.js | 15 ------------ .../components/completion-modal.tsx | 21 +---------------- .../Challenges/components/tool-panel.tsx | 4 +--- .../Introduction/super-block-intro.tsx | 6 ----- 6 files changed, 5 insertions(+), 66 deletions(-) diff --git a/client/src/components/layouts/learn.tsx b/client/src/components/layouts/learn.tsx index 72e1d1b36aefd9..68478145ae225f 100644 --- a/client/src/components/layouts/learn.tsx +++ b/client/src/components/layouts/learn.tsx @@ -6,10 +6,8 @@ import { Loader } from '../../components/helpers'; import { userSelector, userFetchStateSelector, - isSignedInSelector, - tryToShowDonationModal + isSignedInSelector } from '../../redux'; -import DonateModal from '../Donation/donation-modal'; import './prism.css'; import './prism-night.css'; @@ -37,28 +35,16 @@ const mapStateToProps = createSelector( }) ); -const mapDispatchToProps = { - tryToShowDonationModal -}; +const mapDispatchToProps = {}; type LearnLayoutProps = { isSignedIn?: boolean; fetchState: FetchState; user: User; - tryToShowDonationModal: () => void; children?: React.ReactNode; }; -function LearnLayout({ - fetchState, - tryToShowDonationModal, - children -}: LearnLayoutProps): JSX.Element { - useEffect(() => { - tryToShowDonationModal(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - +function LearnLayout({ fetchState, children }: LearnLayoutProps): JSX.Element { useEffect(() => { return () => { const metaTag = document.querySelector(`meta[name="robots"]`); @@ -78,9 +64,6 @@ function LearnLayout({ <meta content='noindex' name='robots' /> </Helmet> <main id='learn-app-wrapper'>{children}</main> - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ - /* @ts-ignore */} - <DonateModal /> </> ); } diff --git a/client/src/redux/action-types.js b/client/src/redux/action-types.js index 2d37584c938c94..833dd101dbab3f 100644 --- a/client/src/redux/action-types.js +++ b/client/src/redux/action-types.js @@ -6,7 +6,6 @@ export const actionTypes = createTypes( [ 'appMount', 'hardGoTo', - 'allowBlockDonationRequests', 'closeDonationModal', 'hideCodeAlly', 'preventBlockDonationRequests', @@ -16,7 +15,6 @@ export const actionTypes = createTypes( 'serverStatusChange', 'resetUserData', 'tryToShowCodeAlly', - 'tryToShowDonationModal', 'executeGA', 'showCodeAlly', 'submitComplete', diff --git a/client/src/redux/index.js b/client/src/redux/index.js index d9e0f582ab8fae..2ef07d287b4982 100644 --- a/client/src/redux/index.js +++ b/client/src/redux/index.js @@ -10,7 +10,6 @@ import { createAcceptTermsSaga } from './accept-terms-saga'; import { actionTypes } from './action-types'; import { createAppMountSaga } from './app-mount-saga'; import { createCodeAllySaga } from './codeally-saga'; -import { createDonationSaga } from './donation-saga'; import failedUpdatesEpic from './failed-updates-epic'; import { createFetchUserSaga } from './fetch-user-saga'; import { createGaSaga } from './ga-saga'; @@ -76,7 +75,6 @@ export const sagas = [ ...createAcceptTermsSaga(actionTypes), ...createAppMountSaga(actionTypes), ...createCodeAllySaga(actionTypes), - ...createDonationSaga(actionTypes), ...createGaSaga(actionTypes), ...createFetchUserSaga(actionTypes), ...createShowCertSaga(actionTypes), @@ -87,15 +85,8 @@ export const sagas = [ export const appMount = createAction(actionTypes.appMount); -export const tryToShowDonationModal = createAction( - actionTypes.tryToShowDonationModal -); - export const executeGA = createAction(actionTypes.executeGA); -export const allowBlockDonationRequests = createAction( - actionTypes.allowBlockDonationRequests -); export const closeDonationModal = createAction(actionTypes.closeDonationModal); export const openDonationModal = createAction(actionTypes.openDonationModal); export const preventBlockDonationRequests = createAction( @@ -444,12 +435,6 @@ export const reducer = handleActions( } }; }, - [actionTypes.allowBlockDonationRequests]: (state, { payload }) => { - return { - ...state, - recentlyClaimedBlock: payload - }; - }, [actionTypes.updateDonationFormState]: (state, { payload }) => ({ ...state, donationFormState: { ...state.donationFormState, ...payload } diff --git a/client/src/templates/Challenges/components/completion-modal.tsx b/client/src/templates/Challenges/components/completion-modal.tsx index c86ee9e194fbd2..f8693f9b989988 100644 --- a/client/src/templates/Challenges/components/completion-modal.tsx +++ b/client/src/templates/Challenges/components/completion-modal.tsx @@ -12,11 +12,7 @@ import { createSelector } from 'reselect'; import { dasherize } from '../../../../../utils/slugs'; import { isProject } from '../../../../utils/challenge-types'; import Login from '../../../components/Header/components/Login'; -import { - isSignedInSelector, - executeGA, - allowBlockDonationRequests -} from '../../../redux'; +import { isSignedInSelector, executeGA } from '../../../redux'; import { AllChallengeNode, ChallengeFiles } from '../../../redux/prop-types'; import { @@ -68,9 +64,6 @@ const mapDispatchToProps = function (dispatch: Dispatch) { submitChallenge: () => { dispatch(submitChallenge()); }, - allowBlockDonationRequests: (block: string) => { - dispatch(allowBlockDonationRequests(block)); - }, executeGA }; return () => dispatchers; @@ -97,7 +90,6 @@ export function getCompletedPercent( } interface CompletionModalsProps { - allowBlockDonationRequests: (arg0: string) => void; block: string; blockName: string; certification: string; @@ -187,17 +179,6 @@ export class CompletionModalInner extends Component< handleSubmit(): void { this.props.submitChallenge(); - this.checkBlockCompletion(); - } - - // check block completion for donation - checkBlockCompletion(): void { - if ( - this.state.completedPercent === 100 && - !this.props.completedChallengesIds.includes(this.props.id) - ) { - this.props.allowBlockDonationRequests(this.props.blockName); - } } componentWillUnmount(): void { diff --git a/client/src/templates/Challenges/components/tool-panel.tsx b/client/src/templates/Challenges/components/tool-panel.tsx index 01b474408de873..0ed4c8a6e16426 100644 --- a/client/src/templates/Challenges/components/tool-panel.tsx +++ b/client/src/templates/Challenges/components/tool-panel.tsx @@ -1,6 +1,4 @@ -import { - Button, -} from '@freecodecamp/react-bootstrap'; +import { Button } from '@freecodecamp/react-bootstrap'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { connect } from 'react-redux'; diff --git a/client/src/templates/Introduction/super-block-intro.tsx b/client/src/templates/Introduction/super-block-intro.tsx index 00c1dee08abac7..468ff56b05282a 100644 --- a/client/src/templates/Introduction/super-block-intro.tsx +++ b/client/src/templates/Introduction/super-block-intro.tsx @@ -11,7 +11,6 @@ import { bindActionCreators, Dispatch } from 'redux'; import { createSelector } from 'reselect'; import { SuperBlocks } from '../../../../config/certification-settings'; -import DonateModal from '../../components/Donation/donation-modal'; import Login from '../../components/Header/components/Login'; import Map from '../../components/Map'; import { Spacer } from '../../components/helpers'; @@ -20,7 +19,6 @@ import { userFetchStateSelector, signInLoadingSelector, isSignedInSelector, - tryToShowDonationModal, userSelector } from '../../redux'; import { MarkdownRemark, AllChallengeNode, User } from '../../redux/prop-types'; @@ -54,7 +52,6 @@ type SuperBlockProp = { resetExpansion: () => void; t: TFunction; toggleBlock: (arg0: string) => void; - tryToShowDonationModal: () => void; user: User; }; @@ -86,7 +83,6 @@ const mapStateToProps = (state: Record<string, unknown>) => { const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators( { - tryToShowDonationModal, resetExpansion, toggleBlock: b => toggleBlock(b) }, @@ -96,7 +92,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => const SuperBlockIntroductionPage = (props: SuperBlockProp) => { useEffect(() => { initializeExpandedState(); - props.tryToShowDonationModal(); setTimeout(() => { configureAnchors({ offset: -40, scrollDuration: 400 }); @@ -245,7 +240,6 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => { </Col> </Row> </Grid> - <DonateModal location={props.location} /> </> ); }; From 1cbf5522fea5831a67d0f09eff2cf7432b85bb25 Mon Sep 17 00:00:00 2001 From: Brooke <brooke.souza@topcoder.com> Date: Tue, 26 Jul 2022 11:32:38 -0700 Subject: [PATCH 34/36] PROd-2456 #comment fix padding on checkmark on challenge description header #time 10m --- client/src/templates/Challenges/classic/editor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx index 17455f4133cb37..59d43a77fc1c19 100644 --- a/client/src/templates/Challenges/classic/editor.tsx +++ b/client/src/templates/Challenges/classic/editor.tsx @@ -652,7 +652,7 @@ const Editor = (props: EditorProps): JSX.Element => { style={{ height: '15px', width: '15px', - marginLeft: '7px' + margin: '0 0 4px 7px' }} /> ); From 9a090400d92ad56697c0ada2bced0d32ee4afd2a Mon Sep 17 00:00:00 2001 From: Chris McCann <chris.mccann@topcoder.com> Date: Tue, 26 Jul 2022 12:03:49 -0700 Subject: [PATCH 35/36] Adds new Topcoder README to describe the application * describes changes we made to the fcc source code * provides details on how the application is built and deployed * mentions key challenges we experienced that drove some of the changes (lessons learned) --- README-TOPCODER.md | 54 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 README-TOPCODER.md diff --git a/README-TOPCODER.md b/README-TOPCODER.md new file mode 100644 index 00000000000000..5ac4dbf99b0e93 --- /dev/null +++ b/README-TOPCODER.md @@ -0,0 +1,54 @@ +## Topcoder freeCodeCamp modifications README + +This file describes the modifications Topcoder made to the freeCodeCamp.org application to support providing FCC course content within the Topcoder Academy and Learning Paths effort. It also provides details about how the application is deployed and hosted in our AWS cloud environment. + +## Table of Contents + +- [Learning Platform](#the-learning-platform) +- [Learning Platform API](#the-learning-platform-api) +- [MongoDB Configuration](#mongodb-configuration) +- [CI/CD Configuration](#cicd-configuration) + +### The Learning Platform + +The freeCodeCamp application is hosted in the [platform-ui](https://github.com/topcoder-platform/platform-ui) application, within the [Learn tool](https://github.com/topcoder-platform/platform-ui/tree/dev/src-ts/tools/learn). The Learn application uses the [learning-paths-api](https://github.com/topcoder-platform/learning-paths-api) to manage and display course metadata, such as the certifications and courses available, and to track user course progress independently of the progress tracking performed by the hosted freeCodeCamp application. + +The freeCodeCamp code editors and course material viewing tools are hosted inside an iframe and communicate with the parent platform-ui application via messages, which in turn trigger calls to the learning paths API. For example, when a user completes a course, a course completion message is sent to from the freeCodeCamp application to the parent platform-ui app, which then makes an API call to record the event in the Topcoder Academy datastore. + +#### Build and Deploy Process + +The freeCodeCamp application is statically built during deployment and hosted in AWS S3 via a Cloudfront distribution. The S3 bucket had to be specially configured to support this type of deployment, in particular to allow the correct URLs to be used by the platform-ui and the embedded freeCodeCamp application. + +#### Authentication + +The application natively uses Auth0 authentication, which we had to modify to use Topcoder's login and authentication process. (details) + +(TODO - more detail here on the major things we did) + +### The Learning Platform API + +The freeCodeCamp API, which is responsible for managing user progress and sessions in MongoDB, was modified to support Topcoder Auth0 authentication and to reflect the path at which the API was deployed in AWS. + +#### Build and Deploy Process + +The API is deployed via AWS Elastic Container Service. See the [api/ECSDockerfile](./docker/api/ECSDockerfile) for details of this configuration. A key thing to note is that the freeCodeCamp application and API rely in the presence of a .env file that contains all of the required environment variables. + +Topcoder's standard deployment process is to store sensitive deployment variables (include API keys, secrets, tokens, etc.) in an S3 bucket and to programmatically retrieve them and inject those values as environment variables into the Docker container at build time. However, this approach does not work for freeCodeCamp due to the reliance on the existence of the .env file in the project root. We modified the build and deploy process to include a copy of the .env file in S3 that is copied into the project root and available for the application when it is started. + +### MongoDB Configuration + +The freeCodeCamp application natively uses MongoDB to track user sessions and course progress. To support our deployment of freeCodeCamp, an instance of MongoDB's cloud [Atlas](https://www.mongodb.com/atlas) service was stood-up. Key things to note about this: + +- This instance was configured via the [AWS Marketplace](https://aws.amazon.com/marketplace/pp/prodview-pp445qepfdy34?ref_=aws-mp-console-subscription-detail) so that the Atlas instance billing would flow to the associated AWS account. +- An initial attempt was made to use an Atlas "pay as you go" serverless instance of MongoDB since costs would be very low. However, two issues arose that prevented this: + - The MongoDB version that Atlas serverless uses was incompatible with freeCodeCamp's NodeJS mongodb driver package + - AWS VPC peering cannot be used with a serverless instance +- As a result of these issues we settled on an M10 clustered instance of MongoDB. + +In order to connect the [freeCodeCamp API](#learning-platform-api) to the MongoDB Atlas instance, VPC peering was established between the AWS VPC into which the freeCodeCamp API was deployed and the Atlas instance's VPC. The [VPC peering documentation](https://www.mongodb.com/docs/atlas/security-vpc-peering/) on their website is comprehensive and accurate. We followed this process to establish a secure connection from the API to the database. + +### CI/CD Configuration + +We initially attempted to deploy the freeCodeCamp application and API via our standard CircleCI system, however we were never able to get this to work properly. The application build failed repeatedly at various points and was never successful. + +Our DevOps team stood-up a new Jenkins CI/CD system in an AWS EC2 instance (see the [Jenkinsfile](./Jenkinsfile) in the project root for details) and this was successful. However, the build and deployment of the application and API currently takes over 20 minutes. We have an outstanding request with the DevOps team to address this. From fb93fdc8069d33c0db5d7d687260ee33b8f31abb Mon Sep 17 00:00:00 2001 From: Vasilica Olariu <olariu.vasilica@gmail.com> Date: Mon, 1 Aug 2022 15:48:48 +0300 Subject: [PATCH 36/36] PROD-2649 - handle mobile fixes --- .../templates/Challenges/classic/classic.css | 7 ++++ .../templates/Challenges/classic/editor.tsx | 6 +++- .../Challenges/classic/mobile-layout.tsx | 34 ++++++++++++++++--- .../src/templates/Challenges/classic/show.tsx | 3 +- .../Challenges/components/output.css | 1 + .../Challenges/components/tool-panel.tsx | 4 +-- 6 files changed, 46 insertions(+), 9 deletions(-) diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css index 27d1486bb46058..516f1ee27c99ee 100644 --- a/client/src/templates/Challenges/classic/classic.css +++ b/client/src/templates/Challenges/classic/classic.css @@ -40,6 +40,13 @@ padding-bottom: 16px; } +#challenge-page-tabs .tab-content.no-toolpanel { + height: calc( + 100vh - var(--header-height, 0px) - var(--flash-message-height, 0px) - 24px - + 16px + ); +} + #challenge-page-tabs .tab-pane { height: 100%; overflow: hidden; diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx index 0100f9e84da1c1..be63d9783a9381 100644 --- a/client/src/templates/Challenges/classic/editor.tsx +++ b/client/src/templates/Challenges/classic/editor.tsx @@ -1054,7 +1054,11 @@ const Editor = (props: EditorProps): JSX.Element => { focusIfTargetEditor(); } - if (props.initialTests) initTests(props.initialTests); + // Once a challenge has been completed, we don't want changes to the content + // to reset the tests since the user is already done with the challenge. + if (props.initialTests && !challengeIsComplete()) { + initTests(props.initialTests); + } if (hasEditableRegion() && editor) { if (props.isResetting) { diff --git a/client/src/templates/Challenges/classic/mobile-layout.tsx b/client/src/templates/Challenges/classic/mobile-layout.tsx index b48dbea7bb08ee..547fb5b075812f 100644 --- a/client/src/templates/Challenges/classic/mobile-layout.tsx +++ b/client/src/templates/Challenges/classic/mobile-layout.tsx @@ -1,8 +1,18 @@ import React, { Component, ReactElement } from 'react'; +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; +import { Test } from '../../../redux/prop-types'; import ToolPanel from '../components/tool-panel'; +import { challengeTestsSelector } from '../redux'; import MobilePaneSelector, { Tab } from './mobile-pane-selector'; +const mapStateToProps = createSelector( + challengeTestsSelector, + (tests: Test[]) => ({ + tests + }) +); interface MobileLayoutProps { editor: JSX.Element | null; guideUrl: string; @@ -15,6 +25,8 @@ interface MobileLayoutProps { testOutput: JSX.Element; videoUrl: string; usesMultifileEditor: boolean; + testsRunning: boolean; + tests: Test[]; } interface MobileLayoutState { @@ -45,11 +57,13 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> { hasPreview, notes, preview, - guideUrl, - videoUrl, + tests, + testsRunning, usesMultifileEditor } = this.props; + const isChallengeComplete = tests.every(test => test.pass && !test.err); + // Unlike the desktop layout the mobile version does not have an ActionRow, // but still needs a way to switch between the different tabs. @@ -63,14 +77,24 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> { hasNotes={hasNotes} usesMultifileEditor={usesMultifileEditor} /> - <div className='tab-content'> + <div + className={`tab-content ${ + hasEditableBoundaries ? 'no-toolpanel' : '' + }`} + > {currentTab === Tab.Editor && editor} {currentTab === Tab.Instructions && instructions} {currentTab === Tab.Console && testOutput} {currentTab === Tab.Notes && notes} {currentTab === Tab.Preview && preview} </div> - <ToolPanel guideUrl={guideUrl} isMobile={true} videoUrl={videoUrl} /> + {!hasEditableBoundaries && ( + <ToolPanel + isMobile={true} + isRunningTests={testsRunning} + challengeIsCompleted={isChallengeComplete} + /> + )} </div> ); } @@ -78,4 +102,4 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> { MobileLayout.displayName = 'MobileLayout'; -export default MobileLayout; +export default connect(mapStateToProps)(MobileLayout); diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx index e1abc1a1d0377b..ba98af5b9c5fca 100644 --- a/client/src/templates/Challenges/classic/show.tsx +++ b/client/src/templates/Challenges/classic/show.tsx @@ -446,7 +446,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> { <Helmet title={`${this.getBlockNameTitle(t)} | freeCodeCamp.org`} /> <Media maxWidth={MAX_MOBILE_WIDTH}> <MobileLayout - editor={this.renderEditor()} + editor={this.renderEditor(hasEditableBoundaries)} guideUrl={getGuideUrl({ forumTopicId, title })} hasEditableBoundaries={hasEditableBoundaries} hasNotes={!!notes} @@ -459,6 +459,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> { testOutput={this.renderTestOutput()} usesMultifileEditor={usesMultifileEditor} videoUrl={this.getVideoUrl()} + testsRunning={this.props.testsRunning} /> </Media> <Media minWidth={MAX_MOBILE_WIDTH + 1}> diff --git a/client/src/templates/Challenges/components/output.css b/client/src/templates/Challenges/components/output.css index 2cc197f44ca551..f6ae7c932c7af9 100644 --- a/client/src/templates/Challenges/components/output.css +++ b/client/src/templates/Challenges/components/output.css @@ -6,6 +6,7 @@ width: 100%; overflow-y: auto; background: var(--tc-black-5); + margin-bottom: 0; } pre.output-text code { diff --git a/client/src/templates/Challenges/components/tool-panel.tsx b/client/src/templates/Challenges/components/tool-panel.tsx index 0ed4c8a6e16426..371973da6a2a18 100644 --- a/client/src/templates/Challenges/components/tool-panel.tsx +++ b/client/src/templates/Challenges/components/tool-panel.tsx @@ -52,8 +52,8 @@ interface ToolPanelProps { openHelpModal: () => void; openVideoModal: () => void; openResetModal: () => void; - guideUrl: string; - videoUrl: string; + guideUrl?: string; + videoUrl?: string; challengeIsCompleted?: boolean; }