调试 Coding Journey 博客页面

发布: (2026年2月2日 GMT+8 00:00)
3 min read
原文: Dev.to

Source: Dev.to

工作坊概述

今天的帖子是关于 freeCodeCamp 下一个工作坊,具体位于响应式网页设计认证的可访问性(Accessibility)章节。该工作坊紧随我昨天完成的一系列可访问性理论课程,我希望所学能够帮助工作坊顺利进行。

修复标题元素

工作坊首先展示了一个存在可访问性问题的博客页面。首要步骤是处理标题元素的问题:

## 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.

添加导航

第四个练习要求你将导航部分包裹在一个 “ 元素中:

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

使用语义化元素

接下来,课程指导你将通用的 元素替换为语义化的 元素,并插入缺失的 “ 元素:

## 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.

添加页脚和 Mailto 链接

最后的练习指导你添加页脚、微调另一个标题,并插入一个 mailto 链接。下面是一个 mailto 链接的示例:

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

结论

完成所有九个步骤后,我觉得这次工作坊为网页编码时可能出现的可访问性问题提供了扎实的洞见。今后我一定会更加留意这些重要事项!

明天,我将继续学习关于可访问表格和表单的理论课程,然后再进入下一个工作坊。期间,继续编码吧!

Back to Blog

相关文章

阅读更多 »

我的2026开发者作品集

介绍 嗨!我是 Ahmed Anter Elsayed,一名热衷于 Python、AI 和 web development 的开发者和教育者。 实时作品集 查看我的实时作品集…

创建调查表单

项目概述 尽管在 DEV 上写了几篇帖子,我仍然在昨天完成了 freeCodeCamp 的 HTML Tables and Forms 测验。那 l...