在注意力缺陷障碍、强迫症、双相情感障碍、阅读障碍和自闭症的世界中使用 HTML、CSS 和 JS

嗨，CSS-Tricksters！在我们发布 “The Great Divide” 文章后，许多人通过推特、电子邮件、评论甚至信鸽（好吧，可能没有）分享了他们在学习 Web 开发过程中的个人经历。其中一个故事来自 Tim Smith，它非常有趣，所以我们邀请他与更广泛的社区分享。因此，请欢迎他，因为他将详细阐述他独特的个人经历以及作为前端开发人员站在他的位置上是一种怎样的感受。

嗨，大家好，我叫 Tim Smith

我患有 注意力缺陷障碍、强迫症、双相情感障碍、阅读障碍……更不用说我还在 自闭症谱系上。这种组合（除了让我感到很多个人羞愧之外）使编码变得非常困难——尤其是学习如何编码，而我正在努力学习。我的脑海中事物变得混乱，并且以倒退的方式出现，以至于我发现自己几乎不可能集中注意力超过 15-20 分钟。也许我会在另一篇文章中详细介绍这一点。即使现在我写这篇文章时，我也感觉到自己被吸引去评价 YouTube Music 上的每首歌，并试图纠正自己犯的每一个错误。而且由于我一直将“write”与“right”互换，这至少会让人感到恼火和沮丧。

我阅读能力不好，所以通过书籍学习对我来说是最无效的方法（抱歉 O’Reilly）。在线教程还可以，但我倾向于通过懒惰地复制粘贴代码示例来贬低自己。如果我强迫自己手动输入示例，我就能获得肌肉记忆的好处，但会淹没在教程的文字中，最终完全失去兴趣。

视频教程是我理想的学习方法。没有阅读内容，也没有办法让我通过复制粘贴来逃避问题。为了键入代码而不得不停止和启动视频令人抓狂，但非常值得。如果您有耐心浏览 YouTube 上的视频教程……而我没有。

我在 2000 年代初期发现了 Chris Coyier。这里 CSS-Tricks 上包含的大量文章、指南和视频对我来说是一个巨大的好处，并且实际上提高了我学习代码的能力。后来，我发现了 Wes Bos。他也是我 Web 学习的主要贡献者。Wes 解锁了我苦苦挣扎的许多东西，即 React 和 ES6 的新功能。

总的来说，我想说 Chris 和 Wes 至少贡献了我所有前端知识的 80%。（个人旁白：Chris 和 Wes，你们两位是我的英雄和秘密导师。）Chris 和 Wes 都有一种方法可以以一种既有趣又娱乐，同时又直接和精确的方式向我提供与我正在学习的内容相关的知识。他们不仅展示代码；他们还解释了每个主题的缘由和历史。Wes 在这方面略胜一筹，但 Chris 创建的大量视频让我忙碌了好几年，并且将来还会继续忙碌。

简单地编写代码是另一种有效的学习方法。我喜欢钻研并为各种 Web 语言和库设置开发服务器并进行试用。在学习许多 Web 语言和库的基础知识的同时，我还学习了大量关于 MacOS 和 Linux（主要是 Ubuntu）的知识：PHP（用于 WordPress 主题）、Python、React、Vue 等等。我学会了拥抱命令行并尽可能避免使用 图形用户界面。并非反对 图形用户界面；我只是发现命令行更精确（并且仅供你我之间知道，向非编码人员炫耀时更酷）。

我仍然使用命令行——或者至少如果我还有笔记本电脑或台式电脑可以使用的话我会使用。我实际上是在 iPad Mini 2 上撰写这篇文章。但是，我找到了另一种无需设置服务器和复杂环境即可编写和共享代码的好方法：CodePen。我早在早期测试版时就加入了，并且一见钟情。我现在可以在一个地方编写代码、共享代码并获得反馈（这是我的个人资料）。每当我想到一个有趣的想法或找到一个有趣的 kata 时，我就会启动 Codepen 并开始编码。没有复杂的开发设置。还有其他应用程序可以做到这一点，但 CodePen 由于其社交方面以及能够轻松地将代码示例嵌入论坛的能力而独一无二。

所以，这就是关于我的一些情况。我想谈谈我如何学习 HTML 和 CSS，因为它可能与你的方式有点类似，但与你可能采用的方式不同。

进入 HTML

我通过几种不同的方式学习了 HTML。起初，我会查看热门网站的源代码。在 90 年代初期，当我开始学习 HTML 时，许多（如果不是大多数）Web 浏览器都能够显示网站的源代码。我看到了所有标签、它们的使用方式以及网站的基本结构。我能够对其进行逆向工程。当时我还没有学习 CSS，所以我的第一个网站都是单列的，而且非常无聊。

快速旁白：如果没有 CSS，所有网站都完美地响应并可以在任何设备或屏幕尺寸上看起来很棒。我们用 CSS 打破它们，然后需要修复它们……仔细思考一下。

感谢源代码，我开始阅读网络上的文章并不断学习。我找到了 DreamInCode 论坛，它作为一个涵盖所有代码学科和语言的论坛——类似于 StackOverflow，因为与 StackOverflow 一样，至少以我的经验来看，这些人对新手傲慢无礼。尽管如此，我仍然能够看到人们如何处理各种 HTML 概念和问题，而这正是我开始学习冒险的跳板。我收到了关于我的代码示例的直率、经常是严厉的反馈。尽管听到严厉的批评很难，但它对我有益，因为它教会了我正确的方法——更重要的是错误的方法——来处理和编写 HTML。

就像大多数事情一样，编写和掌握 HTML 完全是关于反复试验。我必须创建数百个糟糕的网站（如果你能称之为网站的话），然后它才“点击”了我。但正如我们之前听到的那样，这总比没有好。

只需构建网站！
—— Chris Coyier

不久之后，我就接触到了 CSS，然后真正的旅程开始了……

CSS 的出现

我描述 CSS 的最简单方法是：它是使 HTML 看起来漂亮的代码。”在学习 CSS 时，我必须采取 保持简单 的态度，因为我发现自己想得太复杂了。如果您愿意，CSS 非常简单。让我们看看

查看 Tim Smith (@WebRuin) 在 CodePen 上创作的 Pen
Thing
在 CodePen 上。

这与 CSS 一样简单。在 HTML 中命名您的块（例如 <div class="Tim">...</div>），然后在 CSS 文件中使用属性来描述该块，例如颜色、边框、字体处理等等。

起初，我会花所有时间尝试记住尽可能多的 CSS 属性。我会“Alta Vista”（还记得吗？！）四处查找其他人如何使用 CSS 以及他们是如何做到的。这很有趣且内容丰富，但只会让我非常困惑。像对待 HTML 一样对 CSS 进行逆向工程只能让我走这么远。我对这类事情的记忆力充其量只能说是很差。我不得不退一步，深吸一口气（字面意思和比喻意义上的），并找到一种新的方法。

我的思考过程通常是这样的

1. 我想要文字是黑色的吗？如果是，则无需执行任何操作
2. 背景颜色呢？默认的白色很无聊，所以……给它一个背景颜色。
3. 我想让元素有多大？在测量单位方面不要想得太复杂，因为像素很好，而且高度和宽度对我来说似乎很有逻辑。

等等。简单的疑问，简单的属性名称。我的意思是，您可以使用简单的 CSS 做一些惊人的事情。正是这种简单性让我想要学习和应用我发现的所有内容。但是，与此同时，我不知所措，以至于我几乎彻底放弃了 Web 开发。这是一个尴尬的冲突：简单性和优雅性是受欢迎和有趣的，但无数的可能性令人眼花缭乱，而且无法保留。

对我来说有效的方法是采用增量方法来学习 CSS。从小处着手，并在真正学习和理解属性时逐渐添加更多内容。我发现，我可以以舒适的速度享受乐趣并发挥创造力，而不会给自己施加太大的压力。

我不会说谎。我不是设计师。面对一张空白画布，我会不知所措，或者想出一个平庸的设计，它是我喜欢的一些其他设计的混合拼凑。也就是说，我非常擅长编写设计代码，以便真正拥有设计技能的人可以将其组合在一起（例如这样）。

我爱上 CSS 是因为一个原因：它完美地平衡了逻辑和设计。很多编码都是这样的。代码可以很漂亮，但 CSS 对我来说是最好的！

JavaScript很难！但我正在努力。

HTML 和 CSS 对我来说相对容易。我在 CSS Grid 和一些更高级的内容上遇到了一些障碍，但它对我来说突然就通了。正如我之前提到的，我是一个视觉学习者。HTML 和 CSS 本质上都是视觉语言，它们给了我我的注意力缺陷多动障碍（ADD）所需的即时满足感。两者对我来说都很简单明了。

相比之下，JavaScript 我发现非常非常困难。它是一种基于逻辑的语言，通常这正合我意；然而，我发现它很难“理解”。尽管在学习过程中有一些顿悟时刻，但 JavaScript 似乎除了基础之外，都让我难以捉摸。我已经完成了 Wes Bos 的JavaScript30 课程以及许多其他教程。在向我解释的那一刻，它们是有意义的，但即使如此，当面对所谓的“空白画布”时，我忘记了大部分概念，要么一遍又一遍地编写相同的东西，要么干脆放弃。

令人惊讶的是，React 对我来说自然得多。我认为这与它的模块化以及我对积木、乐高和拼图的喜爱有关。我已经学得足够好了，能够用它进行创作，并开始用它编写一个应用程序：一个众包的城市厕所定位器。我已经用各种 Flux 库和后端数据库编写并重写了应用程序的开头。我总是半途而废，然后重新开始，就像著名的疯狂定义一样。我只是不断地认为我会弄清楚，或者找到人帮我做困难的部分。

我使用 React 的障碍是 JavaScript，当然。这可能没有意义，但请记住我对积木的看法。我知道 React 是 JavaScript。不过，对我来说，它与原生 JavaScript 完全不同。闭包、纯函数、箭头函数、let 与 const 与 var、庞大的内置方法集，更不用说导入的库、类，当然还有我的克星，大 O（我多么讨厌大 O）……我甚至在写这些的时候，脑袋都在晕。

我非常渴望至少在 JavaScript 上变得像样，所以我一直在尝试。数百个教程，像freeCodeCamp.org、Treehouse、可汗学院这样的代码学校，是的，甚至努力阅读许多书籍（我喜欢JavaScript：语言精粹）。

我学习语法没有任何问题。我认为，问题在于缺乏计算机科学知识以及无法进行数学思考。算法在概念上是有意义的，但它们的实际应用却让我难以置信。

出于心理健康原因，我必须在 2005 年离开我的 Web 开发职业。我大约在 2010 年重新开始，当时我为几家初创公司工作，但我从未真正重返这个领域。JavaScript 是我的阿喀琉斯之踵。我很幸运地找到了一些 JavaScript 非常少的职位，这样我就可以专注于 HTML 和 CSS——我认为它们构成了前端开发——但不可避免地，我被期望编写超出基本界面增强功能的 JavaScript，并且工作都失败了。所以我辞职了或者被解雇了。

持续的求职之路

最近找工作简直是一场噩梦！我们现在生活在一个由 JavaScript 主导的世界里，似乎没有人想要一个擅长 HTML、CSS 并且对 JavaScript 了解一般的 前端开发人员——尤其是那些没有计算机科学学位的人。我在任何主要的求职网站上都找不到这样的职位发布。

我有幸与 Facebook、Google 和 Apple 的招聘人员进行了面试，但我无法通过第一轮电话筛选。他们问了我一些我觉得与我对前端开发的理解几乎没有关系的问题。没有关于 CSS 最佳实践的问题，甚至没有关于语义 HTML 或 ARIA 属性的正确使用。他们似乎只关心大 O 和高效循环。即使与小公司的面试也是如此。像 Wix 之类的服务是否已经抢走了所有核心前端工作？

尽管我面临着所有这些挑战，但我仍然认为自己已经掌握了 HTML 和 CSS，并且对 JavaScript 有了基本的了解。我为此感到非常自豪。虽然我梦想在 Facebook、Google 或 Apple 这样的大公司找到工作，但我真的只是希望找到一个我的 HTML 和 CSS 技能能够大放异彩的角色，并且能够在某个地方作为初级开发人员获得 JavaScript 的实际经验，并得到指导，例如我目前居住的旧金山湾区。

我们每个人都有不同的学习风格和速度，所以在你尝试过所有可能的学习方法之前，不要放弃。而且，如果你想出了新的方法，请分享出来，以便我们都能扩展我们个人和集体的知识。

我希望这篇文章至少能触动另一位像我一样的开发者！感谢我所有的前辈。祝编码愉快！