Debug a Coding Journey Blog Page

Source: Dev.to

Workshop Overview

Today’s post is about the next workshop at freeCodeCamp, specifically in the Accessibility section of the Responsive Web Design certification. This workshop follows a series of theory lessons on accessibility that I completed yesterday, and I hope what I have learned will help the workshop go smoothly.

Fixing Heading Elements

The workshop begins by showing a blog page with accessibility issues. The first steps involve addressing problems with the heading elements:

## My Journey Learning to Code
I started learning to code a few months ago and it's been a wild ride!

#### Early Challenges
At first, syntax was really confusing.

#### Breakthroughs
Eventually things started to click.

## Accessibility Matters
Today I learned that not everyone uses the web the same way I do.

Screen Readers
These tools help visually impaired users browse websites.

## What's Next?
I'm excited to dive into JavaScript and build interactive features!

### Coming soon: My first JavaScript project!
Stay tuned for some exciting interactive blog features.

Adding Navigation

The fourth exercise asks you to wrap the navigation section in a “ element:

## Navigation
- [My Journey](#post1)
- [Accessibility](#post2)
- [Next Steps](#post3)

Using Semantic Elements

Next, the lesson guides you to replace generic elements with the semantic element and to insert a missing “ element:

## My Journey Learning to Code
I started learning to code a few months ago and it's been a wild ride!

### Early Challenges
At first, syntax was really confusing.

### Breakthroughs
Eventually things started to click.

## Accessibility Matters
Today I learned that not everyone uses the web the same way I do.

### Screen Readers
These tools help visually impaired users browse websites.

## What's Next?
I'm excited to dive into JavaScript and build interactive features!

### Coming soon: My first JavaScript project!
Stay tuned for some exciting interactive blog features.

Adding Footer and Mailto Link

The final exercises guide you to add a footer, tweak another heading, and insert a mailto link. Below is an example of a mailto link:

Email me at [janedoe@email.com](mailto:janedoe@email.com)

Conclusion

With all nine steps successfully completed, I feel that the workshop provided solid insight into potential accessibility issues when coding a webpage. Definitely some important things for me to watch out for in the future!

Tomorrow, I’ll be working through a couple of theory lessons on Working with Accessible Tables and Forms before moving on to the next workshop. Until then, keep coding!