Tell us what’s happening:
Step 1
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 lesson, you learned that it is best practice to only use one h1 per page. But it looks like Camperbot is a using a few h1s.
Leave the
Welcome to Camperbot’s Blog
alone and change the other h1 elements to h2 elements.Your code so far
<!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>
<!-- User 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>
<h1>Welcome to Camperbot's Blog</h1>
<h2>My Journey Learning to Code</h2>
<h2>Accessibility Matters</h2>
<h2>What's Next?</h2>
<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>
<!-- User Editable Region -->
<h3>Contact Me</h3>
<p>Email me at camperbot@blog.io</p>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Challenge Information:
Debug a Coding Journey Blog Page - Step 1