mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-12 01:00:13 -04:00
feat(curriculum): adding debug a coding journey blog page (#62160)
This commit is contained in:
Jessica Wilkins
@@ -2299,6 +2299,12 @@
|
||||
"In these lectures, you will learn about accessibility and its importance, assistive tools for people with disabilities, HTML attributes that let you create inclusive websites, accessibility best practices, and much more."
|
||||
]
|
||||
},
|
||||
"workshop-debug-coding-journey-blog-page": {
|
||||
"title": "Debug a Coding Journey Blog Page",
|
||||
"intro": [
|
||||
"In this workshop, you will debug and fix accessibility errors in a coding blog page."
|
||||
]
|
||||
},
|
||||
"lecture-accessible-tables-forms": {
|
||||
"title": "Working with Accessible Tables and Forms",
|
||||
"intro": [
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Debug a Coding Journey Blog Page
|
||||
block: workshop-debug-coding-journey-blog-page
|
||||
superBlock: full-stack-developer
|
||||
---
|
||||
|
||||
## Introduction to the Debug a Coding Journey Blog Page
|
||||
|
||||
In this workshop, you will debug and fix accessibility errors in a coding blog page.
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 68c2fb153760d075321c5da3
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
demoType: onLoad
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Camperbot has created a coding journey blog page, but it looks like the page has some accessibility issues and bad practices. Your job in this workshop, is to fix these issues for Camperbot.
|
||||
|
||||
The first set of errors has to deal with the use of headings. In a prior lecture, you learned that it is best practice to only use one `h1` per page. But it looks like Camperbot is a using a few `h1`s.
|
||||
|
||||
Leave the `<h1>Welcome to Camperbot's Blog</h1>` alone and change the other `h1` elements to `h2` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not alter the `<h1>Welcome to Camperbot's Blog</h1>`.
|
||||
|
||||
```js
|
||||
const heading = document.querySelectorAll("h1")[0];
|
||||
assert.equal(heading?.textContent, "Welcome to Camperbot's Blog");
|
||||
```
|
||||
|
||||
You should change the `h1` element with the text of `My Journey Learning to Code` to an `h2` element.
|
||||
|
||||
```js
|
||||
const firstPost = document.getElementById("post1");
|
||||
assert.equal(firstPost?.tagName, "H2");
|
||||
assert.equal(firstPost?.textContent, "My Journey Learning to Code");
|
||||
```
|
||||
|
||||
You should change the `h1` element with the text of `Accessibility Matters` to an `h2` element.
|
||||
|
||||
```js
|
||||
const secondPost = document.getElementById("post2");
|
||||
assert.equal(secondPost?.tagName, "H2");
|
||||
assert.equal(secondPost?.textContent, "Accessibility Matters");
|
||||
```
|
||||
|
||||
You should change the `h1` element with the text of `What's Next?` to an `h2` element.
|
||||
|
||||
```js
|
||||
const thirdPost = document.getElementById("post3");
|
||||
assert.equal(thirdPost?.tagName, "H2");
|
||||
assert.equal(thirdPost?.textContent, "What's Next?");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Camperbot's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome to Camperbot's Blog</h1>
|
||||
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#post1">My Journey</a></li>
|
||||
<li><a href="#post2">Accessibility</a></li>
|
||||
<li><a href="#post3">Next Steps</a></li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<h1 id="post1">My Journey Learning to Code</h1>
|
||||
<p>I started learning to code a few months ago and it's been a wild ride!</p>
|
||||
|
||||
<h4>Early Challenges</h4>
|
||||
<p>At first, syntax was really confusing.</p>
|
||||
|
||||
<h4>Breakthroughs</h4>
|
||||
<p>Eventually things started to click.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 id="post2">Accessibility Matters</h1>
|
||||
<p>Today I learned that not everyone uses the web the same way I do.</p>
|
||||
|
||||
<h5>Screen Readers</h5>
|
||||
<p>These tools help visually impaired users browse websites.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 id="post3">What's Next?</h1>
|
||||
<p>I'm excited to dive into JavaScript and build interactive features!</p>
|
||||
|
||||
<h3>Coming soon: My first JavaScript project!</h3>
|
||||
<p>Stay tuned for some exciting interactive blog features.</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<h3>Contact Me</h3>
|
||||
<p>Email me at camperbot@blog.io</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 68c3144fc395d681180cde15
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It looks like there are still some issues with the use of headings on the page. If you look at the first `div` element, there are two `h4` elements used as subheadings. A better practice would be to use `h3` elements for these subheadings since they are a level below the `h2` element.
|
||||
|
||||
Change the two `h4` elements to `h3` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h4` element with the text of `Early Challenges` should be an `h3` element.
|
||||
|
||||
```js
|
||||
const post1Subheading = document.querySelector("#post1 + p + h3");
|
||||
assert.equal(post1Subheading?.tagName, "H3");
|
||||
assert.equal(post1Subheading?.textContent, "Early Challenges");
|
||||
```
|
||||
|
||||
Your `h4` element with the text of `Breakthroughs` should be an `h3` element.
|
||||
|
||||
```js
|
||||
const post1SecondSubheading = document.querySelector("#post1 + p + h3 + p + h3");
|
||||
assert.equal(post1SecondSubheading?.tagName, "H3");
|
||||
assert.equal(post1SecondSubheading?.textContent, "Breakthroughs");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Camperbot's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome to Camperbot's Blog</h1>
|
||||
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#post1">My Journey</a></li>
|
||||
<li><a href="#post2">Accessibility</a></li>
|
||||
<li><a href="#post3">Next Steps</a></li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<h2 id="post1">My Journey Learning to Code</h2>
|
||||
<p>I started learning to code a few months ago and it's been a wild ride!</p>
|
||||
|
||||
<h4>Early Challenges</h4>
|
||||
<p>At first, syntax was really confusing.</p>
|
||||
|
||||
<h4>Breakthroughs</h4>
|
||||
<p>Eventually things started to click.</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<h2 id="post2">Accessibility Matters</h2>
|
||||
<p>Today I learned that not everyone uses the web the same way I do.</p>
|
||||
|
||||
<h5>Screen Readers</h5>
|
||||
<p>These tools help visually impaired users browse websites.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 id="post3">What's Next?</h2>
|
||||
<p>I'm excited to dive into JavaScript and build interactive features!</p>
|
||||
|
||||
<h3>Coming soon: My first JavaScript project!</h3>
|
||||
<p>Stay tuned for some exciting interactive blog features.</p>
|
||||
</div>
|
||||
<h3>Contact Me</h3>
|
||||
<p>Email me at camperbot@blog.io</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 68c31763232a4582366eb6fd
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the second post section, there is an `h5` element being used. It would be more appropriate to use an `h3` element here.
|
||||
|
||||
Change the `h5` element to an `h3` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should change the `h5` element to an `h3` element.
|
||||
|
||||
```js
|
||||
const secondPostSubheading = document.querySelector("#post2 + p + h3");
|
||||
assert.equal(secondPostSubheading?.tagName, "H3");
|
||||
assert.equal(secondPostSubheading?.textContent, "Screen Readers");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Camperbot's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome to Camperbot's Blog</h1>
|
||||
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#post1">My Journey</a></li>
|
||||
<li><a href="#post2">Accessibility</a></li>
|
||||
<li><a href="#post3">Next Steps</a></li>
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<h2 id="post1">My Journey Learning to Code</h2>
|
||||
<p>I started learning to code a few months ago and it's been a wild ride!</p>
|
||||
|
||||
<h3>Early Challenges</h3>
|
||||
<p>At first, syntax was really confusing.</p>
|
||||
|
||||
<h3>Breakthroughs</h3>
|
||||
<p>Eventually things started to click.</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<h2 id="post2">Accessibility Matters</h2>
|
||||
<p>Today I learned that not everyone uses the web the same way I do.</p>
|
||||
|
||||
<h5>Screen Readers</h5>
|
||||
<p>These tools help visually impaired users browse websites.</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<h2 id="post3">What's Next?</h2>
|
||||
<p>I'm excited to dive into JavaScript and build interactive features!</p>
|
||||
|
||||
<h3>Coming soon: My first JavaScript project!</h3>
|
||||
<p>Stay tuned for some exciting interactive blog features.</p>
|
||||
</div>
|
||||
<h3>Contact Me</h3>
|
||||
<p>Email me at camperbot@blog.io</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,109 @@
|
||||
---
|
||||
id: 68c318d9c3b3f382f93d1fd1
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the main title of the page, there is a navigation section that contains links to each blog post.
|
||||
|
||||
This section should be wrapped in a `nav` element to indicate its purpose as a navigation landmark.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your page should have a `nav` element.
|
||||
|
||||
```js
|
||||
const navElement = document.querySelector("nav");
|
||||
assert.isNotNull(navElement);
|
||||
```
|
||||
|
||||
Your `<h2>Navigation</h2>` should be inside the `nav` element.
|
||||
|
||||
```js
|
||||
const h2Element = document.querySelector("nav h2");
|
||||
assert.isNotNull(h2Element);
|
||||
assert.strictEqual(h2Element?.textContent, "Navigation");
|
||||
```
|
||||
|
||||
Your `ul` element should be inside the `nav` element.
|
||||
|
||||
```js
|
||||
const ulElement = document.querySelector("nav ul");
|
||||
assert.isNotNull(ulElement);
|
||||
```
|
||||
|
||||
Your `li` elements should be inside the `ul` element.
|
||||
|
||||
```js
|
||||
const liElements = document.querySelectorAll("nav ul li");
|
||||
assert.isAtLeast(liElements.length, 3);
|
||||
```
|
||||
|
||||
You should not add any additional `ul`, `li` or `h2` elements.
|
||||
|
||||
```js
|
||||
const liElements = document.querySelectorAll("nav ul li");
|
||||
assert.lengthOf(liElements, 3);
|
||||
|
||||
const ulElements = document.querySelectorAll("ul");
|
||||
assert.lengthOf(ulElements, 1);
|
||||
|
||||
const h2Elements = document.querySelectorAll("h2");
|
||||
assert.lengthOf(h2Elements , 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Camperbot's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome to Camperbot's Blog</h1>
|
||||
--fcc-editable-region--
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#post1">My Journey</a></li>
|
||||
<li><a href="#post2">Accessibility</a></li>
|
||||
<li><a href="#post3">Next Steps</a></li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<h2 id="post1">My Journey Learning to Code</h2>
|
||||
<p>I started learning to code a few months ago and it's been a wild ride!</p>
|
||||
|
||||
<h3>Early Challenges</h3>
|
||||
<p>At first, syntax was really confusing.</p>
|
||||
|
||||
<h3>Breakthroughs</h3>
|
||||
<p>Eventually things started to click.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 id="post2">Accessibility Matters</h2>
|
||||
<p>Today I learned that not everyone uses the web the same way I do.</p>
|
||||
|
||||
<h3>Screen Readers</h3>
|
||||
<p>These tools help visually impaired users browse websites.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 id="post3">What's Next?</h2>
|
||||
<p>I'm excited to dive into JavaScript and build interactive features!</p>
|
||||
|
||||
<h3>Coming soon: My first JavaScript project!</h3>
|
||||
<p>Stay tuned for some exciting interactive blog features.</p>
|
||||
</div>
|
||||
<h3>Contact Me</h3>
|
||||
<p>Email me at camperbot@blog.io</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 68c31a762717d583d90ad31e
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the blog page, there are a total of three blog posts wrapped inside generic `div` elements. But it would be better to use semantic elements to wrap each post.
|
||||
|
||||
Change each `div` element that wraps each blog post to an `article` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first `div` element for the first post should be changed to an `article` element.
|
||||
|
||||
```js
|
||||
const firstPost = document.querySelector("nav + article");
|
||||
assert.isNotNull(firstPost);
|
||||
```
|
||||
|
||||
Your second `div` element for the second post should be changed to an `article` element.
|
||||
|
||||
```js
|
||||
const secondPost = document.querySelector("article + article");
|
||||
assert.isNotNull(secondPost);
|
||||
```
|
||||
|
||||
Your third `div` element for the third post should be changed to an `article` element.
|
||||
|
||||
```js
|
||||
const thirdPost = document.querySelector("article + article + article");
|
||||
assert.isNotNull(thirdPost);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Camperbot's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome to Camperbot's Blog</h1>
|
||||
|
||||
<nav>
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#post1">My Journey</a></li>
|
||||
<li><a href="#post2">Accessibility</a></li>
|
||||
<li><a href="#post3">Next Steps</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<h2 id="post1">My Journey Learning to Code</h2>
|
||||
<p>I started learning to code a few months ago and it's been a wild ride!</p>
|
||||
|
||||
<h3>Early Challenges</h3>
|
||||
<p>At first, syntax was really confusing.</p>
|
||||
|
||||
<h3>Breakthroughs</h3>
|
||||
<p>Eventually things started to click.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 id="post2">Accessibility Matters</h2>
|
||||
<p>Today I learned that not everyone uses the web the same way I do.</p>
|
||||
|
||||
<h3>Screen Readers</h3>
|
||||
<p>These tools help visually impaired users browse websites.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 id="post3">What's Next?</h2>
|
||||
<p>I'm excited to dive into JavaScript and build interactive features!</p>
|
||||
|
||||
<h3>Coming soon: My first JavaScript project!</h3>
|
||||
<p>Stay tuned for some exciting interactive blog features.</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<h3>Contact Me</h3>
|
||||
<p>Email me at camperbot@blog.io</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 68c31c946d73bf84b108c6fc
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Since the entire section containing the blog posts represents the main content of the page, it should be wrapped in a `main` element. This helps screen readers and other assistive technologies understand the structure of the page better.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `main` element.
|
||||
|
||||
```js
|
||||
const mainElement = document.querySelector("main");
|
||||
assert.isNotNull(mainElement);
|
||||
```
|
||||
|
||||
Your `main` element should contain all three `article` elements.
|
||||
|
||||
```js
|
||||
const articles = document.querySelectorAll("main article");
|
||||
assert.lengthOf(articles, 3);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Camperbot's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome to Camperbot's Blog</h1>
|
||||
|
||||
<nav>
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#post1">My Journey</a></li>
|
||||
<li><a href="#post2">Accessibility</a></li>
|
||||
<li><a href="#post3">Next Steps</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<h2 id="post1">My Journey Learning to Code</h2>
|
||||
<p>I started learning to code a few months ago and it's been a wild ride!</p>
|
||||
|
||||
<h3>Early Challenges</h3>
|
||||
<p>At first, syntax was really confusing.</p>
|
||||
|
||||
<h3>Breakthroughs</h3>
|
||||
<p>Eventually things started to click.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 id="post2">Accessibility Matters</h2>
|
||||
<p>Today I learned that not everyone uses the web the same way I do.</p>
|
||||
|
||||
<h3>Screen Readers</h3>
|
||||
<p>These tools help visually impaired users browse websites.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 id="post3">What's Next?</h2>
|
||||
<p>I'm excited to dive into JavaScript and build interactive features!</p>
|
||||
|
||||
<h3>Coming soon: My first JavaScript project!</h3>
|
||||
<p>Stay tuned for some exciting interactive blog features.</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<h3>Contact Me</h3>
|
||||
<p>Email me at camperbot@blog.io</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
id: 68c31dd917c3ae855e8728c7
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the last part of the workshop, there are a few changes needed for the contact section at the bottom.
|
||||
|
||||
The first change would be to wrap the contact section inside of a `footer` element. This will help screen readers identify this section as the footer of the page.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your page should have a `footer` element.
|
||||
|
||||
```js
|
||||
const footerElement = document.querySelector("footer");
|
||||
assert.isNotNull(footerElement);
|
||||
```
|
||||
|
||||
Your `footer` element should contain an `h3` element with the text `Contact Me`.
|
||||
|
||||
```js
|
||||
const h3Element = document.querySelector("footer h3");
|
||||
assert.isNotNull(h3Element);
|
||||
assert.strictEqual(h3Element?.textContent, "Contact Me");
|
||||
```
|
||||
|
||||
Your `footer` element should contain a `p` element with the text `Email me at camperbot@blog.io`.
|
||||
|
||||
```js
|
||||
const pElement = document.querySelector("footer p");
|
||||
assert.isNotNull(pElement);
|
||||
assert.strictEqual(pElement?.textContent, "Email me at camperbot@blog.io");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Camperbot's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome to Camperbot's Blog</h1>
|
||||
|
||||
<nav>
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#post1">My Journey</a></li>
|
||||
<li><a href="#post2">Accessibility</a></li>
|
||||
<li><a href="#post3">Next Steps</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h2 id="post1">My Journey Learning to Code</h2>
|
||||
<p>I started learning to code a few months ago and it's been a wild ride!</p>
|
||||
|
||||
<h3>Early Challenges</h3>
|
||||
<p>At first, syntax was really confusing.</p>
|
||||
|
||||
<h3>Breakthroughs</h3>
|
||||
<p>Eventually things started to click.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 id="post2">Accessibility Matters</h2>
|
||||
<p>Today I learned that not everyone uses the web the same way I do.</p>
|
||||
|
||||
<h3>Screen Readers</h3>
|
||||
<p>These tools help visually impaired users browse websites.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 id="post3">What's Next?</h2>
|
||||
<p>I'm excited to dive into JavaScript and build interactive features!</p>
|
||||
|
||||
<h3>Coming soon: My first JavaScript project!</h3>
|
||||
<p>Stay tuned for some exciting interactive blog features.</p>
|
||||
</article>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<h3>Contact Me</h3>
|
||||
<p>Email me at camperbot@blog.io</p>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 68c31f3a5de8bf861f616dc8
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Right now the `footer` section has an `h3` heading. But it should be an `h2` heading to maintain a proper heading hierarchy.
|
||||
|
||||
Change the `h3` to an `h2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `footer` element should contain an `h2` element instead of an `h3` element.
|
||||
|
||||
```js
|
||||
const heading = document.querySelector("footer h2");
|
||||
assert.isNotNull(heading);
|
||||
assert.strictEqual(heading?.textContent, "Contact Me");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Camperbot's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome to Camperbot's Blog</h1>
|
||||
|
||||
<nav>
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#post1">My Journey</a></li>
|
||||
<li><a href="#post2">Accessibility</a></li>
|
||||
<li><a href="#post3">Next Steps</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h2 id="post1">My Journey Learning to Code</h2>
|
||||
<p>I started learning to code a few months ago and it's been a wild ride!</p>
|
||||
|
||||
<h3>Early Challenges</h3>
|
||||
<p>At first, syntax was really confusing.</p>
|
||||
|
||||
<h3>Breakthroughs</h3>
|
||||
<p>Eventually things started to click.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 id="post2">Accessibility Matters</h2>
|
||||
<p>Today I learned that not everyone uses the web the same way I do.</p>
|
||||
|
||||
<h3>Screen Readers</h3>
|
||||
<p>These tools help visually impaired users browse websites.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 id="post3">What's Next?</h2>
|
||||
<p>I'm excited to dive into JavaScript and build interactive features!</p>
|
||||
|
||||
<h3>Coming soon: My first JavaScript project!</h3>
|
||||
<p>Stay tuned for some exciting interactive blog features.</p>
|
||||
</article>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<h3>Contact Me</h3>
|
||||
<p>Email me at camperbot@blog.io</p>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 68c3215e6826ca00a2d892fc
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The last change will be to the email text inside of the footer. In earlier lectures and workshops, you learned how to work with the `mailto` link like this:
|
||||
|
||||
```html
|
||||
<p>Email me at <a href="mailto:janedoe@email.com">janedoe@email.com</a></p>
|
||||
```
|
||||
|
||||
Start by wrapping the `camperbot@blog.io` email address inside of an anchor element. Then, add the `href` attribute to the anchor element and set it equal to `mailto:camperbot@blog.io`.
|
||||
|
||||
With that last change, you have successfully resolved all of the issues in the blog page!
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `camperbot@blog.io` email address should be wrapped inside of an anchor element.
|
||||
|
||||
```js
|
||||
const anchor = document.querySelector("footer a");
|
||||
assert.isNotNull(anchor);
|
||||
assert.strictEqual(anchor?.textContent, "camperbot@blog.io");
|
||||
```
|
||||
|
||||
Your anchor element should have an `href` attribute with a value of `mailto:camperbot@blog.io`.
|
||||
|
||||
```js
|
||||
const anchor = document.querySelector("footer a");
|
||||
assert.strictEqual(anchor?.getAttribute("href"), "mailto:camperbot@blog.io");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Camperbot's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome to Camperbot's Blog</h1>
|
||||
|
||||
<nav>
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#post1">My Journey</a></li>
|
||||
<li><a href="#post2">Accessibility</a></li>
|
||||
<li><a href="#post3">Next Steps</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h2 id="post1">My Journey Learning to Code</h2>
|
||||
<p>I started learning to code a few months ago and it's been a wild ride!</p>
|
||||
|
||||
<h3>Early Challenges</h3>
|
||||
<p>At first, syntax was really confusing.</p>
|
||||
|
||||
<h3>Breakthroughs</h3>
|
||||
<p>Eventually things started to click.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 id="post2">Accessibility Matters</h2>
|
||||
<p>Today I learned that not everyone uses the web the same way I do.</p>
|
||||
|
||||
<h3>Screen Readers</h3>
|
||||
<p>These tools help visually impaired users browse websites.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 id="post3">What's Next?</h2>
|
||||
<p>I'm excited to dive into JavaScript and build interactive features!</p>
|
||||
|
||||
<h3>Coming soon: My first JavaScript project!</h3>
|
||||
<p>Stay tuned for some exciting interactive blog features.</p>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
<h2>Contact Me</h2>
|
||||
--fcc-editable-region--
|
||||
<p>Email me at camperbot@blog.io</p>
|
||||
--fcc-editable-region--
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Camperbot's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome to Camperbot's Blog</h1>
|
||||
|
||||
<nav>
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li><a href="#post1">My Journey</a></li>
|
||||
<li><a href="#post2">Accessibility</a></li>
|
||||
<li><a href="#post3">Next Steps</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h2 id="post1">My Journey Learning to Code</h2>
|
||||
<p>I started learning to code a few months ago and it's been a wild ride!</p>
|
||||
|
||||
<h3>Early Challenges</h3>
|
||||
<p>At first, syntax was really confusing.</p>
|
||||
|
||||
<h3>Breakthroughs</h3>
|
||||
<p>Eventually things started to click.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 id="post2">Accessibility Matters</h2>
|
||||
<p>Today I learned that not everyone uses the web the same way I do.</p>
|
||||
|
||||
<h3>Screen Readers</h3>
|
||||
<p>These tools help visually impaired users browse websites.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2 id="post3">What's Next?</h2>
|
||||
<p>I'm excited to dive into JavaScript and build interactive features!</p>
|
||||
|
||||
<h3>Coming soon: My first JavaScript project!</h3>
|
||||
<p>Stay tuned for some exciting interactive blog features.</p>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<h2>Contact Me</h2>
|
||||
<p>Email me at <a href="mailto:camperbot@blog.io">camperbot@blog.io</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "Debug a Coding Journey Blog Page",
|
||||
"dashedName": "workshop-debug-coding-journey-blog-page",
|
||||
"helpCategory": "HTML-CSS",
|
||||
"blockType": "workshop",
|
||||
"blockLayout": "challenge-grid",
|
||||
"challengeOrder": [
|
||||
{ "id": "68c2fb153760d075321c5da3", "title": "Step 1" },
|
||||
{ "id": "68c3144fc395d681180cde15", "title": "Step 2" },
|
||||
{ "id": "68c31763232a4582366eb6fd", "title": "Step 3" },
|
||||
{ "id": "68c318d9c3b3f382f93d1fd1", "title": "Step 4" },
|
||||
{ "id": "68c31a762717d583d90ad31e", "title": "Step 5" },
|
||||
{ "id": "68c31c946d73bf84b108c6fc", "title": "Step 6" },
|
||||
{ "id": "68c31dd917c3ae855e8728c7", "title": "Step 7" },
|
||||
{ "id": "68c31f3a5de8bf861f616dc8", "title": "Step 8" },
|
||||
{ "id": "68c3215e6826ca00a2d892fc", "title": "Step 9" }
|
||||
],
|
||||
"isUpcomingChange": false,
|
||||
"hasEditableBoundaries": true,
|
||||
"usesMultifileEditor": true
|
||||
}
|
||||
@@ -58,6 +58,7 @@
|
||||
"dashedName": "html-and-accessibility",
|
||||
"blocks": [
|
||||
"lecture-importance-of-accessibility-and-good-html-structure",
|
||||
"workshop-debug-coding-journey-blog-page",
|
||||
"lecture-accessible-tables-forms",
|
||||
"lecture-introduction-to-aria",
|
||||
"lecture-accessible-media-elements",
|
||||
|
||||
Reference in New Issue
Block a user