feat: enable new curriculum (#44183)
* feat: use legacy flag chore: reorder challenges fix: linter revert: server change feat: unblock new editor fix: proper order fix: 0-based order fix: broke the order feat: move tribute certification to its own block feat: split the old projects block into 4 fix: put all blocks in order chore: add intro text refactor: use block, not blockName in query fix: project progress indicator * fix: reorder new challenges/certs * fix: reorder legacy challenges * fix: reintroduce legacy certs * feat: add showNewCurriculum flag to env * chore: forgot sample.env * feat: use feature flag for display * fix: rename meta + dirs to match new blocks * fix: add new blocks to help-category-map * fix: update completion-modal for new GQL schema * test: duplicate title/id errors -> warnings * fix: update completion-modal to new GQL schema Mk2 * chore: re-order metas (again) * fix: revert super-block-intro changes The intro needs to show both legacy and new content. We need to decide which pages are created, rather than than what a page shows when rendered. * feat: move upcoming curriculum into own superblock * fix: handle one certification with two superBlocks * fix: remove duplicated intros * fix: remove duplicate projects from /settings * fix: drop 'two' from Responsive Web Design Two * chore: rename slug suffix from two to v2 * feat: control display of new curriculum * feat: control project paths shown on /settings * fix: use new project order for /settings This does mean that /settings will change before the release, but I don't think it's serious. All the projects are there, just not in the legacy order. * fix: claim/show cert button * chore: remove isLegacy Since we have legacy superblocks, we don't currently need individual blocks to be legacy * test: fix utils.test * fix: verifyCanClaim needs certification If Shaun removes the cert claim cards, maybe we can remove this entirely * fix: add hasEditableBoundaries flags where needed * chore: remove isUpcomingChange * chore: v2 -> 22 Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
304773d62b
commit
8614db7a32
@@ -0,0 +1,47 @@
|
||||
---
|
||||
id: bd7158d8c242eddfaeb5bd13
|
||||
title: Build a Personal Portfolio Webpage
|
||||
challengeType: 3
|
||||
forumTopicId: 301143
|
||||
dashedName: build-a-personal-portfolio-webpage
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/zNBOYG>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**User Story #1:** My portfolio should have a welcome section with an id of `welcome-section`.
|
||||
|
||||
**User Story #2:** The welcome section should have an `h1` element that contains text.
|
||||
|
||||
**User Story #3:** My portfolio should have a projects section with an id of `projects`.
|
||||
|
||||
**User Story #4:** The projects section should contain at least one element with a class of `project-tile` to hold a project.
|
||||
|
||||
**User Story #5:** The projects section should contain at least one link to a project.
|
||||
|
||||
**User Story #6:** My portfolio should have a navbar with an id of `navbar`.
|
||||
|
||||
**User Story #7:** The navbar should contain at least one link that I can click on to navigate to different sections of the page.
|
||||
|
||||
**User Story #8:** My portfolio should have a link with an id of `profile-link`, which opens my GitHub or FCC profile in a new tab.
|
||||
|
||||
**User Story #9:** My portfolio should have at least one media query.
|
||||
|
||||
**User Story #10:** The height of the welcome section should be equal to the height of the viewport.
|
||||
|
||||
**User Story #11:** The navbar should always be at the top of the viewport.
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b04
|
||||
title: Build a Product Landing Page
|
||||
challengeType: 3
|
||||
forumTopicId: 301144
|
||||
dashedName: build-a-product-landing-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/RKRbwL>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**User Story #1:** My product landing page should have a `header` element with a corresponding `id="header"`.
|
||||
|
||||
**User Story #2:** I can see an image within the `header` element with a corresponding `id="header-img"`. A company logo would make a good image here.
|
||||
|
||||
**User Story #3:** Within the `#header` element I can see a `nav` element with a corresponding `id="nav-bar"`.
|
||||
|
||||
**User Story #4:** I can see at least three clickable elements inside the `nav` element, each with the class `nav-link`.
|
||||
|
||||
**User Story #5:** When I click a `.nav-link` button in the `nav` element, I am taken to the corresponding section of the landing page.
|
||||
|
||||
**User Story #6:** I can watch an embedded product video with `id="video"`.
|
||||
|
||||
**User Story #7:** My landing page has a `form` element with a corresponding `id="form"`.
|
||||
|
||||
**User Story #8:** Within the form, there is an `input` field with `id="email"` where I can enter an email address.
|
||||
|
||||
**User Story #9:** The `#email` input field should have placeholder text to let the user know what the field is for.
|
||||
|
||||
**User Story #10:** The `#email` input field uses HTML5 validation to confirm that the entered text is an email address.
|
||||
|
||||
**User Story #11:** Within the form, there is a submit `input` with a corresponding `id="submit"`.
|
||||
|
||||
**User Story #12:** When I click the `#submit` element, the email is submitted to a static page (use this mock URL: <https://www.freecodecamp.com/email-submit>).
|
||||
|
||||
**User Story #13:** The navbar should always be at the top of the viewport.
|
||||
|
||||
**User Story #14:** My product landing page should have at least one media query.
|
||||
|
||||
**User Story #15:** My product landing page should utilize CSS flexbox at least once.
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b03
|
||||
title: Build a Survey Form
|
||||
challengeType: 3
|
||||
forumTopicId: 301145
|
||||
dashedName: build-a-survey-form
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/VPaoNP>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**User Story #1:** I can see a title with `id="title"` in H1 sized text.
|
||||
|
||||
**User Story #2:** I can see a short explanation with `id="description"` in P sized text.
|
||||
|
||||
**User Story #3:** I can see a `form` with `id="survey-form"`.
|
||||
|
||||
**User Story #4:** Inside the form element, I am required to enter my name in a field with `id="name"`.
|
||||
|
||||
**User Story #5:** Inside the form element, I am required to enter an email in a field with `id="email"`.
|
||||
|
||||
**User Story #6:** If I enter an email that is not formatted correctly, I will see an HTML5 validation error.
|
||||
|
||||
**User Story #7:** Inside the form, I can enter a number in a field with `id="number"`.
|
||||
|
||||
**User Story #8:** If I enter non-numbers in the number input, I will see an HTML5 validation error.
|
||||
|
||||
**User Story #9:** If I enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, I will see an HTML5 validation error.
|
||||
|
||||
**User Story #10:** For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"`.
|
||||
|
||||
**User Story #11:** For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field.
|
||||
|
||||
**User Story #12:** Inside the form element, I can select an option from a dropdown that has a corresponding `id="dropdown"`.
|
||||
|
||||
**User Story #13:** Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the `name` attribute.
|
||||
|
||||
**User Story #14:** Inside the form element, I can select several fields from a series of checkboxes, each of which must have a `value` attribute.
|
||||
|
||||
**User Story #15:** Inside the form element, I am presented with a `textarea` at the end for additional comments.
|
||||
|
||||
**User Story #16:** Inside the form element, I am presented with a button with `id="submit"` to submit all my inputs.
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b05
|
||||
title: Build a Technical Documentation Page
|
||||
challengeType: 3
|
||||
forumTopicId: 301146
|
||||
dashedName: build-a-technical-documentation-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/NdrKKL>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**User Story #1:** I can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation).
|
||||
|
||||
**User Story #2:** Within the `#main-doc` element, I can see several `section` elements, each with a class of `main-section`. There should be a minimum of 5.
|
||||
|
||||
**User Story #3:** The first element within each `.main-section` should be a `header` element which contains text that describes the topic of that section.
|
||||
|
||||
**User Story #4:** 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"`).
|
||||
|
||||
**User Story #5:** The `.main-section` elements should contain at least 10 `p` elements total (not each).
|
||||
|
||||
**User Story #6:** The `.main-section` elements should contain at least 5 `code` elements total (not each).
|
||||
|
||||
**User Story #7:** The `.main-section` elements should contain at least 5 `li` items total (not each).
|
||||
|
||||
**User Story #8:** I can see a `nav` element with a corresponding `id="navbar"`.
|
||||
|
||||
**User Story #9:** The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation.
|
||||
|
||||
**User Story #10:** 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`.
|
||||
|
||||
**User Story #11:** The `header` element in the navbar must come before any link (`a`) elements in the navbar.
|
||||
|
||||
**User Story #12:** 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").
|
||||
|
||||
**User Story #13:** When I click on a navbar element, the page should navigate to the corresponding section of the `main-doc` element (e.g. If I click on a `nav-link` element that contains the text "Hello world", the page navigates to a `section` element that has that id and contains the corresponding `header`.
|
||||
|
||||
**User Story #14:** 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.
|
||||
|
||||
**User Story #15:** My Technical Documentation page should use at least one media query.
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd18
|
||||
title: Build a Tribute Page
|
||||
challengeType: 3
|
||||
forumTopicId: 301147
|
||||
dashedName: build-a-tribute-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/zNqgVx>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**User Story #1:** My tribute page should have an element with a corresponding `id="main"`, which contains all other elements.
|
||||
|
||||
**User Story #2:** I should see an element with a corresponding `id="title"`, which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug").
|
||||
|
||||
**User Story #3:** I should see either a `figure` or a `div` element with a corresponding `id="img-div"`.
|
||||
|
||||
**User Story #4:** Within the `img-div` element, I should see an `img` element with a corresponding `id="image"`.
|
||||
|
||||
**User Story #5:** Within the `img-div` element, I should see an element with a corresponding `id="img-caption"` that contains textual content describing the image shown in `img-div`.
|
||||
|
||||
**User Story #6:** I should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page.
|
||||
|
||||
**User Story #7:** I 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 (i.e. `target="_blank"`).
|
||||
|
||||
**User Story #8:** The `img` element should responsively resize, relative to the width of its parent element, without exceeding its original size.
|
||||
|
||||
**User Story #9:** The `img` element should be centered within its parent element.
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 614ccc21ea91ef1736b9b578
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Welcome to the first part in 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, /<html\s+lang=('|")[\w\-]+?\1\s*>/i);
|
||||
// TODO: This should/could be fixed in the builder.js
|
||||
// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
--fcc-editable-region--
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 613297a923965e0703b64796
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You may be familiar with the `meta` tag already; it is used to specify information about the page, such as the title, description, keywords, and author.
|
||||
|
||||
Give your page a `meta` tag 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
|
||||
// TODO: Once builder is fixed so head info is not in body
|
||||
assert.exists(document.querySelector('body > meta'));
|
||||
```
|
||||
|
||||
You should give the `meta` tag a `charset` of `UTF-8`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('body > meta')?.getAttribute('charset'), 'UTF-8');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 61329b210dac0b08047fd6ab
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Continuing with the `meta` tags, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimisation).
|
||||
|
||||
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('body > meta')?.length, 2);
|
||||
```
|
||||
|
||||
You should give the `meta` a `name` attribute of `viewport`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('body > meta[name="viewport"]')?.length, 1);
|
||||
```
|
||||
|
||||
You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`.
|
||||
|
||||
```js
|
||||
// TODO: Double-check this is the only correct answer
|
||||
assert.equal(document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 61329d52e5010e08d9b9d66b
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Another important `meta` tag 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` tag with the `name` attribute set to `description`, and give it a useful `content` attribute.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `meta` tag 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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
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
|
||||
// TODO: Fix once builder puts head in the right place
|
||||
assert.exists(document.querySelector('body > title'));
|
||||
```
|
||||
|
||||
You should not make the `title` longer than 60 characters.
|
||||
|
||||
```js
|
||||
assert.isAtMost(document.querySelector('body > title')?.textContent?.length, 60);
|
||||
```
|
||||
|
||||
Try being more descriptive with your `title` element. _Hint: At least 20 characters_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelector('body > title')?.textContent?.length, 20);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -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 is 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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
--fcc-editable-region--
|
||||
<nav>
|
||||
|
||||
</nav>
|
||||
--fcc-editable-region--
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 614090d5a22b6f0a5a6b464c
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
<!-- TODO: I purposefully added the `nav` styles without Camper input -->
|
||||
|
||||
# --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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region"></section>
|
||||
<section role="region"></section>
|
||||
<section role="region"></section>
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
@@ -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 sans-serif _web safe_ font 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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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--
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,173 @@
|
||||
---
|
||||
id: 6143610161323a081b249c19
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Filling out the content of the quiz, below the `#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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label></label>
|
||||
<input />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label></label>
|
||||
<input />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label></label>
|
||||
<input />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.:</label>
|
||||
<input id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
--fcc-editable-region--
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" placeholder="e.g. Quincy Larson" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.:</label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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\.<span/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.</label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only"></span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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')?.border, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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--
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question"></fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question"></fieldset>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,195 @@
|
||||
---
|
||||
id: 6144e818fd5ea704fe56081d
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give each `fieldset` an adaquate `name` attribute. Then, give both unordered lists a `class` of `answers-list`.
|
||||
|
||||
Finally, add 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 adaquate `name` attribute. _Hint: I would use `html-question-one`_
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name);
|
||||
```
|
||||
|
||||
You should give the second `fieldset` an adaquate `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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question">
|
||||
<legend></legend>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question">
|
||||
<legend></legend>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
--fcc-editable-region--
|
||||
<ul class="answers-list">
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
--fcc-editable-region--
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" />
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" />
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
--fcc-editable-region--
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" />
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" />
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
--fcc-editable-region--
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
</div>
|
||||
<div class="answer">
|
||||
</div>
|
||||
<div class="question-block">
|
||||
</div>
|
||||
<div class="answer">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label>Are you a frontend developer?</label>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="answer">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="question-block">
|
||||
<label>Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
--fcc-editable-region--
|
||||
<div class="question-block">
|
||||
<label>Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="question-block">
|
||||
<label>Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -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` placeholder text describing an example answer.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.textContent);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label>Do you have any questions:</label>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="answer">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,219 @@
|
||||
---
|
||||
id: 6145f59029474c0d3dc1c8b8
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As with the other input elements and `labels`, 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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="question-block">
|
||||
<label>Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,232 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,217 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,222 @@
|
||||
---
|
||||
id: 6145f8f8bcd4370f6509078e
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `address` element, add the following:
|
||||
|
||||
```html
|
||||
freeCodeCamp<br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
```
|
||||
|
||||
You can visit, but you might not find anything...
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the above text including the `<br />` tags to the `address` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<address>
|
||||
|
||||
</address>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,231 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<address>
|
||||
freeCodeCamp<br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,258 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,262 @@
|
||||
---
|
||||
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 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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,262 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,255 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,263 @@
|
||||
---
|
||||
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. Center align the text for the `h1`.
|
||||
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,277 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,289 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,261 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,282 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,366 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,288 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,293 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,308 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,325 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,318 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,314 @@
|
||||
---
|
||||
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')?.border, '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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,317 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,362 @@
|
||||
---
|
||||
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')?.background, '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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,338 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,358 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,361 @@
|
||||
---
|
||||
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(new __helpers.CSSHelp(document).getStyle('address')?.paddingTop?.replace(/\D+/, '')), 1);
|
||||
```
|
||||
|
||||
You should give `address` a `padding-right` of at least `1px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingRight?.replace(/\D+/, '')), 1);
|
||||
```
|
||||
|
||||
You should give `address` a `padding-bottom` of at least `1px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingBottom?.replace(/\D+/, '')), 1);
|
||||
```
|
||||
|
||||
You should give `address` a `padding-left` of at least `1px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingLeft?.replace(/\D+/, '')), 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,344 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,352 @@
|
||||
---
|
||||
id: 6148e41c728f65138addf9cc
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Setting the `scroll-behaviour` 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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,689 @@
|
||||
---
|
||||
id: 6148e5aeb102e3142de026a2
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, the navigation accessibility can be improved with providing keyboard shortcuts.
|
||||
|
||||
The `accesskey` attribute accepts a space-separated list of access keys. For example:
|
||||
|
||||
```html
|
||||
<button type="submit" accesskey="s">Submit</button>
|
||||
```
|
||||
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" id="logo" alt="freeCodeCamp logo" />
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info" accesskey="i">INFO</a></li>
|
||||
<li><a href="#html-questions" accesskey="h">HTML</a></li>
|
||||
<li><a href="#css-questions" accesskey="c">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span>:</label>
|
||||
<input type="date" id="birth-date" name="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you an frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-question">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-question" name="css-question" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://www.freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
id: 5f33071498eb2472b87ddee4
|
||||
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--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 5f3313e74582ad9d063e3a38
|
||||
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 `Camper Cafe Menu`.
|
||||
|
||||
# --hints--
|
||||
|
||||
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(/<title>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</title>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/title>/i));
|
||||
```
|
||||
|
||||
Your `<title>` element should be nested in your `<head>` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>\s*<title>.*<\/title>\s*<\/head>/i));
|
||||
```
|
||||
|
||||
Your `<title>` element should have the text `Camper Cafe Menu`. You may need to check your spelling.
|
||||
|
||||
```js
|
||||
assert(code.match(/<title>camper\scafe\smenu<\/title>/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -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 could be 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(/<meta\s.*>/i));
|
||||
```
|
||||
|
||||
Your `meta` tag should have a `charset` attribute.
|
||||
|
||||
```js
|
||||
assert(code.match(/<meta charset=/i));
|
||||
```
|
||||
|
||||
Your `charset` attribute should have a value of `utf-8`.
|
||||
|
||||
```js
|
||||
assert(code.match(/charset=('|")utf-8\1/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<title>Camper Cafe Menu</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<html>
|
||||
```
|
||||
@@ -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 `<body>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</body>` 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(/<head>/i));
|
||||
assert(code.match(/<\/head>/i));
|
||||
```
|
||||
|
||||
Your `body` element should come after your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head>[.\n\s]*<body>/im));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<html>
|
||||
```
|
||||
|
||||
@@ -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 `<h1>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</h1>` 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(/<h1>CAMPER CAFE<\/h1>/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
<html>
|
||||
```
|
||||
@@ -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 `<p>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</p>` 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(/<p>Est. 2020<\/p>/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<h1>CAMPER CAFE</h1>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
@@ -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 `<header>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<header>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</header>` 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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
@@ -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 `<main>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>/i));
|
||||
```
|
||||
|
||||
Your code should have a closing `</main>` 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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
@@ -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 `<section>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<section\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</section>` 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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
@@ -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 `<h2>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h2\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</h2>` 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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
@@ -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 `<style>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<style\s*>/i));
|
||||
```
|
||||
|
||||
Your code should have a closing `</style>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/style\s*>/));
|
||||
```
|
||||
|
||||
Your `style` element should be nested in your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
<html>
|
||||
```
|
||||
@@ -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 set 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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
--fcc-editable-region--
|
||||
<style>
|
||||
</style>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 5f3477ae9675db8bb7655b30
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous step, you used a <dfn>type selector</dfn> 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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
--fcc-editable-region--
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
--fcc-editable-region--
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
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 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
|
||||
const css = code.split('<!DOCTYPE html>')[0];
|
||||
assert(__helpers.removeWhiteSpace(css).match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/))
|
||||
```
|
||||
|
||||
Your selector should set the `text-align` property to `center`.
|
||||
|
||||
```js
|
||||
const css = code.split('<!DOCTYPE html>')[0];
|
||||
assert(css.match(/text-align:\s*center;?/));
|
||||
```
|
||||
|
||||
You should only have one selector.
|
||||
|
||||
```js
|
||||
const css = code.split('<!DOCTYPE html>')[0];
|
||||
assert(css.match(/text-align:\s*center;?/).length === 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<style>
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
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
|
||||
const html = code.split('<!DOCTYPE html>')[1];
|
||||
assert(!html.includes('style'));
|
||||
assert(!html.includes('text-align'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<style>
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -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('body > 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(/<link[\w\W\s]+\/>/i));
|
||||
```
|
||||
|
||||
Your `link` element should be within your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>[\w\W\s]*<link[\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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 5f3477cbcb6ba47918c1da92
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
So the styling of the page looks 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
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have two `meta` elements.
|
||||
|
||||
```js
|
||||
assert(code.match(/<meta.*\/?>/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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@@ -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 `<div>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<div>/i));
|
||||
```
|
||||
|
||||
You should have a closing `</div>` 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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
--fcc-editable-region--
|
||||
background-color: burlywood;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 300px;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
div {
|
||||
width: 300px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -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 is 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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
div {
|
||||
width: 300px;
|
||||
background-color: burlywood;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
div {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -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 <dfn>class selector</dfn> 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` type 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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
|
||||
@@ -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 `<div>` 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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user