在节目中，他分享了如何找到热爱的事情、新人如何在职场成长，以及是什么内在的动力推动他在每次创业失败后又投入到下一次挑战中。

相信他的故事会带给你启发和动力，希望你喜欢这期节目，并把它分享给更多朋友。也欢迎你发邮件分享自己的故事，也许我们会邀请你作为 freeCodeCamp 播客的嘉宾。你可以在这篇文章中找到邮箱地址。

欢迎在 https://chinese.freecodecamp.org/ 查看更多免费的编程学习资源。

主要话题

• 01:40  数学专业生自学编程
• 11:58 加入传统软件开发公司
• 19:10 和老板做朋友
• 23:06 移动互联网创业
• 33:00 有技术背景的创业者如何扬长避短
• 39:58 在创业波澜中拓展认知
• 43:30 服务几万家中小企业
• 46:07 传统行业数字化转型
• 49:15 App .vs. 小程序
• 56:12 对于 AI 的畅想
• 1:02:18 找到热爱的事情
• 1:05:26 一本带来很多激励的书

提到的资源

• FTP
• 《方正人生：王选传》
• 《钢铁是怎样炼成的》

这期节目，我们邀请了光志作为嘉宾。他提到当时决定转行的时候，其实成功的希望很少，特别感谢家人的支持。

在节目中，他分享了自学编程的过程、如何找到第一份开发工作、职业发展经历，以及他朝着“成为世界级程序员”这一目标所做的努力，例如学习计算机专业底层知识、学英语、保持写作、提升沟通能力。

希望这期节目带给你启发和动力，期待你把节目分享给更多朋友。也欢迎你发邮件分享自己的故事，也许我们会邀请你作为 freeCodeCamp 播客的嘉宾。你可以在这篇文章中找到邮箱地址。

欢迎在 https://chinese.freecodecamp.org/ 查看更多免费的编程学习资源。

更多关于嘉宾的信息

• GitHub
• freeCodeCamp 专栏文章
• 掘金主页

主要话题

• 02:31 2016 年学习编程
• 03:53 高中毕业停止学业，尝试多种工作
• 09:26 辞职在家学习编程
• 14:03 第一份开发工作，机会和挑战
• 20:41 目标和正反馈
• 24:29 世界级程序员
• 34:45 传统教育 .vs. 自学
• 41:16 现在的工作和生活
• 46:33 给编程初学者的建议

提到的资源

• 《而立之年，回顾我的前端转行之路》
• 《从零开始实现一个玩具版浏览器渲染引擎》
• 知乎
• 百度前端技术学园
• freeCodeCamp 英文专栏

他也是 freeCodeCamp 社区中的老朋友了，在社区中为很多同学提供帮助，比如和大家一起把课程翻译成中文、直播讲解 freeCodeCamp JS 算法题目、在英文专栏发表技术文章。

S1ngS1ng 最初接触编程是在小学的时候，而他真正考虑把编程作为职业，是在材料专业研究生毕业并工作了一年之后。因为觉得原专业领域的工作不适合自己，他自学编程，大概四个月后找到第一份开发工作。他先后在 VMware、Apple 工作，现在在 Cisco，工作内容偏重于基础设施研发。

我们聊到他转行的过程，聊到他从初级到中级再到高级开发者的过程中技能如何提升，以及思维有哪些转变，还有他所观察到的前端技术的发展趋势。相信 S1ngS1ng 保持好奇、持续学习的状态也会带给你一些动力。

希望你喜欢这期节目，并把它分享给更多朋友。也欢迎你发邮件分享自己的故事，也许我们会邀请你作为 freeCodeCamp 播客的嘉宾。你可以在这篇文章中找到邮箱地址。

欢迎在 https://chinese.freecodecamp.org/ 查看更多免费的编程学习资源。

更多关于嘉宾的信息

• GitHub
• 博客
• 访谈《S1ngS1ng：从材料工程师到 Apple 开发者》

主要话题

• 03:19 从 Logo 到 Python
• 15:47 自学编程
• 27:34 初级开发者提升技术和软技能
• 53:42 规划职业发展路线
• 65:15 面试经验
• 1:13:17 在大型科技企业的工作体验
• 1:19:56 关于 Cisco
• 1:26:16 在 Cisco 工作的乐趣和挑战
• 1:44:40 不同阶段的开发者
• 1:49:52 10x 开发者
• 2:13:32 最适宜工作的公司
• 2:23:19 硅谷工程师的一天
• 2:39:41前端技术的发展趋势
• 2:50:01选择和局限
• 2:52:55 保持好奇

提到的资源

• S1ngS1ng 直播讲解 freeCodeCamp JS 基础算法课程
• S1ngS1ng 直播讲解 freeCodeCamp JS 中级算法课程
• S1ngS1ng 的播客“网上邻居”
• Logo 语言
• Adam Loving 对 10x developer 的思考
• 可能是 10x developer 最先提出的地方，作者是 Brad Feld
• Adam Loving 引用的另一篇文章
• Vim
• Pug
• AWK
• Grep
• 正则表达式
• Web Component
• Bun
• Cisco logo 设计以金门大桥为原型，这是 logo 变化史

自强毕业后先后加入两家创业公司，担任合伙人和技术负责人。这是一段让他开拓视野、磨练技术的经历。给我印象深刻的是，他不仅自己以开放、主动的态度在开源社区中学习，还带公司团队也在社区中学习，并且积极为本地城市营造活跃的技术交流氛围。

目前，他就职于智能办公领域明星企业，从事前端开发。

从小公司到大企业，从社区方案的搬运工到创新方案的设计者，自强经历了一段痛苦的适应期，他用“做难事必有所得”这句话激励自己，逐渐总结出应对工作挑战的方法。

在节目里，他非常真诚地分享自己学习技术/创业/求职的经历、风险管理经验、沟通策略。我们将从他的故事中感受到技术人如何蜕变为更专业的职场人。

希望这些故事让你产生一些共鸣，或者给你一些启发，期待你在收听播客的平台上给我们五星或者好评，并把节目推荐给更多朋友。

欢迎在 https://chinese.freecodecamp.org/ 查看更多免费的编程学习资源。

更多关于嘉宾的信息

• GitHub

主要话题

• 03:13 大学期间自学编程
• 13:25 找到自己差异化的地方
• 15:58 毕业后成为创业者
• 21:26 作为技术负责人的挑战
• 27:43 在社区中获得提升
• 43:36 大企业和小企业招聘
• 1:02:19 在大企业中遇到的挑战
• 1:16:56 换一个沟通方法
• 1:24:35 工程化思维
• 1:30:37 大企业前端团队的工作日常
• 1:34:49 技术人在新环境如何保持竞争力
• 1:51:39 关于转行做开发的建议

提到的资源

• 微信公众号：前端早读课、若川视野
• 极客时间
• freeCodeCamp

Papaya 形容自己是一个纯文科生，她曾经当过英语老师，也在外企做过管理工作，这是在外人眼中不错的工作，可是她自己感觉心理和生理上都被不断消耗，对工作提不起兴趣，所以她想探索确认自己到底喜欢做什么。当她决定学习编程、转行成为开发者的时候，身边很多人都不理解。但是她觉得场上没有别人，选择做什么事情不是为了证明自己，而是舒展和探索自己。

Papaya 非常喜欢哈利波特，她觉得探索代码的过程很像去霍格沃茨读书。虽然这个过程并不是一帆风顺，但是她不断地解决问题，不断地闯关，在其中也收获了快乐。

在学习和工作之余，Papaya 是一个严肃的跑步者，跑过半程马拉松。

她将分享自己如何通过思想实验确定人生目标、自学编程时遇到的挑战和解决办法、找工作以及通过开源社区加入一个远程开发团队的体验。

如果你喜欢我们的节目，请记得给我们好评，分享给更多朋友。

更多关于嘉宾的信息

• GitHub 主页

主要话题

• 02:42 什么时候开始学习编程的
• 03:08 在转行之前从事什么工作
• 04:53 为什么转行做开发
• 09:46 怎么看待编程工作
• 12:42 如何判断自己是否适合做编程工作
• 17:28 如何考虑社会上人们对于程序员的普遍印象
• 19:33 不要和自己的天赋对抗
• 21:40 打破对于程序员的刻板印象
• 24:08 抽象的阶梯
• 28:59 学习编程需要去培训班吗
• 31:13 让 Papaya 产生霍格沃茨的感觉的学习资源
• 32:25 freeCodeCamp 课程的特色
• 33:31 辅助制定学习路线的工具
• 35:56 推荐学习编程的好书
• 40:54 怎么阅读技术书籍
• 44:01 自学时怎么安排学习时间
• 46:57 在以往工作中培养的思维方式对于学习编程的帮助
• 50:05 需要英语好才能学编程吗
• 51:10 需要数学好才能学编程吗
• 53:44 有意思的数学课程
• 54:57 第一次构建的项目
• 56:16 超可爱的皮卡丘 API
• 58:55 在学习过程中踩过的坑
• 1:01:53 学不懂的时候怎么办
• 1:03:38 在支持网络中获得能量
• 1:07:03 什么时候做好找工作的准备了
• 1:10:42 对第一份工作的期待
• 1:14:32 在求职时如何展现自己的优势
• 1:18:45 什么特质让我们在开源社区中很好协作
• 1:22:19 转行后如何调整心态从新手开始
• 1:24:25 思想实验
• 1:31:07 对自己的期待
• 1:33:17 更多关于自学编程的建议

提到的资源

• CS50（freeCodeCamp 发布的 CS50 视频课程）
• freeCodeCamp 的课程
• roadmap.sh
• Quincy 的书《如何在 2023 年学习编程并获得开发者工作 [完整指南]》
• 《Head First 系列》
• 《JavaScript 权威指南》（犀牛书）
• 《JavaScript 高级程序设计（第四版）》（红宝书）
• 《你不知道的 JavaScript》
• 《算法图解》
• 《语言学的邀请》
• 播客“网上邻居”
• 播客“得意忘形”
• JavaScript 基础算法题（视频）
• JavaScript 中级算法题（视频）
• MasterClass Terrence Tao
• 《陶哲轩教你学数学》
• PokeAPI
• Rick and Morty API
• Marvel API
• Second Brain
• Notion
• Obsidian
• 《哥德尔、艾舍尔、巴赫：集异璧之大成》
• 第一次提到 “stay hungry stay foolish” 的杂志《Whole Earth Catalog》

我们这一期的嘉宾是 Java 工程师刘睿。1999 年，在刘睿读初中时，喜欢尝试新东西的父亲花了好几个月工资给家里买了一台电脑，自己探索学习编程，研究各种软件。父亲的学习热情也影响了他对计算机和编程产生兴趣。

在读大学选择专业的时候，刘睿并没有选择当时不热门的计算机专业，但是因为高考分数不够高，被调剂到计算机专业，开始了真正的编程学习之旅，并且自学 Java。

大学时他曾做过社团主席，但是因为没有学位证，在很长一段时间极度不自信，甚至在最初找工作时他只想当个网管。后来，他通过不断摄取知识，重拾自信，在职业发展中逐渐从公司最边缘的开发者成长为上市公司的软件架构师。

刘睿有 15 年 Java 开发经验。在业余时间，他热爱阅读，坚持每天学习，发布了很多关于学习、求职、工作和生活各种主题的视频。同时，他在 freeCodeCamp 社区中写文章、创建视频教程，分享的经验帮助了社区中的很多人。

在这期节目里，他分享了自己的一些鲜为人知的往事，分享他的学习和工作经历，以及如何用程序员的思维指导生活，言谈之间透着哲思。

如果这期节目让你产生一些共鸣，请记得给我们好评，并把节目分享给更多朋友。

欢迎在 https://chinese.freecodecamp.org/ 查看免费的编程学习资源。

更多关于嘉宾的信息

• bilibili 主页
• GitHub 主页

主要话题

• 03:28 初中时独立解决游戏 bug
• 05:42 编程初体验
• 11:30 被调剂到计算机专业
• 13:16 大学选专业时考虑的五个维度
• 16:32 告别颓废，自学 Java
• 18:39 自学编程需要注意加强哪些知识
• 24:17 “源码在手，天下我有”
• 26:41 打破“不自信”的成长障碍
• 28:30 如何保持技术知识的更新
• 29:28 给 Java 学习者的建议
• 31:20 第一次给知名开源项目贡献代码
• 33:05 大厂和小厂招聘的区别
• 34:55 即时反馈是从编程中获得的最大乐趣
• 37:31 优秀程序员的三个特质
• 41:29 程序的本质是什么
• 44:42 是否担心被 AI 取代
• 48:54 大龄程序员如何克服焦虑
• 50:12 开发 iOS 应用督促自己和女儿每天阅读
• 53:18 特别想推荐给刚入门编程的人们的一本书

提到的资源

• 文章《你不知道的 Java》

• 《Java 新手课》视频教程
  • 入门课
  • 通过编写一个 2048 小游戏学习面向对象相关思想
  • 用 Vert.x 开发简易 Web 聊天室

• BookTime - 您的阅读计时伴侣
• 免费试用链接
• Obsidian
• Vert.x
• Quarkus
• 书籍《程序员修炼之道：从小工到专家》

学好英语

一定要学好英语，虽然英文不好也可以学会前端。但你一定会遇到比英语好的人更多的困难。因为你只能看中文的教程和书籍，学习框架和工具只能依赖中文文档，交流问题只敢去中文社区。而前端 99% 的工具框架都是歪果仁发明的，国人发明的火起来的框架工具 Vue/FIS 等，两只手就能数的过来，并且大部分也是在国际社区里火起来的。还是英文的资源更权威丰富，甚至 Vue 的开发者尤大本人都不愿意浪费他陪老婆孩子的时间来教你学英语：

中文的学习资源虽然也足够丰富，可是质量良莠不齐。初学者根本无法分辨一个教程的好坏，甚至其中有没有错误，假如选错了学习资料，很可能就会被误导。而假如你英文好，就可以直接去看官方的教程文档，这是绝对权威可靠的。

工作中遇到的框架选型没有中文文档怎么办？遇到了某个库本身的 Bug 没有中文资料怎么办？遇到这类情况周围又没人帮你的话你会寸步难行。这时你没有挫败感么？不会觉得自己很 Low 很弱么？

英文不好你写代码的时候甚至需要用拼音给变量命名，看不懂术语和缩写，别人给你解释 Java 和 JavaScript 之间的区别还需要靠周杰和周杰伦。

所以请一定学好英文，否则即使你学会了前端开发，也无法在前端开发工程师的路上走很远，很多问题你无法解决，跟不上最新的流行趋势，遇到困难都需要依靠别人，你看到的教程资源都是那些懂英文的人吃剩下的，那么你自己的技术水平也永远要屈居人下。

话说回来，前端相关的英文也并不难，高频的词汇也不会超过托福雅思。而且对于一般人来讲，你只要能看懂英文文档大意就可以了，另外和歪果仁交流其实也不是什么难事：

学会搜索

你要知道这个世界上有着和你一样千千万万的前端学习者，并且每一个人都是从入门到熟悉到精通一步步走过去的。别的不敢保证，编程学习的资源在网上异常丰富，你遇到的问题 101%（多 1% 不怕你不信）绝对也有人遇到过。所以只要你善用搜索，一定可以靠自己找到问题的答案。

例如知乎上存在着大量重复的问题，而且这些问题每天都不停地在出现。很多人都选择无视搜索这一强大的功能，遇到问题连思考都不思考张嘴就问，殊不知他遇到的问题别人可能几年之前就遇到过，而且已经得到了很好的解答。

你看或不看，答案就在那里。

绝大多数人一提到搜索引擎就只知道百度，你在百度上搜个“前端开发”很有可能就此被带到培训机构的沟里去，学习效果无法保证，被坑钱是肯定的。编程类其实有相当多的优质资源都可以免费获取到，打个比方我每天免费分享给大家的学习教程，翻译的国外文章，完全也可以拿着它们去当每月10k学费的培训班教材。

至于具体怎么用，正好锻炼一下，用你的百度去搜吧。

当然也有可能你虽然烦百度的广告，可是又离不开它，我再附送一个百度去广告大礼包，下面这个回答里有百度去广告版本的 Chrome，也有可以直接安装的插件链接：

百度搜索有那么多缺点，大家为什么还要用呢？ - 余博伦的回答 - 知乎

如何输入搜索关键词？学习知乎体其实有非常大的帮助，例如

• 如何学习前端开发?
• 学习前端开发是一种什么样的体验？
• 前端开发工程师月薪十万难么？（此为恶搞）

搜索诸如此类的问题，你可以找到大量优质的答案。此时此刻我又忍不住要分享一点点干货，除了搜索引擎之外，你还可以在别的优质站点搜索：

• 知乎
• GitHub （不用担心网站是英文的，你完全可以直接搜索中文）
• Segmentfault （中文版 Stack OverFlow）
• 优设

学会提问

学习一门技术的过程中，我们免不了有拜师学艺的想法。知乎优秀回答者啊，前端大神啊，或者是一个学校的师兄师姐，搞开发的同学等等。

作为一名小萌新你就像个好奇宝宝，你满脑子都是各种各样的问题，遇到见过的没见过的都想随口问一句。殊不知可爱的好奇宝宝和烦人的熊孩子之间没有什么不可逾越的鸿沟。

如何提问？如何能够让人愿意解答你的问题？如何不烦人？

这就需要你运用到各种提问的技巧。首先请教问题，心一定要诚，知乎上有一种关闭问题的原因叫做“代为完成的个人任务”。你不能把自己遇到的所有问题都当成是别人的问题提出来，人首先要靠自己，在自己靠不住的情况下再寻求别人的帮助。

在你真正需要提出一个可以提的问题时，也需要真诚。你不能不假思索地随便写一个疑问句。

举个实际的例子，你在项目中遇到了一个实现轮播图组件的需求，你不知道JS该怎么写。你不能像一个乞丐一样提问说：

轮播图组件该如何实现？（求求各位大大行行好帮我写个轮播图的吧）

然后问题描述是空的，就好像拿着一个空碗一样等人施舍。

你应该抱着探讨的态度虚心求教，并且善用一些语言的技巧，最后附上自己对这个问题的初步思考，例如：

轮播图组件的实现有哪些方式？

问题描述：下面是我初步实现的一些代码，可能还有一些bug，我也试着在网上找过相关的组件了，可是搞不清哪种才是最优的方案，还望各位大大能够指点一二。

这样一看你的档次就高了起来，你不是求别人告诉你，而是和别人平等地探讨问题。这样回答你的人也可以拥有一个更平和的心态，让他觉得他的回答不是施舍赐予，而是平等的学术讨论。你也就能获得更具价值的答案。

其实关于如何提问，有一篇2001年的文章已经回答得非常好了。在这里分享给大家，与诸君共勉：

• 提问的智慧

学习方式

很多新手学编程都喜欢看视频，每次看完都似乎仿佛好像可能理解里面讲的是什么了。回头你让他写代码，他一行都写不下去。

学习习惯比较好的可能会选择看书或者读文档。在这里我有必要声明一下，即使纸质文本和视频讲解的是完全相同的内容，学习文字也要比视频的效果好很多。

看书是主动学习，看视频是被动学习。主动翻页和视频进度条自己走（只有人拖条看A片，没有人拖条看教程）是完全不同的两种效果。你可以自主把握获取知识的速度和节奏。

当然我也不是说完全摒弃看视频的学习方式，从视频中你也可以获取到文档书本中获取不到的信息。例如别人是如何写代码以及遇到问题时是如何思考的，另外可能就是治你不愿意主动学习的懒病。

现在还有相当一部分人喜欢通过订阅知识分享平台来学习，例如知乎/掘金/开发者头条/简书等等。不可否认的是你确实可以从中获取相当丰富的知识，可惜大多数人从来都是看题目点收藏，根本不读内容，更别说在读完之后点个赞了。而且事实上你在这些知识分享平台获得的也是碎片化的信息，本质上和你刷微博朋友圈没有任何区别，只是逼格高一点点罢了。

就像你正在读我写的这篇文章一样，你确实能学到点东西，可只适用于茶余饭后的消遣。它不足以支撑你系统掌握一门技术。

所以想要真正扎实掌握前端知识体系，必须去读书，看文档，辅以看视频、刷知乎等等。千万不能本末倒置。

动手实践

其实动手实践也应该包含在学习方法里，它的意义是如此重要，所以我把动手实践专门划分在一个段落里。上述的主要是理论知识的学习，而我们要认清编程本质上是一门技术，一门手艺（我当然承认编程其实是一门艺术）。一定要能够动手做出实际的东西，写下一行行代码才算你真正掌握。

否则你只能拿着书里学到的那些名词术语装装逼而已。在交流群里胡侃半天，结果别人问你造过什么轮子，开发过什么项目你就傻眼了。现在前端岗位招聘动不动要求两年三年经验，你要上哪里找去？

• freeCodeCamp 中文网
• 百度前端技术学院开发任务
• 一个全栈增长工程师的练手项目集

一定要有自己的个人项目，一定要写自己的技术笔记，有条件也可以为开源项目做贡献。

只看书没有任何用，光看视频也然并卵。

一定要不停地实践实践实践！

一个只实践不看书的有可能会成为一位大神（在实践中就能学会很多），但一个只看书不实践的只能成为一个喷子。

一定要记住：

学而不练则忘。

认清就业现状

前几年可能还好，现在所有人都知道前端工资高。互联网泡沫没破的时候，应届毕业生第一次定岗就有能拿 20k 的，这都是真实发生过的事情。可就像你买彩票几乎不中奖一样，你从来不能把未来寄托在幸运之上，你需要有与之相匹配的实力。否则你即使遇到瞎了眼的面试官能拿到 Offter，在正式的工作中你也没能力保住岗位。

现在所有人都意识到了互联网行业赚钱，有点技术梦想的，不甘现实蹉跎的都想要通过学前端找到高薪工作。学法的学医的学会计的送快递的挖矿的，感觉 360 行有 361 行（多一行不怕你不信）都想转前端。

前端的工作机会确实多，需求量也确实大。可也得分清场合地域。

应聘难度从易到难为：

非互联网公司但有 Web 开发需求的<互联网小型创业公司<知名网站、应用<BAT

待遇薪资当然也是一样的序列。所以你需要认清自己的目标，找准自己的位置。最底层的页面仔工资真的还不如一个送外卖的，但与此同时，当然也有能让你实现财务自由的岗位。

坚持不懈&当断则断

学习可以很愉快但从来都不是一件轻松的事情。程序员的进阶之路尤其如此，就像你知道山口山升级的那一声是如此清脆响亮余音绕梁，但那需要你刷多少本，杀多少怪才能听到那么一声一样。

你学习的计划和安排可以很明确，但这并不代表它很简单就能实现。你会遇到无数的挫折，你需要解决无数的 Bug，你更需要无数的练习，才能达到你期望的目标。

你可以找一份码农的工作锻炼自己，但这仅仅是锻炼，你不可能当一辈子码农。

如果你真的喜欢编程，喜欢前端，那么在你写下每一行代码的时候一定能体验到那种快感。而如果每一篇教程都让你难以理解，每一行代码都让你痛苦不堪，千万不要强迫自己。

因为你可能并不适合编程。改变命运的方式不止这一种，高薪的岗位也不止这一家。条条大路通罗马，人要对自己好一点，如果发现自己真的不适合，那就早一点放弃，节省下的时间还可以用来实现你生命中的其他奇迹。

但假如你真的热爱编程，喜欢前端，无论前路多么坎坷，请你一定坚持下去！

Q&A

Q: 看完了前端的编程书籍，看的时候感觉理解了，可是写代码的时候还是没有任何长进怎么办？

其实一些比较经典的推荐书籍安排都很好，每个讲解的知识点都有相应的代码实现。请你不要只是看过去，看书的时候打开你的电脑，把每一个示例都敲一遍。读完一个章节之后也试着用代码写写每一章的知识点，相信你会有一个不一样的体验的。

Q: 学习前端需要了解算法和数据结构么？

算法和数据结构一般都是面试的时候装逼用的，也可以在程序员之间相互吹逼时使用。但无论如何作为一名合格的前端在面试的时候拿 JS 写个快速排序还是应该做到的。在实际工作中一般运用不到什么算法和数据结构的高级知识，等到你真正有机会用到的时候，你自然也成长到那一步了。

Q: 为什么要熟悉原生 JS，我 jQuery 用得很溜不可以么?

不是所有技术栈都包含jQuery，jQuery虽然适用于很多场景，但并不是万能的。你不能把自己的技术实现全部都建立在一个别人开发出来的库上，那样你只是会用一个工具，而不是懂一门编程语言。

太过于依赖 jQuery 别人只敢让你去写业务实现，而技术选型一类更高层次的活你根本都没资格接触。

Q: 非计算机专业想要学习前端开发从哪里开始？报培训班靠谱么？

现在国内哪所大学有专门教前端的专业？前端从业者大部分都不是科班出身好么，计算机专业的都去搞数据分析和机器学习了，怎么稀得做前端开发这么 LOW 的工作（此处为自嘲）。所以有千千万万的前端开发从业者和前端入门学习者和你是一样的，不要以为自己是什么特殊群体，保持一颗平常心。

培训班也相当于是一种被动学习，并不是说报培训班没有一点作用，只是大多数情况下你报班只会得不偿失。自制力好的人不需要报班通过自学也能小有所成，而懒惰的人即使培训班毕业了也找不到工作。

培训即使有效果，高昂的学费也是把你钱的坑了。我免费分享给你这么多教程，你连个赞都不点，我从来和你要过钱么？

Q: 我正在学习前端开发，想要早一点找到相关工作怎么办？

那么你就先去找工作，看工作的职位描述对你的技术有什么需求，根据你目标岗位的技术需求来学习。我们拿拉勾网的前端开发技术要求来举一个具体的例子：

• 熟练掌握 HTML5、CSS3、JavaScript 开发
• 这一条表示你要有扎实的 HTML5/CSS3/JavaScript 基础
• 熟悉 W3C 标准与 ES 规范，熟悉 Web 语义化
• 你需要了解一些 Web 相关标准
• 熟练掌握盒模型、常用布局以及浏览器和移动设备兼容性
• 能够熟练使用 CSS 构建页面，能够处理好各类屏幕大小设备的兼容性
• 熟练使用至少一种 JS 框架，掌握其原理，能独立开发常用组件
• 熟悉 Angular/React 一类的框架，并且用这类框架开发过成型的项目
• 熟练使用各种调试、抓包工具，能独立分析、解决和归纳问题
• 熟练掌握 Chrome 调试工具一类应用软件的使用
• 具有至少一门服务器端编程的实战经验
• 你得会 Python/PHP/Node.js 一类的服务器端语言，并且能够独立搭建起 Web 应用的运行环境
• 具有性能优化经验
• 了解客户端/服务器端缓存，CSS/JS 代码优化一类的性能方面知识
• 熟悉各种常用设计模式和常用 MV*框架
• 了解掌握设计模式和 Angular/React 等框架

然后再根据每一条要求去学习相关的知识，准备相应的实践项目。准备好就去面试吧，如果面不到就再回来继续好好学，千万不要急功近利。

为什么写这篇文章呢

我是95年的，非CS专业，很早之前就接触到了编程这一块（当14年IOS开发特别火），但是那个时候并没有太多意向或兴趣去学深入了解，只是觉得看着挺有意思看过几眼就没后续了，现在想想挺遗憾的。如果当时身边有个人可以指点一下，说不定现在也是个六七年的“老程序员”了。

不过现在也不算太迟，现在正在学习前端转行中，完完全全的零基础，所以踩过的坑有很多。相信有不少跟我类似经历的伙伴在这个过程中应该会有不少困惑，比如：网上教程这么多，到底该学哪个？看不懂怎么办？学到什么程度才能找到第一份工作呢？那么我们今天的主题就是给大家分享一下我总结的学习路线。

前端入门概述

首先说明一下，前端学习是一个螺旋上升的过程，既要反复地看书，也要抓紧时间进行实战。只看书，看了就会忘，所以必须将看书和写代码相结合。

然后大家最关心的入门前端开发到找工作3～6个月左右就可以了，主要需要学习 HTML、CSS 和 JavaScript 三大件。之后学习前端主流框架的使用，并基于已学内容开发一个小项目进行实战。以上内容学习并理解透彻以后，就算真正地入门前端了。

当然如果是全职学习，那么时间可以缩短为3-4个月，反之零零散散的学习可能6-8个月，甚至一年之后，具体的学习时间大家自己去规划，重要的是合理计划时间及坚持不懈执行（这点很重要，很多人就是死在了这里）。

下面是具体的学习教程

我这篇教程是从有想法转前端开始就从各种渠道汇总总结的，期间不知道入了多少坑，比如百度随便搜索下前端教程、前端怎么学，然后立马一大推营销号推荐免费领取基础课程，其实多看几家你就知道本质上都是给你卖课的；另外有很多大佬推荐的教程要么是时间比较久了（意味着教程老了），要么就是比较零散，不系统（作为正在学习的我来说，能稳定找到第一份工作就是好教程），所以一下内容都是我整理了好久才总结的，综合了微信公众号作者“技术漫谈”丁哥、“若川视野”川哥、运营转前端成功的年年、网上各种资源等总结而成的，希望可以帮助到大家（几位大佬和公司前端同事一致认为，以下内容好好学，全部学完，找到一份工作不难。前提是你坚持下去）。

阶段一：HTML + CSS

一、学习资料

首先是前端三大件 HTML、CSS 部分的学习，入门阶段不需要学的多深入，只需要抓住几块核心内容，快速过一遍就行，例如选择器、层叠、继承、盒模型、Flex 页面布局和网格等。太细节的内容不用记，之后需要了再回来查。

1、《Head First HTML and CSS》：这本书比较简单，适合新手入门

2、MDN：学习 HTML 学习路径部分，整体浏览一遍，不需要死记硬背

3、W3school：学习 HTML 部分，整体浏览一遍，不需要死记硬背

4、《HTML5 与 CSS3 基础教程》（第8版）：这本书里面有非常多 HTML 标签，整体浏览一遍，不需要死记硬背，知道有哪些标签以及各自的作用是什么，整体有一个印象即可。

5、《精通CSS（第3版）》 或 《深入解析CSS》：第一本书是目前最适合 CSS 入门的书，大家可以优先考虑看这个；第二本书是2020年的新书，内容和第一本差不多，奇虎团工程师翻译质量也有保证，讲得也非常详细，不想看第一本看这本也行。

二、代码实战

学习完了 HTML、CSS，下面就进入到代码实际练习和巩固阶段了，freeCodeCamp可以很好的帮我们实现，在freeCodeCamp的“响应式网页设计”部分，可以把前面学到的知识整体练习一遍，最后还有五个小项目练习来确认基础掌握情况。

在做项目练习的时候如果发现静态页面写不出来很正常，可以先去看别人写的代码，看完后就知道怎么写了。

全部写完之后可以根据百度前端代码规范，重写这五个项目的代码。重写之后，再跟原网页代码对比对比，看看还有哪方面的不足。

阶段二：JavaScript

一、学习资料

学习完HTML、CSS之后我们就可以进入JavaScript的学习了，JS非常重要，也有一定的学习难度，同学们在这里花费的时间可能会有点多，JS主要包括语言基础（ECMAScript）、DOM 和 BOM。这个时候我们肯定不清楚这到底是是什么东西，可以用作什么，没关系，先学就是咯。

1、现代 JavaScript 教程：JS 推荐从这个教程学起，这是我无意间发现的一个宝藏网站，这个网站是依托于 learn.javascript.ru 而来的（中文翻译的主要主要负责人是leviding，阿里前端工程师，很强），而 learn.javascript.ru 是俄罗斯最大的 JavaScript 教程和学习平台之一，质量有保障，而且是在线学习，教程都是实时更新且免费的，不像书籍可能存在看的技术过时的问题。现代 JavaScript 教程是 React 官方文档中与 MDN 并列推荐的 JavaScript 学习教程，学完整个教程，相当于已经学完了所有JavaScript内容。

2、《JavaScript 高级程序设计（第 4 版）》：这本是速成红宝书，很经典，推荐先看现代 JavaScript 教程再看这本红宝书，或者搭配着看。红宝书可以和现代 js 教程相互补充取长补短，同时还可以巩固知识点，加深对 JavaScript 的理解。书中有大量 API 的章节，不用死记硬背，浏览一下就行，用到再回来查。

（1）第 1~11 章讲的是语言特性，必须掌握；

（2）第 12、14-17 和 23-26 章是重点内容重点看；

（3）第 13、19 和 21 章是次重点内容，尽量看一下；

（4）第 28 章是最佳实践，看完前面内容后来学习如何写出更好的代码；

（5）第 18 章 Canvas、第 20 章 API、第 22 章 XML 和第 27 章工作者线程，可以在学有余力或者用到的时候看一下，不是初期重点内容。

3、《JavaScript DOM 编程艺术》：DOM 学习书籍，主要讲 DOM 知识，以及通过实战深入理解相关知识，其实这本书的内容现代JS和红宝书都讲过了，有时间的同学可以考虑看一下。

二、代码实战

又到了我们的代码实战环节，学以致用理论和实践相结合才是王道，这个时候fCC依然是我们的首选。

1、freeCodeCamp：练习“JavaScript 算法和数据结构”部分，做完后同样有5个练习项目实战，希望大家可以完成。

2、百度前端技术学院 2021：这是百度前几年推出的免费前端入门教程，里面有非常详细的HTML、CSS和JavaScript教程，不过现在正在内容更新，暂时还打不开，练习到这一步的同学发现还不能打开的话可以去Github上找（GitHub上有20年前的内容）

阶段三：入门前端框架

前端的主流框架目前主要为 React，Vue 和 Angular。一般是在 React 和 Vue 中选一个。

React 的开发体验更偏向于通过写原生 JS 的那种方式写页面，使得逻辑和页面分离开来，要求你有较好的 JavaScript 基础。

Vue 则引入了模版，相对来讲偏向通过模板的方式也就是调用 API 来写页面（当然现在 Vue 3.0 也正在跟进 Vue 的 JSX 写法，类似于 React），将很多实现封装成了 API，需要记住并调用 API 来进行开发，因为很多都是封装好的，所以学习起来较为简单，相对的编程的感觉会弱一些。

推荐先学React，对找第一份工作比较友好，下面是详细的教程

一、React 学习 + 实战（推荐先学）

在这个过程中你会学到很多知识，会用到 React 的高阶知识，把 React 官方文档中的高级指引，API Reference，Hooks 等部分的内容学完。

还会学到 React Router，Redux 等内容。会学到从零开发一个完整项目，从项目配置到组件拆分，到项目打包和上线的完整流程，还会学到 React 框架的一些底层源码级知识。

1、入门：入门推荐学习哔哩哔哩“尚硅谷2021版React技术全家桶全套”视频，播放量很高，老师讲解的不错，可以用来入门学习。

2、React 官方文档：先学习文档中核心概念部分，然后跟着官方文档写出文档中的井字棋，最后再自己写一个 Todo App。

3、慕课网：下面到了实战环节，可以考虑慕课网的付费课程“React 17 系统精讲 结合TS打造旅游电商平台”，价格不高，既可以当做代码练习，又可以作为简历上的项目点。

二、Vue 学习 + 实战

1、Vue 官方文档

2、慕课网：

（1） Vue 2.5 入门

（2） Vue 2.5 -> 2.6 -> 3.0 开发去哪儿网 App 从零基础入门到实战项目开发

阶段四：项目实战

恭喜你，能够学习到这步，离找工作就不远了，现在就是利用时间多做几个项目，放到个人简历上，可以做个自己的个人博客，租个服务器上线，这样的优势是博客风格完全由你个人来打造，可以让面试官看到你的实战能力，且不同于常见的电商网页项目（主要这个大家都在做）。

1、独立完成个人博客的上线

2、自己选择做其他项目

阶段五：刷算法题 + 面试题

到这步就可以刷刷面试题找工作了，推荐以下刷题工具：

1、小程序：高级前端面试，特别推荐，题型比较新颖，题库里的题也适合面试梳理，选择题不算特别多。

2、小程序：前端面试星球，有些题型有点多，涉及的面挺广的，可以后面慢慢刷。

3、牛客网：题型偏老，有时间可以刷刷。

谢谢你阅读这篇文章，Happy coding!

我自学前端已经有 6 年多了，自问当时学前端是没有系统化学习的。一开始边看文档，连滚带爬学 HTML 和 CSS 排版，然后深入研究 JavaScript，因为当时最火的就是 JQuery，所以用了很长一段时间的 JQ。

到了后面遇到有一个项目需要我做 APP 开发，但是不可能去学 IOS 开发和安卓开发，因为项目时间也不可能给我们这么充裕的学习时间。所以当时的我深入分析了几个混合 APP 开发的框架。分析对象包括当时基于 AngularJs 的 Ionic 框架和 React Native。综合考虑最后选择了 Ionic，然后自学了 Angular2。（过程也是踩过成千上万的坑学会的）

APP 开发的这个过程让我深入感觉到那时候前端的革命性变化。庞大的前端知识扑面而来，也没有想到前端已经发展到这样一个地步。这段时间让我深刻领会到前端的博大精深，并且被前端这个技术领域深深的吸引住了。

到了后面 Vue 突然开始火了，各大技术公司都开始使用 Vue+Cli 脚手架搭建前端应用。越来越多的企业要求使用 Vue 开发前端应用和 WebAPP。热爱前端的我从来不畏惧需要学更多的知识，既然 Vue 来势汹汹，我也开始深入研究和学习 Vue 开发前端。经过一番折腾 Vue 也上手了。

至今我依然在不停的学习前端无边无际的知识和技术。

最近我发现，现在学习技术容易了很多。有各种技术文章、手摸手教学、线上培训课程和视频，甚至还有全免费的线上学习课程和练习。相比以前从看文档，连滚带爬的在项目中试错式的学习真的是容易多了。

「前言」

我们都深刻知道，如果想在前端走的更远更久，基础知识必须是要牢固的。最近发现一个免费学习编程的网站 freeCodeCamp(🔥) - 官方版（英文） ｜ 中文社区版 。我好学的性格牵动着我的灵魂，忍不住就去研究了一下。我发现里面的课程确实很全面，而且还有实时和实战编程练习。就算是对于零基础的童鞋，也是可以开始学习编程的。

在一个夜深人静的夜晚，我看着电脑思考人生的时候，我灵机一动，要不我开始写一个系列的文章和大家一起闯关进攻前端全方位知识点。没有闯过这些关卡的童鞋，无论前端能力如何，这个可以锻炼我们自己，也可以深入知道我们自己的前端水平和差距。想学习前端的童鞋可以从零开始学习，一起排除困难共同打开前端大门！

使用这个免费网站学习编程，每一个知识学习完成后会给大家发放一个证书，然后每一个关键学习点之后，还有项目实战。自从 2014 年，有超过 4 万个freeCodeCamp毕业的童鞋获得了大企业工作机会。（里面有提到谷歌，苹果，微软，亚马逊，Spotify 等公司）

还有看到一些学员的评价：

• “我在实习的时候，导师就叮嘱我在 freeCodeCamp 上做题闯关。技术的精进不仅给了我强大的自信，也让我得以进入大厂 ThoughtWorks。” --- 姜玉珍
• “对于还没有形成编程思维的新人，即使是 leetcode 上面 easy 级别的算法题目都感到非常有难度，而 freeCodeCamp 的算法题恰好是一个良好的过渡。” --- 魏朝欣

无论这些证书是否对我们在中国的企业有一定的价值。但是能获得多一个证书，没有什么不好的呀。废话不多说了，我们这里就开始勇闯第一课《基础 HTML 与 HTML5 入门》！

「规则」如何一起闯关

在开始这个闯关的系列之前，讲一下我们具体怎么一起闯关。

首先，如果我是单纯在这里给大家发布答案，我觉得这些文章就没有太大意义了。所以我希望在闯关的过程中一起学习到更多的知识，弄懂更深层的技术和用我的相关经验讲说这些知识在工作中的使用场景和小技巧。

---

个人觉得英文版本的操作和体验都更好，加上英文版本的课题会更新。所以我会在英文版中与大家一起闯关。但是喜欢用中文社区版本也是可以的哦。酸甜苦辣各有所爱，但是效果和课题基本都是一样的哈。

每一篇文章的大概内容：

1. 首先我们每一篇文章会尽量包含一个大知识点中的 N 个关卡。每一个知识点的关卡数量不一，所以有时候可能会拆分成几篇文章来讲说。
2. 每一个关卡当中的知识点在 freeCodeCamp 中有一定的知识材料。但是在一起闯关的文章当中也会做一些详细的知识补充和一些有趣的理解方式。
3. 每一个较难的关卡，都会在文章当中做详细的思路，多种实现方式等等的讲说，让我们在每一个关卡中能带走更多深层的知识点。

freeCodeCamp 使用教程

课程内容

FCC 一共有 6 大课程，一共大约 1800 个小时的内容和练习。如果是新人，推荐从第一个开始一个一个闯关学习。如果是老司机，是来这里学习你需要的知识，那可以随意选择你需要的课程开始学习。

• 响应式 Web 设计（300 个小时）
• 算法和数据结构（300 个小时）
• 前端库和框架（300 个小时）
• 数据可视化（300 个小时）
• API 和微服务（300 个小时）
• 信息安全和质量保证（300 个小时）

最后还有一个是数千个小时的面试题可以提供给我们使劲的刷哦！

进入关卡

首先我们展开第一课看一下：

1. 第 1 点这里是基础知识的文章，可以点击查看。看完基础知识之后可以点击下方的回到第一小节开始闯关！
2. 第 2 点这里下面所有的都是练习题，一个一个顺着闯关即可。

关卡教程

⚠️ 注意：
大家闯关之前，推荐大家都先使用 GitHub 登陆，到时候颁发的证书和闯关进度才能得到保存和跟踪哦！！！

我们先从左边 👈 部分的内容开始说明：

1. 简单讲说了这个关卡涉及的知识点
2. 描述关卡的挑战内容
3. 本关卡的所有目标，点击测试代码的时候，完成的会出现 ✅，没有全部 ✅ 那就是还有部分我们没有实现哦。所有 ✅ 才能通关。

接下来就是说明中间的代码区：

1. 代码区，用于编写我们这个关卡的代码。
2. 错误输出区域，当我们点击测试代码后，如果有错误就会显示在这里。

最后，最右边的部分是代码被编译后的效果，也就是我们在代码去编写的代码最终会在浏览器呈现出来的效果哦。（这里的效果会在我们编写代码的同时触发变化哦！）

提交代码/测试成功后：

「知识」闯关基础知识点

HTML 是什么？
HTML 的全称是 HyperText Markup Language（超文本标签语言），它是一种用来描述网页结构的标签语言。
它采用一种特殊的语法或符号来组织网页的内容，元素通常都有开始标签和结束标签，例如标题、段落、列表。

更好的理解 HTML

对于没有计算机基础的童鞋（就算是有）都会觉得有点抽象，不太好理解。我们换一个说法来理解一下：

HTML 就等同于我们人体里面的骨架，一块一块骨头（标签）组装起来建立起一个人的骨架和结构。比如说经常可以见到的head，body，footer等标签，就等同于一个人的头，身体和脚。那其他的标签比如h1，h2，div，section和ul，li等标签就是用来组建我们人体每一个部位的小骨头。

如果 HTML 加上了 JavaScript（人体中的大脑和肌肉）就可以操控整个人的动作，让一个人活起来了。但是只有骨头和肌肉，这个也太难看了吧？想想都觉得吓人。所以我们会有皮肤来把这些不太好看的东西藏起来，这个时候就需要在 HTML 中使用 CSS（人体的皮肤）。这样子我们有好的皮肤加上衣服和化妆品的打扮，这样才可以貌美如花嘛对吧？

如果我们上面说的骨头和骨架，在代码中又是什么样子的呢？我们一起来看看：

<h1>Top level heading: Maybe a page title</h1>

<p>
  A paragraph of text. Some information we would like to communicate to the viewer. This can be as
  long or short as we would like.
</p>

<ol>
  <li>Number one on the list</li>
  <li>Number two</li>
  <li>A third item</li>
</ol>

这段代码被编译后就会在浏览器呈现出这个样子：

HTML5 又是什么？

HTML 这种超文本源自于 Web 早期和最初的用例。当时页面都是静态文档，并且文档中也有连接和引用到其他的文档。通过浏览器中的 hypertext links（超文本链接）在文档之中跳转与导航。这样用户就可以自由的在文档之中翱翔，不用在文档直接搜索查看。

后期 web 页面和 web 应用渐渐变得越来越复杂，W3C 更新了 HTML 的规范来让所有的浏览器更加兼容彼此。为什么呢？大家应该都知道市面上有五花八门的各种浏览器，如果每一个浏览器都对 HTML 有不同的写法，不同的规范，那我们做前端开发的，有多少的浏览器规范我们就需要学会多少种写法。不用后浪推上来，已经累死在沙滩上了。

那 HTML5 其实就是第五版的 HTML 规范，也是目前最新的版本。

基础知识弄懂了，我们马上就来开始闯关吧！GO GO GO！

「第一关」用 HTML 元素与世界问好

关卡名：Say Hello to HTML Elements

身在技术领域的童鞋们都知道，入门任何语言的开头都是先与世界问个好（所谓的输出一个"Hello World"）。所以第一关当然是用 HTML 元素与世界问好啦！😂

知识点

• 这一关我们看到代码区域有<h1>hello</h1>这一段代码，这个就是所谓的 HTML 元素了！也就是人体中的一小块骨头 🦴！。
• HTML 中每一个标签都需要开始与结束标签：<h1> 为开始，</h1> 为结束。
• 开始与结束标签的区别，就是结束标签多了/（斜杠）。

过关目标

• 修改开始标签<h1>与关闭标签</h1>之间的内容。
• 把内容从Hello改为Hello World。

学会了什么？

这关卡主要教会我们：

1. HTML 中的开始与结束标签的格式与规范
2. 标签的内容是什么
3. 如何修改标签内容

答案

「第二关」使用 H2 元素加入副标题

关卡名：Headline with the h2 Element

接下来的几个关卡中，我们会慢慢的一步一步的搭建一个 HTML5 的 “猫星人图片的网页应用”。

知识点

• h2元素是常用的副标题，其实就是比h1字体要小的标题，用过WPS或者word文档的童鞋应该秒懂了。
• 这些标题标签会告诉浏览器去显示一些默认的标题样式
• h1一般用于网页大标题，而h2就是用于副标题。
• 其实在 HTML 当中还有很多自带的标题元素，例如h3，h4，h5和h6，每一个代码一个等级的副标题，这里数字越大，标题的大小就越小哦。

过关目标

• 在h1标签后面（第二行）加入一个h2标签。
• 并且在h2元素中加入CatPhotoApp的文字内容。

过关条件

• 创建一个h2元素
• h2元素必须有一个结束标签
• h2元素必须含有"CatPhotoApp"的文字内容
• h1元素必须含有"Hello World"的文字内容

学会了什么？

这关卡主要教会我们：

1. 什么是副标题
2. HTML 有哪些副标题
3. 如何加入副标题

答案

「第三关」段落元素加入信息内容

关卡名：Inform with the Paragraph Element

知识点

• p是paragragh（段落）的缩写，就是我们在写文章中的段落一样，一般都是用来放信息内容的。
• 我们可以用<p>我是一个p标签</p>，这样的方式来加入段落元素。

过关目标

• 在我们的h2元素下方加入p元素。
• 在p元素的内容中加入文字"Hello Paragraph"。
• 注意：HTML 的规范中说明，所有标签的英文字母都必须使用小写！

过关条件

• 代码中必须有一个规范的p元素。
• p元素中必须含有文字"Hello Paragraph"。
• p元素必须有一个结束标签。

学会了什么？

这关卡主要教会我们：

1. p元素是什么
2. 如何加入信息内容段落

答案

「第四关」加入“占位”文字

关卡名：Fill in the Blank with Placeholder Text

知识点

• 开发者们用一个传统，就是在没有内容的时候，排版时都会用统一的占位文字“lorem ipsum text”。很多人很好奇，为什么都用这个？

Lorem ipsum 从 15 世纪开始就被广泛地使用在西方的印刷、设计领域中，在电脑排版盛行之后，这段被传统印刷产业使用几百年的无意义文字又再度流行。由于这段文字以“Lorem ipsum”起头，并且常被用于标题的测试中，所以一般称为 Lorem ipsum，简称为 Lipsum。

---

原先大家以为这段拉丁文只是没有意义的组合，目的是让阅读者不要被文章内容所影响，而只专注于观察字型或版型，并借此填满空间。但根据美国拉丁学者 Richard McClintock 的研究，Lorem ipsum 原来起源于西赛罗《善恶之尽》（De finibus bonorum et malorum）第一章（Liber Primus）的 32、33 两节。

• 这段占位文字用了 5 个世纪也是够长情的了，既然我们这些关卡是在搭建一个“猫星人”的应用，那么我们改为“kitty ipsum text”。😁

过关目标

• 把p元素的内容替换成这一段占位文字：“Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.”

过关条件

• p元素需要含有“kitty ipsum text”的首几个单词。

学会了什么？

这关卡主要教会我们：

1. 什么是“lorem ipsum text”
2. 为什么“lorem ipsum text”经常用于设计和排版的占位文案

答案

「第五关」清除 HTML 代码注释

关卡名：Uncomment HTML

知识点

• 代码注释是为了在代码中留下备注的一种常用写法。通常为了给自己和其他开发者留下有意义的备注，让大家可以更容易的懂得代码的作用或者含义。代码注释是不会影响代码的运行，或者是显示出来给到用户看到的。
• 代码注释还有一个非常使用的目的，就是屏蔽代码。被注释的代码就不会被编译器运行，这样被注释的代码就不会生效了。
• 不同语言有不同的注释写法，HTML 的注释写法开始是<!--，结束使用-->。例如：<!-- <p> abc </p> -->。

过关目标

• 此关卡的代码都被注释掉了，所以所有的代码都没有生效。（预览区可以看到是空白的）
• 我们需要清除掉这里的注释，让h1，h2和p元素生效。

过关条件

• 页面预览区需要可以看到h1元素内容
• 页面预览区需要可以看到h2元素内容
• 页面预览区需要可以看到p元素内容
• 页面中没有遗漏结束注释标签-->

学会了什么？

这关卡主要教会我们：

1. 什么是代码注释
2. 代码注释有什么作用
3. 如何清除代码注释

答案

「第六关」局部 HTML 代码注释

关卡名：Comment out HTML

知识点

• 上一关我们看到可以把整个代码注释掉，但是其实很多时候我们可能需要注释掉局部的代码，或者是多段代码。
• 使用方式也是一样的，在想开始注释的地方加入<!---，然后结束的地方加入-->。

⚠️ 注意：
在注释代码的时候要注意的一个点，HTML 的元素都是有开始与结束标签的，注释的过程中如果我们注释掉半个元素，那代码就会有结束没有开头了。这样是会报错的哦。同等概念，后面我们会学到，HTML 元素是可以加入属性的，属性也是无法单独注释的。

过关目标

• 注释掉整个h1元素和p元素，h2元素要生效。（也可以说页面上只能看到h2这个元素的效果）

过关条件

• h1元素应该被注释掉，页面看不到该元素效果
• p元素应该被注释掉，页面看不到该元素效果
• 页面预览区需要可以看到h2元素内容
• 每一段注释都应该有结束注释标签-->
• h1，h2和p元素在代码中的顺序不能变

学会了什么？

这关卡主要教会我们：

1. 如何局部注释代码

答案

「第七关」删除 HTML 元素

关卡名：Delete HTML Elements

知识点

• 场景：因为手机的屏幕高度可呈现的空间不多，所以我们要把h1元素删除掉。

⚠️ 注意：
删除代码和注释代码都有一个一样的原则。就是开始与结束的标签不能缺了其中之一，要不代码就会报错。所以删除元素的时候也要注意元素的开始与结束标签的完整性。

过关目标

• 删除掉代码中的h1元素，让我们的页面更加整洁和更有空间感。

过关条件

• h1元素应该被完整的被删除
• 页面预览区需要可以看到h2元素内容
• 页面预览区需要可以看到p元素内容

学会了什么？

这关卡主要教会我们：

1. 如何正确的删除元素

答案

「第八关」HTML5 元素

关卡名：Introduction to HTML5 Elements

知识点

• HTML5 给我们带来了更多具备丰富代表性的 HTML 标签。这些标签包括main（主要内容）、header（头部）、footer（脚步）、nav（导航）、video（视频）、article（文章）、section（区域/分段内容）和更多。
• 这些标签给 HTML 的结构带来了更多可描述性的意义。就好像人体也有很多代表性的结构与区域名称，比如说：肱骨、股骨、腕骨、肩胛和不规则骨等等。
• 人体的骨头要分类，也是为了让医生更好的在大量的骨头中找到或者描述到具体的那种骨头。那 HTML5 中的这些丰富的标签也是一样的。他们可以更好的帮助搜索引擎找到对应的内容，加入这些标签也让我们的网页做到更好的搜索引擎优化（SEO）。

什么是搜素引擎？
我们可以把搜索引擎看作是一本很大很大的书中的目录。我们想想在现代的互联网中，全世界有多少个网站或者网页应用？如果没有一个目录让我们可以搜索，我们怎么可以找到我们想看的内容或者网站？可以说基本是不可能的！

---

搜索引擎怎么运作？
那搜索引擎的目录是怎么生成的呢？这个世界有一种很厉害的虫，那就是"爬虫"。每天搜索引擎的公司会派出成千上万的爬虫军队出去，在互联网上到处找网站，然后进入每一个网站中阅读里面的内容。然后收集回来的内容会经过做过滤和分析，然后建立关键词等等，最后生成一个搜索目录。我们经常用的搜索引擎包括：百度搜索，谷歌搜索，搜狗搜素，360 搜素等等。

用其中一个标签来举例，一个main元素中嵌套了两个子元素：

<main>
  <h1>Hello World</h1>
  <p>Hello Paragraph</p>
</main>

小贴士：这些 HTML5 的标签的作用和适用性会在后面的“Applied Accessibility（应用无障碍）”的课程中详细讲说。

过关目标

• 在原有的p元素下方添加一个新的p元素，并且加入这段内容Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
• 然后用一个main元素两个p元素包裹起来。

过关条件

• 应该有 2 个p元素，每个都有文字内容
• 每个p元素都有结束标签
• 第二个p元素的内容含有“Purr jump eat...”这段文字
• 代码中必须含有main元素
• main元素中必须含有两个p子元素
• main元素开始必须在第一个p元素之前
• main元素结束必须在第二个p元素之后

学会了什么？

这关卡主要教会我们：

1. 学到了更多丰富的 HTML5 标签
2. 学会使用main元素
3. 学会嵌套元素

答案

「第九关」网站中插入图片

关卡名：Add Images to Your Website

知识点

• 我们可以通过使用img元素为我们的网页插入图片，然后使用元素中的src属性来指定图片地址。

⚠️ 注意：img元素是不需要结束标签的，它是属于自动关闭型元素。

• W3C 规范中，所有img必须填写alt属性（alt 是“Alternative”的缩写，就是“替代”的意思）。当一个图片无法加载或者显示时，alt属性的值就会替代这个图片显示出来。
• 另外alt对于搜索引擎优化是有一定的帮助的，因为这个属性是用来描述一个图片的。如果这个图片是一只猫，对于搜索引擎的爬虫会针对图片的 Alt 取得关于这个图片的描述。这样搜索引擎才能知道这个图片大概是什么。

⚠️ 注意：

• 如果图片是单纯为了装饰的，那alt就留空：alt=""
• 尽量不要在alt属性中加入特殊字符（或者符号），除非是必须的

一个完整的img元素例子如下：

<img
  src="https://www.your-image-source.com/your-image.jpg"
  alt="Author standing on a beach with two thumbs up."
/>

过关目标

• 在main元素中的p元素之前添加img元素。
• img元素的src属性的值指向https://bit.ly/fcc-relaxing-cat
• 给予img元素的alt属性一个合适的名字：比如“Kitty” (小猫咪的意思)

过关条件

• 页面中必须有一个img元素。
• img元素中的src属性指向一个猫咪的图片地址。
• img元素中的alt属性值不能为空。

学会了什么？

这关卡主要教会我们：

1. 如何使用img图片元素
2. 懂得使用src属性
3. 懂得使用alt属性

答案

「第十关」使用锚元素实现链接跳转

关卡名：Link to External Pages with Anchor Elements

知识点

• 在 HTML 当中，a (锚) 元素是用于跳转页面，可以是内部页面或者是外部页面。（内部指的是本网站内的页面，外部指的是本网站以外的其他网站的页面。）
• a 元素需要一个网页地址的属性叫href。也需要一个 anchor text（锚文字）：

例如：
<a href="https://freecodecamp.org">这个链接会跳转到 freecodecamp.org</a>

• 网页地址：https://freecodecamp.org
• 锚文字（其实就是跳转链接的文案）：这个链接会跳转到 freecodecamp.org

• 使用以上例子，在浏览器中就会显示一段文字链接 “这个链接会跳转到 freecodecamp.org”，点击该链接就会跳转到https://www.freecodecamp.org这个网址。

额外知识点：
以上例子讲说的是跳转外部链接，如果我想跳转当前网址的子页面呢？(所谓的内部跳转，但是其实还可以做到当前页面的位置跳转，这个下一个关卡就会学到咯！)

• 比如现在我们当前的页面是"www.freecodecamp.org"，我们的链接想跳转到“www.freecodecamp.org/learn”。
• 这个时候我们的a元素的href属性可以这么写

<a href="/learn">这个链接会跳转到 freecodecamp.org/learn</a>

过关目标

• 创建一个a元素，链接文案为“cat photos”，并且指定跳转到http://freecatphotoapp.com

过关条件

• a元素的链接文案必须含有“cat photos”
• a元素的跳转地址必须是http://freecatphotoapp.com。
• a元素必须有结束标签。

学会了什么？

这关卡主要教会我们：

1. 如何在网页中添加链接
2. 懂得使用href属性
3. 懂得如何添加链接文案

答案

「第十一关」使用锚元素跳转内部页面区域

关卡名：Link to Internal Sections of a Page with Anchor Elements

知识点

• a（锚）元素还可以用于跳转页面内部的特定区域。
• 创建一个内部跳转链接，首先我们需要在href属性的值中绑定一个哈希符号#和一个唯一id属性。
• id属性是在 HTML 中任何一个元素都可以绑定的唯一标识。id属性可以给予一个元素一个唯一的识别名，让这个元素可以在 HTML 中被选择到。

以下是一个内部跳转链接的例子，其中的...代表被省略的一段代码。

<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

我们来分析一下这个例子：

• 这里的h2元素被绑定了一个id属性，名字为“contacts-header”。
• 我们的a元素链接的指定href跳转地址为#contacts-header。
• 我们可以看到#后面的名字与h2的id值一致，就是这样点击这个链接的时候，页面就会移动到绑定了同一个名字的元素的位置。
• 我们要注意的是id属性的值，在当前页面中必须是唯一的。

知识点：
在这个例子里面，我们可以看到a元素多了一个target属性。这个属性在链接中是非常常用的。我们经常用的各大电商平台，我们点击一个商品的链接都会打开一个新窗口，但是有一些链接就不会。这种就是用target属性控制的。

---

target属性的常用值有：

• _blank：在新窗口中打开被链接文档。
• _self：默认。在相同的框架中打开被链接文档。
• _parent：在父框架集中打开被链接文档。
• _top：在整个窗口中打开被链接文档。
• framename：在指定的框架中打开被链接文档。

过关目标

• 修改我们的外部跳转链接的href属性为#footer，并且把链接的文案“cat photos”改为"Jump to Bottom"。
• 移除target="_blank"属性，因为这个属性会让我们的链接在全新的窗口打开这个跳转链接。
• 最后在页面最底部的footer元素中添加id属性，属性值为"footer"。

过关条件

• 页面中必须含有一个锚元素
• 页面中只有一个 footer 标签
• a元素的href属性值必须是#footer
• a元素必须没有target属性
• a元素的链接文章应该是“Jump to Bottom”
• footer元素的id属性值必须是"footer"

学会了什么？

这关卡主要教会我们：

1. 如何在网页中添加内部链接
2. 懂得使用id属性
3. 懂得使用哈希符号链接跳转

答案

「第十二关」文章中嵌套锚元素

关卡名：Nest an Anchor Element within a Paragraph

知识点

• 我们可以在文字中添加链接：

<p>
  Here's a
  <a target="_blank" href="http://freecodecamp.org">link to freecodecamp.org</a>
  for you to follow.
</p>

分析一下这个例子的实现原理：

• 首先我们有一个文字段落<p>Here's a ... for you to follow.</p>
• 在这个文字段落中"..."的部分我们加入a (锚) 元素：<a href="http://freecodecamp.org"> ... </a>，这里我们用a元素包裹了"..."这个文字内容，这样这个文字内容就会变成一个链接，并且可点击跳转网页。（记住这里需要我们有开始<a>与结束</a>标签，这样才能指定这个链接的开始与结束区域）
• 这里a元素中加入target="_blank"可以让链接在新窗口打开，href属性指定了跳转链接。
• 最后"..."的内容在这个例子里面就是" link to freecodecamp.org"，也就是链接的文案（锚文字）。

过关目标

• 首先在main元素中加入一个新的p元素。
• p元素中的文案写入"View more cat photos"。
• 使用我们原来的a元素替换这段文案中的“cat photos”，从而把这段文案中的"cat photos"改为一个链接。

过关条件

• a元素的链接需要指定跳转"http://freecatphotoapp.com"
• a元素的链接文案应该是“cat photos”
• a元素需要被p元素包裹着，然后main元素中需要一共有 3 个p元素
• a元素需要被新的p元素包裹着，不能是其他的p元素
• p元素中必须含有“View more ” （more 后面需要含有一个空格）
• a元素中不能含有“View more”等文字
• 所有p元素必须有结束标签
• 所有a元素必须有结束标签

学会了什么？

这关卡主要教会我们：

1. 在文章段落中添加链接

答案

「第十三关」使用哈希符号创建死链接

关卡名：Make Dead Links Using the Hash Symbol

知识点

• 有时候我们需要添加一个死链接（顾名思义，就是一个点击后无效的链接，不会触发页面跳转）
• 这种链接有几个用途，第一种在排版的过程中还不知道需要链接哪里，第二种就是后面这个链接交给 JavaScript 处理。（后面的 JavaScript 关卡中会讲到哦）

代码例子：

<a href="#">死链接</a>

过关目标

• 当前的a元素中的href是指向一个链接地址"http://freecatphotoapp.com"
• 把href属性值改为#，就可以把这个锚元素变成一个死链接
• 这里还需要把target属性移除掉，要不还是会跳转页面的

过关条件

• a元素的href属性值是#，是一个死链接

学会了什么？

这关卡主要教会我们：

1. 用哈希符号创建死链接

答案

「第十四关」把图片变成链接

关卡名：Turn an Image into a Link

知识点

• 我们可以通过用a元素包裹一个元素，让这个元素变成一个链接
• 比较常用的一个例子就是使用a元素包裹一个img元素，这样就可以把一个图片变成一个链接。（也就是说，点击这个图片就可以跳转页面了）

代码例子：

<a href="#">
  <img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera." />
</a>

这个例子中，我们希望这个图片的链接是一个"死链接"，所以href属性的值需要使用#。

过关目标

• 用a元素包裹页面中的img元素
• 改变后，我们在最右边的预览区把鼠标放到图片上方，我们可以看到我们的鼠标从一个“普通鼠标志”变成一个“点击手指的标志”

过关条件

• img元素需要包裹在a元素之中
• 图片的链接必须是一个死链接
• 所有的a元素必须有结束标签

学会了什么？

这关卡主要教会我们：

1. 给图片添加链接

答案

「第十五关」创建无序列表

关卡名：Create a Bulleted Unordered List

知识点

• HTML 当中有特殊的元素用于创建无序列表。
• 无序列表需要使用ul元素包裹着多个li元素，开始标签为<ul>，结束标签为</ul>。

*代码例子：**

<ul>
  <li>牛奶</li>
  <li>芝士</li>
</ul>

这段代码就会创建一个无序列表，列表内容有“牛奶”与“芝士”。

过关目标

• 移除代码中最后两个p元素。
• 然后添加一个无序列表，列出 3 个喵咪喜爱的东西。

过关条件

• 创建一个ul元素
• ul元素应该包裹着 3 个li元素
• ul元素必须有结束标签
• 所有li元素必须有结束标签
• li元素中必须有内容，也不能是只有空格

学会了什么？

这关卡主要教会我们：

1. 使用ul元素
2. 使用li元素
3. 创建无序列表

答案

「第十六关」创建有序列表

关卡名：Create an Ordered List

知识点

• HTML 当中还有一种叫有序列表（就是前面会按照 1，2，3，4... 以此类推）
• 需要使用ol元素包裹着多个li元素，开始标签为<ol>，结束标签为</ol>

代码例子：

<ol>
  <li>肥猪</li>
  <li>肥牛</li>
</ol>

以上这段代码会创建一个有序列表，有序的列出“肥猪”和“肥牛”。

过关目标

• 在“Top 3 things cat hate:”的p元素下方加入一个有序列表
• 有序列表中列出 3 样喵咪讨厌的东西

过关条件

• 有一个有序列表列出 3 样喵咪讨厌的东西
• 有一个无序列表列出 3 样喵咪喜欢的东西
• 只有一个ul元素
• 只有一个ol元素
• ul元素中有 3 个li元素
• ol元素中有 3 个li元素
• 所有li元素必须有结束标签
• 所有li元素的内容不能为空或者只有空格

学会了什么？

这关卡主要教会我们：

1. 使用ol元素
2. 创建有序列表

答案

「第十七关」创建文本输入框

关卡名：Create a Text Field

知识点

接下来的几个关卡，我们一起来创建一个表单。

什么是表单？

表单就是一个网页端的表格，让用户在其中填写信息提交给我们保存起来。在办理事情的时候，我们经常会需要填写表格，然后提交给工作人员。在网络上填写表格也是一样的。用户在表单中填写表格，然后提交给我们保存起来，工作人员在后台管理系统就可以对这些表格进行处理了。

• 一个表单就必定会有文字填写的地方，在 HTML 中我们会使用input元素来创建一个文本输入框，给到用户填写文字。

代码例子：

<input type="text" />

知识点：

• input元素是一个自我关闭型标签，所以不需要结束标签的。
• input元素中有一个type属性，这个是用来定义这个输入框的类型，这里因为我们需要文本类型，所以就是text。那其他类型有什么呢？其他的类型在后面的关卡中会讲到哦。
• input元素中的name属性也是非常重要的，后端接受表单的输入框数据时，用的就是name属性值来获取数据的。

过关目标

• 在有序列表的ol元素下方创建一个input元素，type元素值使用“text”

过关条件

• 需要有一个input元素，type属性值为text

学会了什么？

这关卡主要教会我们：

1. 使用input元素创建文本输入框

答案

「第十八关」文本输入框中添加占位文本

关卡名：Add Placeholder Text to a Text Field

知识点

• 占位文本（Placeholder）也叫输入框提示语，这段文字会在用户为输入前在输入框中显示。

我们可以用以下方式加入占位文本：

<input type="text" placeholder="这个是占位文本/提示语" />

⚠️ 记住：

input元素是自我结束型元素，不需要结束标签哦！

过关目标

• 在input元素当中添加placeholder属性，属性值为"cat photo URL"

过关条件

• input元素中有placeholder属性
• placeholder的属性值必须为“cat photo URL”
• input元素不需要有结束标签
• input元素语法不能有误

学会了什么？

这关卡主要教会我们：

1. 在input元素中添加placeholder属性

答案

「第十九关」创建一个表单元素

关卡名：Create a Form Element

知识点

• 我们知道在现实生活中，提交一个表单/表格，只需要填写好后递交给一个人就可以了。但是在网页中的表单是怎么提交让我们保存起来的呢？
• 其实也很简单，我们首先创建一个form元素来建立一个表单，然后在form元素中添加一个action属性，并且给他一个提交的地址即可。

小知识：

我们知道现实中我们会把表格提交给工作人员，那在网页中我们提交给谁呢？我们用一个简单接地气的例子来理解一下：

• 首先表格的内容都是电子化数据不是纸质的，那肯定是要提交给一个电子化储存的地方
• 电子化储存的地方就是服务器，也就是一台电脑
• 但是总要有一个人这样的东西接收我们的表单吧？是的，操控这个服务器的就是后端
• 所以表单的action顾名思义是一个提交动作，表单需要指定给一个“人”来接收，在网络上就是“服务器地址或者后端地址”
• 我们再想想现实中，工作人员拿到我们的表格，会存放到文件仓库对吧？那在网络应用中电子表单的数据放哪里呢？
• 表单数据提交给到后端之后，后端会拿着这个数据储存到数据库中，数据库也就是文件库了

通过这个例子大家应该可以能理解表单数据提交和储存的概念了。也更能懂得这个action背后的基本逻辑是什么了。

代码例子：

<form action="/url-where-you-want-to-submit-form-data">
  ...
</form>

过关目标

• 把我们的input元素包裹在form元素之中，然后在form元素中加入action属性值“/submit-cat-photo”

过关条件

• 文本输入框应该包裹在form元素之中
• form元素需要有action属性值为“/submit-cat-photo”
• form元素需要有完整的开始与结束标签

学会了什么？

这关卡主要教会我们：

1. 如何完成使用表单
2. 使用表单form元素
3. 懂得action属性的意义和用法

答案

「第二十关」添加表单提交按钮

关卡名：Add a Submit Button to a Form

知识点

• 用户输入了表单中的信息，但是没有一个提交的按钮，这个信息是不会自动提交到服务端的
• 所以我们需要在表单中加入button元素（按钮元素），并且给它的type属性一个“submit（提交动作）”的类型
• 用户点击这个按钮就会提交表格中所有输入框内的信息

过关目标

• 在form元素中的最后添加button元素，类型为submit

过关条件

• 表单元素中必须含有一个按钮
• button元素必须有一个type属性值为submit
• button元素中的文字内容必须是"Submit"
• button元素必须有结束标签

学会了什么？

这关卡主要教会我们：

1. 使用button元素
2. 如果添加提交表单按钮

答案

「第二十一关」设置一个输入框为必填 ​

关卡名：Use HTML5 to Require a Field

知识点

• 我们可以让表单中某个特定的输入框变成必填，如果用户没有填写是无法提交表单的
• 举例，现在我们需要一个文本输入框变成必填项，我们只需要在input元素中添加一个require属性

代码例子：

<input type="text" required />

⚠️ 注意：input元素中的require属性是不需要填写属性值的，只要加入这个属性就起效了。

过关目标

• input元素加入required属性，把输入框变成一个必填项，用户如果没有填写内容将无法提交表单
• 加入后尝试在输入框中没有填写内容时点击"Submit"按钮，看看 HTML5 时如何提醒我们必填内容未完成的。

过关条件

• input元素应该有一个required属性

学会了什么？

这关卡主要教会我们：

1. 使用input元素中的required属性
2. 给表单加入必填输入框

答案

「第二十二关」添加一组单选按钮

关卡名：Create a Set of Radio Buttons

知识点

• 当我们在表单中询问用户一个问题，并且希望用户只给出多选一的答案。这个时候我们就可以使用单选按钮。
• 单选按钮是input元素中其中一种类型。
• 要使用单选按钮，我们需要把每一个单选的input元素包裹在一个label元素中。这时label元素就会与input元素绑定上。意思就是label中的任何文字，在点击的时候都可以选中这个选项。
• 所有相关的单选项需要有同一个name属性值才能把这些单选项组成一组选项。
• 单选项被列为一组后，才能选择这组其中一个单选项时，才会自动去除选中其他这组里面的选项。

单选按钮的例子：

<label>
  <input type="radio" name="indoor-outdoor" />
  内门
</label>

• 最佳实践是在label元素上设置一个for属性，其值与输入元素的id属性值相匹配。这允许辅助技术在标签和子input元素之间创建链接关系。例如:

<label for="indoor">
  <input id="indoor" type="radio" name="indoor-outdoor" />
  Indoor
</label>

过关目标

• 添加一对radio单选按钮到我们的表单中，每个需要有自己的label元素包裹着。
• 一个选项显示为indoor和另外一个选项显示outdoor。
• 两个选项的name属性值都必须是indoor-outdoor，从而把它们组成一组。

过关条件

• 需要有两个radio元素的单选按钮
• radio元素的单选按钮都需要有name属性值为indoor-outdoor
• 两个radio元素的单选按钮都需要有自己的label元素包裹着
• 每个radio元素都有结束标签
• 一个单选为indoor
• 一个单选为outdoor
• 所有radio元素都必须在form元素之内

学会了什么？

这关卡主要教会我们：

1. 使用label元素
2. 使用input元素中的radio类型
3. 如何组合一组单选项

答案

「第二十三关」添加一组复选框

关卡名：Create a Set of Checkboxes

知识点

• 表单中，通常用checkbox来建立复选框的表单问题。
• checkbox是input元素的其中一种类型。
• 要使用复选框，我们需要把每一个复选框的input元素包裹在一个label元素中。这时label元素就会与input元素绑定上。意思就是label中的任何文字，在点击的时候都可以选中这个选项。
• 所有相关的复选框需要有同一个name属性值才能把这些选项组成一组选项。
• 与单选的原理相同：最佳实践是在label元素上设置一个for属性，其值与输入元素的id属性值相匹配。这允许辅助技术在标签和子input元素之间创建链接关系

复选框例子：

<label for="loving">
  <input id="loving" type="checkbox" name="personality" />
  Loving
</label>

过关目标

• 在form元素内添加一组 3 个checkbox类型的复选框。
• 每一个复选框的input都要有自己的label包裹着。
• 三个复选框都需要使用同一个name属性值为personality。

过关条件

• 需要有 3 个复选框元素。
• 每个复选框元素必须包裹着在自己的label元素内。
• 每一个label元素都需要有结束标签。
• 所有复选框都需要用同一个name属性值为personality。
• 所有复选框都需要添加在form元素之中。

学会了什么？

这关卡主要教会我们：

1. 使用input元素中的checkbox类型

答案

「第二十四关」复选框与单选框中使用 value

关卡名：Delete HTML Elements

知识点

• 当一个表单提交时，表单所有的数据会发送到服务端（后端），这里也包括我们选择的选择框数据。
• checkbox复选框和radio单选框的选中数据也是会一起提交到服务端，那后端怎么判定我们选中了那些呢？
• 无论是复选还是单选，后端接收到的都是选中的选项输入框value属性的值。
• 所有我们需要给每一个checkbox或者radio类型的输入框一个value属性。

代码例子：

<label for="indoor">
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor" />
  Indoor
</label>
<label for="outdoor">
  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor" />
  Outdoor
</label>

以上例子中，我们有两个radio单选框类型的输入框。假设用户选中了"Outdoor"并且提交了表单，表单数据中会含有indoor-outdoor=outdoor这样的参数。indoor-outdoor这部分来源于这个输入框的name属性，然后outdoor就是用户选中的选项的value属性值。

如果我们没有填写value属性值，用户选中了任何一个选项然后提交表单。后端接收到的数据就是indoor-outdoor=on。这个数据里面只能告诉我们indoor-outdoor这个选项，用户有选中一个值，但是是什么，我们不知道。这样这个表单的数据就没有任何意义了。所以我们一定要给每一个选项input元素加入一个value属性值。

过关目标

• 给每一个radio和checkbox输入框类型的元素一个value属性值。
• 这里value属性值常规来说我们都是用英文的，在这个例子中因为我们的选项本身就是英文，所以我们直接用选项名作为value的值即可。

过关条件

• 其中一个radio的value属性值需要是”indoor“
• 其中一个radio的value属性值需要是”outdoor“
• 其中一个checkbox的value属性值需要是”loving“
• 其中一个checkbox的value属性值需要是”lazy“
• 其中一个checkbox的value属性值需要是”energetic“

学会了什么？

这关卡主要教会我们：

1. 使用value属性
2. 给radio或者checkbox加上value属性值
3. 多选项或者单选项数据提交的原理

答案

「第二十五关」默认选中单选框/复选框

关卡名：Check Radio Buttons and Checkboxes by Default

知识点

• 很多时候，表单当中都会有默认选中值。
• 如果我们想默认选中单选项中的其中一个，或者是默认选中复选项中的几个怎么实现呢？
• 想默认选中，我们只需要在radio或者checkbox的input元素中添加checked属性即可（这个也是一个不需要属性值的属性）

代码例子：

<input type="radio" name="test-name" checked />

过关目标

• 把radio单选框组合的第一个单选项设置为默认选中。
• 把checkbox复选框组合的第一个复选项设置为默认选中。

过关条件

• 单选框组合的第一个单选项默认被选中
• 复选框组合的第一个复选项默认被选中

学会了什么？

这关卡主要教会我们：

1. 给radio单选项或者checkbox复选项添加默认选中属性checked

答案

「第二十六关」将许多元素嵌套在单个 div 元素中

关卡名：Nest Many Elements within a Single div Element

知识点

• div元素，也称为分割元素，是其他元素的通用容器。
• div元素也是最常用的 HTML 元素之一。
• 与其他非自我结束元素一样，可以使用div元素来开始，然后在另一行使用</div>来结束。

过关目标

• 嵌套“Things cats love”和“Things cats hate”的两个列表到div元素之中

提示：把<div>开始标签放在"Things cats love"的p元素上方，然后</div>结束标签在</ol>的下方。最后整个div元素把所有内容包裹起来。

过关条件

• p元素内容被包裹在div元素之中
• ul元素内容被包裹在div元素之中
• ol元素内容被包裹在div元素之中
• div元素必须有结束标签

学会了什么？

这关卡主要教会我们：

1. 使用div元素分割内容
2. 使用div元素嵌套多个元素

答案

「第二十七关」声明 HTML 文档的 Doctype

关卡名：Declare the Doctype of an HTML Document

知识点

到目前为止，我们闯过的关卡当中包括了特定的 HTML 元素以及使用。但是那些都是一个完成 HTML 页面的其中一部分。其实还有一些元素是每一个 HTML 页面都需要存在的。

在文章的顶部我们需要告诉浏览器，我们需要使用哪一个版本的 HTML。HTML 这个语言一直在持续更新升级。各大浏览器基本都兼容最新的配置与版本（那就是 HTML5）。但是还有一些浏览器只兼容一些历史版本的 HTML（例如旧版本的 IE 浏览器）。

• 要告诉浏览器我们需要使用那个版本的 HTML，我们需要在 HTML 文件的头部添加<!DOCTYPE ...>，这里的...可以写入 HTML 的某个版本。如果是 HTML5 的话，那就是<!DOCTYPE html>即可。
• 在这个声明的代码中!和DOCTYPE都是非常重要的，而DOCTYPE也是必须大写的。然后html这个就无大小写限制了。
• 跟着这段文件 HTML 版本声明就是html元素。所有我们网页的代码和元素都必须在html元素内编写。

HTML 代码例子：

<!DOCTYPE html>
<html>
  <!-- Your HTML code goes here -->
</html>

过关目标

• 在代码区域第一行，加入DOCTYPE声明，并且选择使用 HTML5 版本。
• 声明后加入html元素，并且在html元素内嵌套一个h1标题元素。
• h1标题元素内必须含有一个标题文案，文案可以随意填写。

过关条件

• 代码中必须含有<!DOCTYPE html>标签。
• 代码中必须含有html元素。
• html元素必须包裹着一个h1元素。

学会了什么？

这关卡主要教会我们：

1. 如何声明 HTML 版本
2. 使用html标签

答案

「第二十八关」定义 HTML 文档的头部和主体

关卡名：Define the Head and Body of an HTML Document

知识点

• 在标准的 HTML 文档结构中，我们需要丰富这个基础结构的分区。
• 所以在html元素中我们会分出head头部元素和body主体元素。
• 所有CSS 引用，字体引用，网页标题等等这些网页定义的内容都是放在head元素之内。
• 然后所有页面的布局元素都需要放在body元素之内。

小贴士：

我们用一个一个更好的理解方式，让我们更容易记住这个规则的原理。

• 如果我们想一下，所有的知识，思想，印象等等就等同于 HTML 当中的"CSS 引用，字体引用，网页标题"，那东西是不是都应该在我们的脑袋里面呢？所以呀“CSS 引用，字体引用，网页标题”都应该放在head头部元素中！
• 我们的骨头和骨架是不是在我们身体内呢？所以剩下所有的页面布局代码就要放在body主体元素中！

HTML 结构代码例子：

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata elements -->
    <!-- CSS引用，字体引用，网页标题等等元素 -->
  </head>
  <body>
    <!-- page contents -->
    <!--页面的布局元素 -->
  </body>
</html>

过关目标

• 代码区域里面有title页面标题元素，h1文章标题元素和p文章段落元素。
• 把title元素嵌套到一个head元素中。
• 剩余的h1和p的内容都嵌套到一个body元素中。

过关条件

• 只有一个head元素
• 只有一个body元素
• head元素需要被html元素包裹着
• body元素需要被html元素包裹着
• title元素需要被head元素包裹着
• h1和p元素都需要被body元素包裹着

学会了什么？

这关卡主要教会我们：

1. 建立完成的 HTML 文档结构

答案

「终」总结

恭喜大家一起闯过 28 关。我们学习到了 HTML 与 HTML5 的基础知识。虽然说这些都是很基础的知识，可以说闯过这 28 关，前端入门级别都还没有到。但是庞大与伟大的事业和建筑物都是从稳固的基础建立起来的。无论是多么简单还是无比困难的任务，我们都需要耐心和细心对待，把每一件小事都做到极致，才能逐步壮大，成功才会在远方等着我们。

下一期，我们开始第二课，深入浅出 CSS 基础。一起继续闯关打怪，打开前端技术大门。敬请期待哦！

我是三钻，一个在技术银河中和你们一起来终身漂泊学习。
想看更多技术知识文章关注个人微信公众号《技术银河》！
有问题可以在公众号留言咨询哦！下期再见 👋！

过去的 2020 年是艰难的一年。

新冠疫情越来越严重，很多人被感染、正在治疗中、失去亲人朋友、丢掉工作，或者眼看着自己的生意失败了。

在这样的时刻，我们会面临从未想象过的考验，也会有成长的机会。

我想分享一个关于学习编程的类似的“时刻”，一个对我来说很有意义的故事。

我曾经是土木工程师

2015 年 1 月，为了一个新项目，我在安哥拉坐车从万博去库巴尔。工程的内容是：建设 100 公里长的道路，直接连通两个遥远的城市（库巴尔和雄戈罗伊）。

坐在我旁边的是一位经验丰富的混凝土工程师，Pedro。作为副驾驶员的他既是我的朋友，也是一名极其专业的工程师，有他在，所有的建筑问题都能解决。而作为高级土建工程师的我，主要负责在政府与承建方之间协调，管理项目进度。

两个葡萄牙人驾车驶出万博城区，来到一个荒无人烟的地方，停在铁轨和公路的交叉口，等待火车过去。

汽车收音机正播放着非洲的流行歌曲，我突然和他说：

“新的一年开始了，又是一月份，我的生活简直是一塌糊涂。我的感情没了，钱也没了，大女儿也跟我很疏远，总之，我很反感这份工作”。

为了减少 GFC（2007-2008 年的全球金融危机）和后续的葡萄牙经济危机对我们的影响，我们不得不努力工作。金融危机导致建筑行业市场大萧条，而到了 2015 年，我们又陷入了安哥拉的石油危机。

后面我才意识到：那段时间是我生活巨变的开端。

我们住在库巴尔的一个小镇，这里之前是前殖民地，也被 1975 年-2002 的独立战争和内战严重摧毁过。在这个地方，除了白天工作，晚上喝酒，就是在猴面包树林里瞎晃悠。

处理这个项目的同时，我还要安排其他的项目合同，使得我经常要开很远的车，几乎达到 1 万公里每个月：从这个海岸到另一端的海岸，从本格拉的海滩到 Kuito Kuanavale（一个靠近赞比亚西部边疆的非洲中部城市）。

这是一段宝贵的时光，它开启了我改变现状的欲望。随着时间流逝，这种欲望在 Pedro 和我的脑袋里开始联结，想要自我改变的欲望越来越强烈。

为什么要改变自我

我的改变从利用自己的时间刺激大脑开始，因此我开始在电脑上阅读、看电影，为永远改变自己的生活设计宏伟的计划。

4 月份，我回到葡萄牙，并且和生活了 13 年的妻子离婚了。很快，我又回到安哥拉工作。

但我仍在保持进步，通过大量的运动来保持生活健康。

不久后，我遇到了我未来的妻子，她是库巴尔的一名银行会计。我们很块开始约会。

我通过阅读、查阅大量知识，以达到继续提高自我的目的。随后，生活的进展发生新的变化了。

一年后，也就是 2016 年 9 月，生活突然变得很糟糕。经济石油危机日益增强，导致石油价格暴跌到低于 40 美元一桶。而 Kwanza（安哥拉的货币）兑换美元汇率大约下跌到原来的五分之一。

工资被拖欠，手上的钱也用得差不多了。那个时候，除了我的第一个孩子 Maria，我还有新的伴侣 Benvinda（现在是我的妻子）、我的继女 Teresa、我们小宝宝 Benedita，都需要照顾。

我不得不在生活上有所调整，而我的妻子也有失业的危险，因为银行每天都在关闭分支机构。钱无法从安哥拉转到葡萄牙，因为 Kwanza 下跌太快，这是一种封闭的货币，也就是无法在安哥拉之外交易。

2016 年圣诞节的时候，我去了葡萄牙。

我疲于想尽各种办法去改善我的现状。我坐在电脑前，尝试通过建立一个小网站来帮助管理我的团队和在安哥拉的工作花费。

我一直喜欢电脑，以前也学过一些 HTML、CSS、LAMP 技术。即使很难学，我也相信我能够学更多，并且，这种学习能让我忘记当时糟糕的处境和贫穷。

很快我就发现仅凭已有的编程知识无法满足我的需要，因此，我习惯性地去一点点地学，试着去解决工作中遇到的每一个问题。

我找到了一些网站和辅导资料，却陷入了困惑，因为我不知道从哪开始学：MySQL？PHP？还是 Ruby on Rails？

发现 freeCodeCamp

在 2017 年年初，我发现并开始摸索 freeCodeCamp，我在 freeCodeCamp 不断地阅读文章，发现了不少人因此改变了职业、编写程序、面试、获得报酬等。发现的这些事让我难以置信，因为它就是我工作困境的解药。

从 1 月 3 号开始，我全身心地投入到 freeCodeCamp 的课程中。

当时，我找到了 Alex Kallaway 的 #100DaysOfCode（挑战编程 100 天），它是如此鼓舞人心，以至于我立马感觉它就是我生命中的动力。

在 freeCodeCamp 社区，我发现了 João Henrique，他自发在当地组织 freeCodeCamp 学习小组。João 的住处离我 60 公里，我们很快成为学习伙伴，并相互帮助。如果没有他陪伴，我的学习很难坚持下来。

我们组织了第一次 freeCodeCamp 本地聚会（阿尔加维的 freeCodeCamp 学习小组也因此诞生了）。刚开始的时候，我们并不知道本地聚会只有我俩，不过，很快就聚集了 10 多个伙伴一起交流和编程（当然，这是后话了）。

我快速地完成第一项挑战，进入 JavaScript 学习模块，同时，我也阅读了大量编程的知识，一切开始向着好的方向发展。

freeCodeCamp 的学习路线帮助我重拾对编程的热情，因为我们只需要毫无顾虑地跟着学习路线的建议一项项去完成。

我有种感觉：我家人和我的生活将来会变得好起来。这种信心主要来自 freeCodeCamp 论坛上看到的大量文章：几乎每天都有人发布“找到第一份编程工作”的文章。

我在安哥拉又工作了一段时间。在二月份的时候，我回到安哥拉，向妻子解释编程将如何改变我们的生活，并且如果我找到编程工作，我们就能去葡萄牙生活。通过白天工作（土木工程师）、晚上学习编程的方式，我拿到了 freeCodeCamp 的前端认证。

感谢我的导师、我的第一个老板 Miguel Coquet 指导我弄懂复杂的 JavaScript 异步编程。在那个曾经工作并临时居住的工地上，即使是三更半夜了，我依然感觉很兴奋，因为那项挑战是一个伟大的胜利。

我下定决心，一定要当程序员。

回到葡萄牙

2017 年 5 月，带着妻子和我仅有的一点点存款，我离开安哥拉，搬进父母的房子，不分昼夜地学习编程。每天学习到眼睛睁不开，我才休息几个小时，虽然艰难，但我还是挺过来了，因为我对编程的热爱简直到了狂热的地步。

当时我的妻子孩子都住在安哥拉，每天对他们的思念让我很难受。我们最终又聚到一起，这事告诉了我：耐心地相信我们终将重聚。虽然我们不知道何时能重聚，但我们始终坚信。

有志者，事竟成。决心是成功的第一要素。

葡萄牙的机会比安哥拉多，我在这发现一个本地社区 Geek Sessions，并且有一些小伙伴组织研讨会（比如：nodeschool）。

我开始参与到研讨会，并慢慢融入社区。

在参加社区的过程中，我第一次遇到了真正的程序员，并得到三位好导师： Miguel Coquet, Nelson Neves, and André Jonas，再次感谢你们给我的帮助

我的学习进步很快，并投入到 Node.js 和 MongoDB 的学习中。几个月后，我搭建了一个小的全栈应用（包括前端、后端和数据库）。

找到第一份开发工作

到 freeCodeCamp 的最后一个学习挑战完成后，我从 freeCodeCamp 学到了作为初级全栈工程师的所有知识。

2017 年 9 月，万万没想到，我会快被 Miguel Coquet 录用了。他当时正在创建咨询公司，并且看中了我的脆弱、勇气、实力，以及为了理想工作全力以赴的能力。

我的第一份工作就是远程工作，在他的监督和指导下，为阿姆斯特丹的一家中型企业工作。

我自己都不敢相信：我通过编程挣钱了。我成功了！

电脑和编程技术一直是我的爱好，感觉很突然，我现在通过它养家糊口了。我一开始的薪资就不低，所以我很快把妻子孩子都接到葡萄牙来与我团聚。

2018 年的春天，我和我的妻子、孩子们一起在葡萄牙庆祝 Benedita 的周岁。

作为开发者的我

尽管前面那段时间我疯狂地学习和大量的阅读，但终生学习态度是程序员必备的，这也是 freeCodeCamp 带给我的隐藏财富。

很快你就能自主学习，不过 freeCodeCamp 的社区依然能提供很多帮助，第一要领就是：“阅读-搜索-提问（read-search-ask）”。

目前我是一家瑞典公司的前端工程师，通过敏捷远程协作为广播公司提供产品解决方案。我不用出门，薪水却超过葡萄牙 95% 的人。

如果 2015 年你告诉我这些，我根本不会相信。五年过去，时间很长，事物的变化也超乎想象。

我的事业转变很快（8 个月，其中 3 个月我白天还需要工作）。假如我更早了解 freeCodeCamp，情况可能更不一样......

尝试以下几个步骤

也许你和 2015 年的我一样，失望、麻木、佛系、自卑。

假如你遇到这篇文章，可能你正在搜索你不知道的东西。

也许生活在告诉你：这里有希望，一条新路，一个改变现状的方案。

也许你并不知道，“现在”是改变自己的最好的时间。

❤️请相信，全力以赴，夜以继日地努力，和他人交流，找一个伙伴，找一个导师去学习和成长，真诚地抛出你的弱点，尝试失败，提出你遇到的各种问题（所有的问题都有意义），然后实现你的目标。❤️

在 freeCodeCamp 上学习编程的原因

我觉得 freeCodeCamp 主要有以下几个优点：

• freeCodeCamp 是免费的，即使你手头紧张也能学习，而且，花钱的培训班也不一定比 freeCodeCamp 的质量更好。因为，freeCodeCamp 和花钱的培训班一样需要个人自律、努力学习。

• freeCodeCamp 的学习环境属于用户友好型，帮助你从零开始。

• freeCodeCamp 有很好的学习路线，保证你不会为如何学而烦恼。如果你想从事 web 相关工作，选择 freeCodeCamp 准没错。

• freeCodeCamp 有一个简单的准则：阅读-搜索-提问（read-search-ask），正确地使用这个准则能帮助你在浏览器上搜索你需要的内容，假如你依然没找到答案，那就去社区里寻求帮助。相信我，学习编程，freeCodeCamp 的社区是最棒的。

• freeCodeCamp 提供挑战性的项目，帮助你从做中学（learning by doing）。这个过程会帮助你了解项目、思索解决方案、学习技术以及和其他学生或者导师讨论。通过这个过程你会获得工作所需的所有技能。

• freeCodeCamp 是一个权威的平台。不要觉得昂贵学费的培训班证书或者大学文凭才能帮你找工作，我采访过很多了解 freeCodeCamp 的人，也被 freeCodeCamp 毕业的人采访过，freeCodeCamp 的学习帮助不少人成为厉害的开发者，在很棒的公司找到工作。而且，公司知道你是自学者、终身学习的人、一个在问题中有能力且乐意寻找答案的人。公司需要的是解决问题的员工，而不是带来麻烦的员工，通过 freeCodeCamp 自学成才的人正是他们需要的。

不要觉得自己年纪太大不能学习编程了，也不要觉得你以往的工作经历和编程工作毫不相关。我 37 岁的时候开始重新学习编程，这个年龄为我带来很多软实力，因为每一份工作经历都会给我们有用的，令人钦佩的软实力。

如果你渴望电脑、编程、互联网之类的知识，freeCodeCamp 不会让你失望，它绝对会给你带来更好的生活。

新年快乐，为大家干杯！别忘了写代码、写代码、写代码。

嘿，哪天有空了来 Twitter 上找我，告诉我你的体会！

原文：How I Went from Civil Engineer to Web Developer Using freeCodeCamp to Learn to Code，作者：Eduardo Vedes

当然不是只有一条路可以成为工程师，你可以参加编程训练营、自学、获取学位亦或得到一份实习慢慢去成为一名软件工程师。我参加了一个编程训练营，但在那段时间里我仍要额外的去学习，只为了真正能理解搞懂。

我被第一个公司雇佣，在试用期做学徒。在我证明自己后，我被雇佣成为一名全职工程师。我现在在世界上最大的工程出版公司里做一名出版作者。

与此同时，妹妹到了一家公司里，在刚开始的几周免费地为他们工作，仅仅只是为了证明她能做好这份工作。这就表明了，许多道路的大门都会为那些愿意努力工作和学习的人敞开。

如果你没有获得一个计算机学位，没问题！有许多其他的道路也可以成为一名软件工程师。让我们瞧瞧它们其中的几个。

训练营

参加一个公认合法的训练营将是你职业生涯中的一笔巨大投资。我大学毕业时，对于接下来想要做什么感到挺迷茫的。

我一向热爱编程但却从未真正追逐过它。当我阿姨知道，我正在尝试弄清楚我应该为我真正的职业生涯的第一步做什么时，不是在大学里面的实习和兼职的那种。她给我发了一份关于编程训练营的邮件，这真的拯救了我。

我之前甚至从来没有听过编程训练营。我立刻就开始做了一大堆调查，编程训练营讲得似乎太好了，以至于我感觉不现实。从那些在网上能找到的、去过训练营的学生上，我阅读他们每一个人发的博客帖子，阅读一些评价，开始发邮件给那些参加过训练营的学生，问他们一些问题。

做完调查后，我决定申请参加一个训练营。进去的时候，我非常紧张，那时我并没有钱，所以我得去父母那儿贷点儿。我甚至没办法在旧金山找到一个价格合理的公寓，在一个拥挤的房子里和室友睡在双层床里，这房子有点像罗恩·韦斯莱（哈利波特里面的主角），但没有魔法。

这是我做过最棒的事了。

五年后，我成为了一名高级软件工程师。我经常待在会议室里讲话，在 Eventbrite 和 Pandra 这样的巨头上市公司里工作过，被报纸和电视上采访过几次，被顶尖公司聘请去做顾问，在世界上最大的工程出版社做出版作者。一个编程训练营完全改变了我的命运！

但是，不是所有和我参加了训练营的人都会这样。刚开始进去的时候我们这帮人有 50-60 个学生，等到毕业的时候就只有 10 个了。有些人要留级去学习更多，有些早早辍学了，不过他们仍然得到了一大笔退学费；当财务损失太高时，有些人在中途认为工程师不适合他们；其他人因为跟不上而被劝退。

一个编程训练营是你人生中最大的花销之一了。你需要自己做调查。网上有许多吓人的故事：有人支付了 6、7 万，却发现训练营是诈骗或老师不合格。

一个好的训练营会在线上开始第一阶段，你会在家学习，他们会教你基本的编程概念。所以当你到编程现场的时候，你能够专注于更难的工程概念，旁边的老师会回答你的问题。

确保选择一个包含求职准备的培训计划，一些职业发展顾问会给你指导。这是我在训练营最受益的部分。我能得到第一份工程师工作是因为训练营帮我写好了 LinkedIn 并且优化我的个人介绍。我的第一个公司实际上在LinkedIn上找到了我，我甚至都没有申请过这公司。

如果你决定要做个编程训练营的调查，我建议你从这几个开始：HackReactor，App Academy 和 Hackbright。

自学

如果你有时间并且能够很好地管理你的时间，这部分也许会非常适合你。这绝对是最难的选择，因为你要坚持一个计划并且保持动力。

为了让你坚持下去，设定目标非常重要。我建议你在学习一个更加昂贵的线上课程之前西先用一些免费资源作为学习的开始。试试 freeCodeCamp 的响应式 Web 设计课程来开始你的编程吧。

当你完成了这几项线上课程，开始挑战自己。不要总是跟着教程走，尝试建立一些你自己的项目。

选一个让你感到兴奋的想法。如果你真的对你所建造的东西充满激情，你就会有动力坚持下去。有什么你能尝试的、有趣的网站、想法或命令行项目吗？千里之行，始于足下，每天做一点点但是保持增加项目的复杂度。不久之后，你就能在你的简历上用上这些项目。

确保你每一天都划分有一个专门的时间来学习编程，即使每天只有半个小时——这总比一周几个小时一次效果好得多。

如果你选择了自学，你可以找一个搭档！试着去找一个和你在同一条道路上的人。在继续学习你今天的内容之前，向他们伸出援手并分享你今天所做的。

培训制/实习

从训练营毕业后，我作为工程师的第一份工作就是接受培训，搭建一个购票系统。这个工程有着资源，要选两名初级工程师，我就是被选中的工程师之一。

这个培训所教的比我一个月前想到的还要多。我常常和一名工程师结对编程，公司也不压迫我立刻去写大量的代码。

我非常高兴自己决定参加了这种让人专注于学习的培训，而不是一份既不会教我东西也不会帮我在个人职业生涯中成长的工作。

公司提前一个月结束了我的培训，并雇佣我成为一名全职工程师。一年半后，我被提升为一名高级软件工程师，他们优先培训了我，并且特别关注我。

一个更大的公司也会有更加规范的程序，也就是说你可能有专门的导师，熟悉岗位的时间和更多的资源。我能获得学徒机会，是因为几个高级工程师真的想要帮一个初级工程师成长，也愿意花时间培训我。

然而，通常来说那些培训或者实习的候选者，他们要么就早早的拿到了计算机学位，要么就参加了一次训练营，能够快马加鞭地上手工作。

我妹妹自学编程，然后跟一个公司说她乐意免费地工作几周去证明自己。他们欣赏她的决心，愿意让她一试，最后，即使后面还有一大堆人在申请这份实习，也先雇用她为全职工程师。

因为刚起步的竞争极其激烈，所以当你申请工作的时候能拿出你的闪光点就非常重要。如果你没有参加训练营或者没有一个计算机学位，你就需要做一份很棒的作品集和简历。

Ali Spittel 在 freeCodeCamp 上发布了一个关于创建优秀作品集的博客。

在你当前的公司转到工程岗位

在我之前工作的一个大公司里面，许多人都是从不同的团队转到工程团队的，有些人以前是做客服的或质量管理的。

这并不容易，他们也要去学很多东西，但他们现在都成为一名全职工程师。他们只要证明自己能够胜任这份工作并且能够立马上手就行。

这需要你在能够完成当前工作的同时，还有时间去做额外的事。你需要向公司证明你能够快速学习并创造利润。这也意味着你要在周末要加班加点，但最后这都是值得的。

这在其他程度上让你的公司受益了，因为他们不仅得到了一位工程师，还是一位早就知道公司如何运作的工程师。如果你在质量管理岗位或客户岗位工作过，那你早早就了解了产品，也知道客户的痛点。这对一个公司来说是一笔巨大的资产。

还有一件事要注意的是，如果你的公司没有工程团队，那你就没办法这样了。确实，如果有一个比较大的工程团队，当你遇到问题的时候，你就有潜在的导师，可以和工程师一起处理程序。

哪些人可以学会编程并且得到一份工作

我在大学没有选择工程类专业，因为我认为自己不够聪明，认为工程师是男性的领域，我会遭到排挤。

现在，我是一名高级区块链工程师、iOS 工程师、高级前端工程师、高级全栈工程师。我也是一名专栏作者，并且在技术大会上演讲。时常有谷歌、Facebook、LinkedIn 和 Apple 的招聘人员联系我。

如果你能下定决心，你就能得到一份工程师工作。

如果你喜欢我的文章，可以给我发 Email，免费获得我关于成为一名软件工程师的指南。

原文：How to Become a Software Engineer if You Don't Have a Computer Science Degree，作者：Randall Kanna

那天是我哥哥的生日，所以我对这个日期记得格外清晰。他在机场度过这个生日，因为全家人都在机场为我送行，他们原以为我只是去八个月。

过去我对哥本哈根的唯一了解来自 CPH Open on Thrasher Magazine's YouTube channel 这个频道。幸运的是，我完完全全爱上了这个城市，于是在第一个学期之后我决定要在哥本哈根待更久时间。我没有选择在加拿大实习，而是尽可能在哥本哈根找一份实习工作。

在哥本哈根工作

我之前没有好好计划这件事，所以开始找销售发展代表的实习工作。我之前在某节课上听说过这个初级职位，因为之前的工作经历都与销售和客服有关，我以为这会非常合适。

我投了简历给一家初创企业，四小时不到，他们的销售经理就跟我通电话了。这是我第一次感受到创业公司的快节奏！一个月后我入职了。这也是我第一次接触到专业程序员。

虽然我只在高中的 Visual Basic 课程里接触过软件开发，但是我对技术一直有着很深的兴趣。

这份工作让我第一次有了和程序员共事的机会。他们的工作听起来非常酷。他们谈论一些专业术语和技术——React，Ember，Scala，Python，TypeScript，样板代码，编译器，渲染......开发软件竟然需要了解这么多内容，这听起来令人害怕。

接下来的一年半时间，我继续在销售职位上打拼，最终升职成了客户主管。在这份工作中，我感到我的沟通能力、时间管理能力、表现能力都得到了很大的提升。

发现 freeCodeCamp

虽然我作为一名客户主管还算成功，但是我对自己未来是否愿意在销售业发展还是存在疑问。而且在母语非英语的国家里做英语销售，职业选择也有所限制。

我开始拓展阅读，寻找新爱好或者挑战。我就是在这时发现了 freeCodeCamp 的博客的（当时还建在 Medium 上）。我花了几天时间才意识到 freeCodeCamp 并不仅仅是一个博客，它是一个在线免费学习编程的平台！其实从它的名字就可以看出来。

在做完几道 HTML 题之后，我已经完全着迷了。那时我就决定在空闲时间完成 freeCodeCamp 的课程，为了在遥远将来的某天能成为一名开发人员，和我的同事讨论 React。我喜欢这个想法。

艰难地学习基础知识

我很快地学习了 HTML 和 CSS，在我开始尝试完成一个项目之前我都相当自信。搭建一个作品集网站？小菜一碟！

离开了 freeCodeCamp 的编辑器，我突然感到非常迷茫。从头开始写项目似乎变成了不可能的任务，我好像把学到的东西忘得一干二净了。我突然认为自己不可能成为一名真正的程序员。

而此时，寻求帮助是我做出的最好的决定。我的一位同事耐心地教我使用 VS Code，构建 HTML 文档并链接相应的 CSS 文件。拙劣地完成了作品集网站后，我把这项任务勾选成了“已完成”，虽然我的成果和其他人的相比非常糟糕。

在历时一个半月学完 HTML 和 CSS 课程后，我终于开始学习我期待已久的 JavaScript 课程。

学习 JavaScript

开始时很简单，但没过多久我又感觉到迷茫和受挫了。学完了 JavaScript 的所有模块后，我没有自信和韧劲去挑战更难的 JavaScript 项目。相反，我选择了容易的路线，开始学习 Codecademy 的 JavaScript 课程。

这对巩固基础知识当然是有帮助的，毕竟反复练习是关键。然而，在学习过程中我犯的最大错误就是没有回过头去尝试那些更难的项目。

学完 Codecademy 的所有模块后，我又买了 Udemy 上的 “The JavaScript Bootcamp” 准备继续学 JavaScript。鉴于这已经是我第三次梳理基础知识，课程结束后我感到自己对 JavaScript 更有把握了。

进入 Pleo

在这时我直接开始学习 Node，紧接着学习了一门 React 课。

在两门课之间的某个时间，我在 Pleo 找到一份客户经理的工作。作为发展如此迅速的创业公司的一员非常令人兴奋。更令人兴奋的是，遇到如此多年轻有天赋的开发人员，并有机会向他们学习。

在做了三个月左右时，主管和我讨论我的职业规划。我非常坦诚地告诉她，我不想再在销售行业发展了。我想尽全力自学编程，争取在未来某天成为一名程序员。

没有人想在自己组里一个初级销售代表的口中听到这些话。但是令我惊讶的是，她非常支持我的决定，并且愿意尽力帮助我达成目标。

尝试编程挑战

和公司的一位技术总监聊过之后，我了解到我需要完成招聘流程中所要求的前端编程任务，才能继续从销售部到产品部的转行。

尝试这件事的想法令人害怕又充满动力。也是从这时起，我开始在办公室待到更晚。我不想浪费时间骑自行车回家，所以每到下午五点，我会赶紧找点晚餐吃，尽快回到工位，开始我假装作为程序员的一天。

我终于在圣诞假期前上完了 React 课，并且开始做一些没头没尾的个人项目。我知道我需要把学到的知识应用于实际中，但我发现我很难完成没有最终目标的项目。

假期里时间变得充裕，我便又开始看之前遇到的前端挑战了。我对自己有能力提交一个有价值的成果仍然表示怀疑，但是因为有目标，我想我说不定最终能完成一些东西。

幸运的是，我们公司的前端挑战很像那门 React 课程里的期末项目，所以我可以复用很多之前的代码和组件。我感觉我有点像在作弊。

我还是提交了我的项目，并积极地等待回应。公司的两名高级工程师评审我的代码，我感到非常害怕，准备好接受一些严苛的反馈。

几周后我拿到了结果，我提交的作品还不算太糟！我收到了一些非常有可行性的批评和建议。我的一位同事甚至在下班后留下来和我逐行讲解那些反馈信息。代码评审会议进行得非常顺利，于是我们决定每周都约一次，直到我有能力转行成一名真正的开发人员。

我的第一次 Pull Request

接下来的几个月里，销售主管和技术总监时不时来监督我的进程。四月时，我有了一个可以进入内部工具组工作的机会，后勤系统有一些不紧急但还是需要处理的 issue。

我非常兴奋——这是我得到和产品部合作经验的绝佳方式，而且已经明确了这个任务并不会妨碍到销售工作。一想到能接触到生产环境的代码，我就感觉非常疯狂！

在简短的入组介绍并得到公司 GitHub 页面的权限之后，我开始处理第一个 issue。

我需要给合规组加一个可编辑输入字段。我毫无头绪。 我以前的确知道怎么加输入框，也粗略地了解表单在 React 里是如何运作的，但是我好像从没在任何教程里看过和这段代码类似的东西。

我突然感觉自己掉进了问题的深渊里：怎么写 TypeScript？分支是什么？我怎么提交 Pull Request？这些库都是做什么用的？我到底怎么写代码并且发给其他用户？要是我破坏了重要的功能怎么办？

我花了好几天才搞明白，但是因为有了工程师主管的耐心与帮助，我终于成功提交了两段能发布的代码。这是我编程之旅上巨大的里程碑。

职业转变

在接下来的五个月里，我继续在办公室待到很晚，9 到 17 点做销售工作，17 点之后开始做开发者，直到我对自己写的代码满意之后才离开。

可想而知，我对销售工作的热情每天都在减少，我开始想要有个正式的职业转变。

当然，这个转变并不是很顺利。没人知道把一个销售转到产品部意味着什么。首先，我必须完成销售目标。我想这对绝大部分销售部门来说都很正常——无论如何要完成自己的工作配额。

经过多次来回周旋之后，我终于被允许在 8 月 1 号正式转岗，只要我能完成销售配额。这就像是隧道尽头的亮光。我马上就要签一份软件工程师的合同，这对我来说挺难想象的。接下来几周过得飞快。在 7 月 31 号 17 点这一刻后，我不再是客户经理了。

适应新角色需要一个转变期，这就像在交易所工作的股票经纪人突然变成图书管理员一样。

抛开一切不说，我没有任何一天不期待来上班的。我继续在内部工具组工作，搭建合规组和用户支持的后台系统。

我学到的东西

之前的销售工作经历对我现在的工作非常有帮助。很强的沟通能力、时间管理能力和表达能力，对于一个开发人员也是无价的。但我发现很多开发人员普遍缺乏这些品质。

我意识到自己真的非常幸运，能这么快就得到了写生产代码的机会。这毫无疑问是我在学习编程过程中的巨大跳跃，也扩展了我对现实中开发工作的理解，这些在网课中是无法得到的。

有一位导师极大地帮我加快学习进度，也帮助我坚持写项目，所以我才能一直处于学习状态。如果我没有周围那么多的支持，我想自己可能还在花费整个晚上和周末看教程或者搭建“随机生成皮卡丘”之类的项目吧。

我下决心要把所有空闲时间用在个人发展上。我想人们很容易低估这个过程的时间成本。有指导者是一个巨大的帮助，即便只是有一个偶尔能回答你的问题的人，也能让你不用花数个小时陷在沮丧情绪中。千万不要害怕寻求帮助。

回过头来看，我希望我能花更多时间搭建一些小项目，应用我所学的知识。我频繁地开始做项目但又半途而废，因为我一直认为自己不能用正确的方式写完代码。

花时间艰难地研究一些东西对我的学习过程更有帮助。学一些交互性的编程网课确实更安心，但这对你把编程知识应用于现实世界有一定的限制。我确实踩过坑。

我花了一段时间才意识到，并没有人知道什么是正确的（学习）方式，那些都是人为编造的。作为一个编程新手，能以新角度看问题也是有价值的吧。

如果我希望过去的我能得到一则建议，那它会是“更努力地边学边应用”。特别是在你学习的过程中，并没有什么现实代码或者做事的正确方式。任何你能在过程中学以致用的机会都是有价值的。

不一定要等到有人给你薪酬，你才觉得自己是一名开发人员。只要你开始写代码，你就已经是了。

看完希望能交个朋友！如果有任何问题或者有推荐的书籍，欢迎给我发邮件，在 LinkedIn 上找我，或者关注我的 Twitter！

原文：How I Landed My First Developer Job Without Writing a Single Application，作者：Jean-Marc Möckel

“外面下着雨，我正坐在马德里市中心的一家咖啡馆里，一边喝着咖啡一边敲着键盘。不久后我将以前端开发者的身份开启全新的职业生涯。就在 10 个月前，我还在 Granada（西班牙格拉纳达大学）当英语老师，对编程一窍不通。而现在，我即将成为一名软件开发者，这是怎么发生的呢？”

几个月前，我在入职新工作的第一天写下了上面这段激动人心的话语。跟我来吧，我将和你们分享我是如何实现这一切的。

特别的感觉

当我刚开始考虑成为一个开发者的时候，我会将信将疑地阅读类似这篇文章的故事。我会试图找出这些文章作者所拥有的而我所没有的特殊的背景——可能是这种背景使得他们适合这种工作。

后来，我慢慢明白事情不是那样的。成为一名开发人员不需要任何的 "特殊" 背景。我不会告诉你这非常容易，因为事实并非如此，但好消息是每个人都可以达到要求。你必须非常努力工作，学习很多东西，不能半途而废。当出现困难的时候，更不能退缩。当你自己觉得不适合做这件事情的时候，说服自己不要陷入绝望。以上就是你所需要的，每个人都可以通过练习来做这些事情。

我起步的时候没有任何相关背景。我并没有把钱花在昂贵的课程上面，在忙碌的一天工作之后我并没有太多时间去学习，同时我也已经步入中年。

每个人的情况是不一样的，但是只要你用心去做，你就能做到。

背景

在写下第一行代码之前，我从未接触过编程，也从来没做过相关工作。在职业生涯的早期，我从事餐饮工作，然后我获得了音乐相关专业的学位，之后在西班牙当了十年的英语老师。我甚至对电脑的基本操作也不是很熟练，但总是对新兴科技感到好奇与兴奋。我认为程序员是这个时代的超级英雄。

不过，我从未想过自己会成为程序员。部分原因是我认为编程只有精英才能做。这种工作是为那些从名牌大学毕业的聪明人准备的。虽然这样的人确实存在，但是大多数人并不是好莱坞电影里面的那种有天赋的天才。开发远比我想象的要容易得多。

故事起源

一切源于我和妻子之间一次热切的交谈。她当时正在探索在 STEM 领域尤其是技术领域女性人数减少的原因。她决定通过成为一名程序员来改变这一现状，并且成为我们家族中年轻女孩的榜样。就这样，她开始学习了解了。

这很快也让我兴奋起来，因为我们意识到有很多可用的资源。这不是什么黑魔法，而是一种我们可以学习和掌握的技能。

剧透一下，她成功地从人力资源方向转行，比我早一个月获得了开发的工作。

某一天，我们在一个科学博物馆里面发现了一本有关儿童编程的书籍。一回到家我们就打开 Notepad，写下 <h1>Hello World</h1>，在浏览器里面打开，然后将页面颜色更改为红色。我们兴奋地尖叫着：这是什么魔法！

我彻底迷上了编程。我想要用电脑和代码做自己想做的事情。

我之前的工作

那时我已经做英语老师八年了。这不是典型的一个人在谈论他的没有前途的工作的场景。相反我非常热爱这份教学工作，喜欢工作的时候和孩子们在一起，而且我在工作时很自在。

但是有时候，即使你爱上了某样事情，你心里也知道是时候该继续前进了。这是我人生的一个新阶段，我有了新的展望和抱负。最重要的是，我想要一个新的挑战，让自己远离舒适区。

通往成功的真正路径

显然并不存在什么通往成功的标准路径。我们三个人（我的妻子、我和我的好朋友）为了转行几乎同时开始学习编程。我们三个人现在都是开发者，每个人的方法都不一样，每个人都有适合自己风格的方法。如果说我们之间有什么共同点的话，那就是我们没有放弃，没有半途而废。我们都付出了很多努力。

所以这里我要告诉你们的不是一个通用的方法，而是我自己所特有的方法。这不是唯一的方法，可能也不是最好的，但是这对我很有效。

开始

首先，我在 YouTube 上观看关于编程的视频，找到切入点。然后我开始学习 HTML 和 CSS，按照教程构建了一些基本的 Web 网页。我开始明白这是自己想要从事的工作。

设定目标

我向两个在这个领域工作的朋友寻求建议。那些鼓励的话语对我在前行的路上专注于一个明确的目标至关重要。

我花了些时间整理所有的选项，并设定了对我有用的现实目标。我需要在最短的时间内转行成功。我没有其他的收入来源，这意味着我要继续做之前的工作直到能转行为止。

我认为前端开发是初学者最容易进入同时是需求量最大的一个方向。我专注于初创公司所需要的技能而不是自由职业，这样我进一步缩小了范围。

然后我设定了最后期限。我不希望这个目标只停留在待办事项清单的末尾。2017 年的春天，我向自己承诺接下来的教学将是我老师生涯的最后一站。就是说到 2018 年 9 月份，我将不会继续做教学相关的工作。

在这个阶段我能够使一切尽在掌握中么？显然不可能的。在做出如此具有冒险的职业选择时，肯定会存在不确定性。在那个阶段和整个过程中都存在各种各样的疑问。关键是能否坚持不懈，不半途而废。一旦做出决定，我将沿着这条路走下去，看看未来将会发生什么。

学习

我明白不断进步的唯一途径就是学习。我有一份全职工作，所以永远都不可能等到有时间的时候。我必须一边工作一边学习，要么就干脆不做。幸运的是，我的妻子同时也在学习。这有助于安排我们自己的时间，以最大限度地提高学习时间。首先，我们给自己制定了一个 "周末训练营" 计划，就是说我们会花整个周末来编程。

典型的一天是这样的：

• 8:00 am：起床，吃早饭
• 8:30 am：开始编程
• 12:30 pm：去健身房
• 1:30 pm：吃午饭，休息
• 3:00/4:00 pm：继续敲代码
• 8:00/11:00 pm：完成一天的工作

暑期来了，我将 "周末训练营" 变成了 "每日训练营"，从而充分利用了这个假期。尽管有享受夏天和放松的诱惑，我还是坚持不懈地完成了计划。

九月份，我又得回去工作了。我有意识地决定减少工作时间，接受了更少的收入以换取更多的学习时间。这也是我在转行的路上踏出的更为坚实的一步。

暂停敲代码去工作的时候，我感觉很难受，我想要回到电脑面前解决某个问题或是 bug。但是现实生活开始了，一学年的开始总是需要很多时间来准备和组织。正如其他老师会告诉你的，这些工作也占用很多个人时间。

就在那个阶段，我感觉我平常的任务要偏离原有的目标了。尽管我尽最大努力，但是我编写代码的时间越来越少了。我开始失去动力。我试着坚持下去，但是有时候就是没有时间来写。即使有明确的目标和良好的动机，生活也会使事情变得复杂。

然而，你可以从我的 GitHub 活跃度显示中看到，我一直在尝试。我不停地投入时间，哪怕是一小时，哪怕是读一篇文章。我做了所能做的一切来养成这个习惯。当你把一件事拖得太久，可能会失去原来的习惯。

随着 12 月的临近，眼看着新年即将到来，最后的期限也越来越近，我再次振作起来，做事变得井井有条。我开始努力工作，不管我有多累，时间有多少，我都要坚持几小时。有时我会早点起来敲代码，有时会熬夜。

这意味着我的生活几乎被压缩到只能一边做一份付房租的工作一边学习。我基本上保持着这种节奏，一直到我收拾行李搬到马德里的那一天为止。那是 2018 年的春天，距离截止日期还有几个月。

工具和资源

在一边工作一边学习编程的这 10 个月中，我的主要精力都放在了编程上面，我在 Twitter 上面被问到最多的问题是“使用了那些资源”。我写了另一篇文章，深入回答了这个问题。这里，我列一个我认为是最重要的列表（包含最重要的工具和资源）。

课程

• freeCodeCamp相关课程
• Udemy 上面 Cassidy Williams 、Colt Steele 的课程
• Wes Bos 上的 JavaScript 30 以及其他的课程
• YouTube 上面的资源：Traversy Media，LevelUpTuts
• Lynda.com 上面 Christina Truong 的课程
• Udacity 上面的前端纳米课程（这是一个付费课程，但是我从 Google 获得了奖学金）

仅仅学习这些课程是不够的，所以我还通过这些工具或方式来学习，进而找到工作：

• Twitter：这是我所有知识来源的地方，尤其是 #100DaysOfCode 社区，它给了我无穷的动力和支持
• GitHub：一个非常重要的学习工具，也是我免费托管所有项目的地方，通常这是雇主重点关注的地方
• 个人作品集：通过构建开发项目和其他项目，我学习了最重要的开发技能

你可以在 GitHub 上面查看我的学习轨迹，其中包含我前 10 个月学习路径和使用资源的完整列表。

找到工作

令人惊讶的是，找工作对我而言并不太复杂。我没有海投，也没有花很多很多时间找工作。相反，我是有选择性并且专注的。

最后，我获得了五个面试邀请。其中一个拒绝了我，有一个未能完成，完成了其余三个并获得 offer。其中一个我不感兴趣，其余两个很有吸引力，其中之一就是我目前的工作。

我并不是对找工作不上心，实际上我不知道自己的技能是否能够胜任开发相关工作：我会不会因为经验太少而被嘲笑？那段时间我很紧张，同时也很兴奋，充满希望。当我最终获得两份心仪的 offer 的时候，欣喜若狂，简直不敢相信。

我会永远感谢那些做出决定给我机会的人。

那两家公司的面试过程很不一样。其中一个是视频电话，我可以与公司里不同的人交谈。这是一家规模不大但是实力雄厚的公司，希望建立一个新的前端开发团队。经过几周的沟通，他们给了我一个不错的 offer。

另外一家是处于高速成长中的年轻初创公司。在一次电话面试之后，我收到了一项技术挑战，需要在几天之内完成。它包含构建组件、进行 API 调用以及显示正确的信息。然后视频聊天，讨论我写的代码。然后，技术团队邀请我一起聚餐，以便更了解我。之后，我拿到了 offer 。

最后我不得不从这两家之间做出选择，这是我不敢相信的。但是我知道自己想要的是什么，我接受了初创公司的邀请。这家公司有一点比较吸引我：他们非常清楚导师的重要性，并给我提供成长和学习的指导。这点很关键，绝对是正确的选择。

就这样，在马德里的一个下雨天，我喝完咖啡之后走进了商务区的办公室，介绍自己是新来的开发人员，然后开启了新的职业生涯。

希望你喜欢我的故事。如果你能给本文点赞，我会非常高兴，你也可以分享文章，让更多的人来阅读，从中找到动力。我想继续写更多的此类文章，如果你想要知道更多以及哪方面的细节，请在 Twitter 和我沟通吧。

原文：How I switched careers and got a developer job in 10 months: a true story，作者：Syk Houdeib

但是最令人惊讶的是我从来没有就读过计算机专业学位，也没有上过任何的课程或编程训练营！而且我是在我快 30 岁的时候才踏入这个领域的。

那你觉得我是怎么办到的？我是怎么学会编程的呢？

编程曾经只是一个兴趣而已......

应该可以从高中说起，我在那时候发现网络世界，自学了基础的 HTML 和 CSS。当时的我只是觉得好玩。

当时我主要是做一些关于我的爱好（单板滑雪）的网页。我也挺喜欢用 CSS 定制我的 Xanga 部落格，设计一个我想要的风格（还记得 Xanga 吗？😂 ）

回想起来， 令人难以置信的一点是我从来没有考虑过到学校读计算机专业学位或网络开发。但是坦白说，在我脑海了，那真的只是一门兴趣而已。我是打算成为一名医生的，那也是我父母对我的期望。

可是没有进展得很顺利， 我在接下来的几年对自己未来的路感觉挺挣扎的。究竟发生了什么事呢？

摄影的工作

在大学的时候，放弃医学院预科之后，我决定欣然接受自己创作的那一面，主修艺术。我拿到摄影文凭，还在一间商业摄影实验室找到一份工作。我在暗室里洗底片，还帮客户拍艺术照。

虽然在实验室挺好玩的，可是每小时薪水只有 $8。还有，我当时完全不晓得整个摄影行业快要倒闭了，像一艘快沉到大海的船一样。已经很少人用底片了，大部分人都会用数码相机和 Photoshop。

几年后，公司倒闭了。我的情况变得更糟糕了。

临时办公室的工作

我最终在临时办公室找到一份工作。我的工作内容是扫描、影印、装订、填充信封，大致上就是在一个大企业里当一个小人物。 虽然没有很风光，但是喂！可以养活自己就好了！

从一个岗位飘到另一个岗位，做了几年还是没办法存到钱，名副其实的月光族啊！可是之后有一个临时工作改变了一切。

在 Craigslist 找到的工作

有一天，我在 Craigslist 网站徘徊了一下，想要找工作， 然后找到了一份数据输入员的职位。我对于电脑的工作挺有把握的，所以我应聘了，也立刻得到回复。我被雇用了！

那是一间小型的 web 开发公司，专门帮客户建立和维护网站的。一开始，我是做一些简单的数据输入的工作。稍后，老板开始教我一些 back-end 的编程和 SQL 数据库。

薪水还可以，大概每小时 $10-12，但那只是兼职。我留在这里主要是因为我学到了一些宝贵的新技能。

学编程挺难的，但是有益处。还有，我发觉自己越学越精。譬如说，我学会自己在 Google 搜索找答案了。

你知道，如果我反复问同一个问题的话，我老板会生气的。我是吃了一点苦头才学会的，得来不易。所以，我会花时间尽全力尝试寻找答案，然后才找别人帮忙。

我也会写笔记，记下新的东西，特别是如果我费了很多时间才弄明白的东西。这样一来，我下次就可以回看自己的笔记本，而不用重新 Google 搜索，或更糟糕的是——问我那个脾气暴躁的老板。

在那个 web 开发公司打了 2 年工之后，我获得很多编程的经验。可是我还是没办法负担生活上的开支。我当时知道我要做一个改变，也真的如愿。

找一份真正 web 开发者的工作

在 Craigslist 工作 2 年之后，我觉得自己已经会足够的编程知识了，可以应聘一份真正的 web 开发者的工作。

虽然因为经验不够被拒绝了很多次，但我最终在一个广告公司得到一个面试的机会。

面试当天，我运用我的各种倾听能力、肯于学习的态度和记笔记的技巧打动老板。一切都进行得很顺利，他们雇用我了。这是一份真正的工作！ 有年薪和福利，全部都有!

我肯定我告诉父母我被雇用的时候，我妈应该有做了个侧手翻吧。他们很激动。可是找到工作只是开始。在一个新的领域工作确实不容易，毕竟我只懂一些皮毛。

一个自学的人怎么可以在一个这么快节奏的领域里面发光发热呢？

冒牌者症候群真的很糟糕

说实话，我上班的第一年压力超级大，常常挣扎在冒牌者症候群当中。我的老板和同事都有计算机专业学位，有些还有硕士学位。

我每天都会极度恐惧自己会被“发现”缺乏能力而被开除。我的工作是需要新的技能的，恐惧心理对我没有帮助。

我有时候会花费几个小时在做某个任务，同样的任务我相信我老板会用不到 30 分钟就完成。 我讨厌自己不善于做事，所以每天有一种不知所措的感觉挺糟糕的。

可是我坚持下去，还有我总是做一件事：我会常常 Google 搜索。我总是在问别人之前尝试自己找答案。在我真正遇到瓶颈的时候，幸好我的老板都会很乐意指导我。

我在那家公司总共待了 6 年之久。随着时间的推移，我也变得更能干更有自信。我还在第 4 年升职成为一名资深的 web 开发者。

我的最大收获

我在这一份工作里面学习了非常多，不仅是编程， 还有学习新的技能，特别是自学而来的。如果你是在学习编程的话， 以下是我最大的收获:

首先，我学到我其实可以从 Google 找到任何的资料。当然如果你还在学基础的 HTML， 可能还不够建设一个复杂的程序，但是知识终究可以慢慢累积起来。

我也学会怎么逆向编程——简单来说就是研究公司里现有的方案，弄明白代码是如何运行的，然后转过来用在同样的新方案里面。

你可以自己研究已经存在的网站里的代码，还有在 GitHub 里找一些方案来学习。我可不是建议你抄袭任何人的代码，而是建议你学习背后主要的逻辑。

我最大的教训之一是明白冒牌者症候群真的很糟糕，但时间会冲淡一切，会真的慢慢好起来。

我有一段时间是每一天都会学到新的技能的。如果把那年的日子加起来，真的累积到很多。所以到第 5 年，我已经不会害怕面对自己不会的东西，因为我相信自己的能力可以驾驭得了。

结语

我最终也离职了，但我今天还是做 web 开发者，也有六位数的年薪。路很漫长，但我感到非常的满足。 如果你正想要学编程的话，希望我的故事可以启发到你！

想要看我的完整 8-bit 动画版的故事吗？请访问我的 YouTube 频道。

我也在我的博客写一些编程的教学，Coder-Coder.com。以下文章你应该会喜欢：

• Learn web development as an absolute beginner
• 4 Reasons your z-index isn't working (and how to fix it)
• Gulp tutorial for beginners

原文：How I Learned to Code (Without a CS Degree or Bootcamp)，作者：Jessica Chan

因为混得不好。

在成为程序员之前，我干过很多工作。由于学历的问题（高中），我的工作基本上都是体力活。包括但不限于：工厂普工、销售（没有干销售的才能）、搬运工、摆地摊等，转行前最后一份工作是修电脑。这么多年，月薪没高过 3300......

后来偶然一个机会我发现了知乎这个网站，在上面了解到程序员的各种优点。于是，我下定决心转行（2016 年，当时 28 了），辞职在家自学编程。并且也得到了媳妇的支持，感谢我的媳妇。

转行准备

转行选择前端也是在知乎上看网友分析的，比后端好入门。

如何选择教程？

最好在网上多查查资料，找评价高的或者去豆瓣上找评分高的书。

我在网上查了很多资料，最终确定 HTML、CSS 在 w3cschool 学习。JavaScript 则选择了JavaScript 高级程序设计第三版（俗称红宝书，现在已经有第四版了）。

光看不练是学不好编程的，我非常幸运的遇到了百度前端技术学院。它从易到难设置了 52 个任务，共分为四个阶段。任务难度循序渐进，每一个任务都有清晰的讲解和学习参考资料。它还怕你不会做，允许你查看其他人上传的任务答案。

我先学习了 HTML、CSS，做完了第一阶段任务。再看完红宝书前十三章，做完了第二阶段任务。然后把红宝石剩下的全看完，做到第三阶段的任务四十五。后面的任务对于当时的我来说实在太难了，就没往下做。在 1 月的时候，又学习了 ajax，了解了前后端如何相互通信。

我从 16 年 11 月开始自学前端，一直到 17 年 2 月。历时 3 个月，平均每天学习 3-4 个小时。中间有好几次因为太难想过放弃，不过最后还是坚持下来了。

找工作的过程非常艰难，我在网上各大招聘平台投了很多简历，但由于没学历、没经验，所以一个回复都没有。最后还是我媳妇工作的公司在招前端，给了我一个内推的机会，才有了第一次面试。并且第一次面试也很顺利，居然过了，这是我没想到的。直到多年后我和面试官又在一个公司的时候，才知道原因。他的意思是：看在我这么努力自学编程的份上，愿意给我一个机会。

虽然人生很艰难，但很有可能，遇到一个愿意给你机会的人，就能改变你的命运。

正式工作

第一年

在正式的项目中写代码和在学习时写代码是不一样的。你必须得考虑这样写安不安全，会不会引起 BUG，会不会引起性能问题。在工作的第一年，写业务代码对我的提升非常大。

第一年的主要任务，就是提升前端基础能力。因此我看了很多 JavaScript 的书籍来提升自己的水平：

1. JavaScript高级程序设计（第三版）
2. 高性能JavaScript
3. JavaScript语言精粹
4. 你不知道的JavaScript（上中下三卷）
5. ES6标准入门
6. 深入浅出Node.js

这些书都是非常经典的书籍，有几本我还看了好几篇。

除了看书外，我还做了百度前端技术学院 2017 年的任务，它比 2016 年的任务（转行时做的是 2016 年的任务）更有难度和深度，非常适合进阶。

另外还学习了 jquery 和 nodejs。jquery 是工作中要用，nodejs 则是出于兴趣学习的，没有多深入。

第二年

到了第二年，写业务代码对于我来说，已经提升不大了，就像一个熟练工一样。而且感觉前端方面掌握的知识已经足够把工作做好了。于是我就想，为了成为一名顶尖的程序员，还需要做什么。我在网上查了很多资料，看了很多前辈的回答，最后决定自学计算机专业。

我制定了一个自学计算机专业的计划，并且减少花在前端上的时间。因为说到底，基础是地基。基础打好了，楼才能建得高。

计算机系统要素

计算机系统要素是我制订计划后开始学习的第一本书。它主要讲解了计算机原理（1-5章）、编译原理（6-11章）、操作系统相关知识（12章）。不要看内容这么多，其实这本书的内容非常通俗易懂，翻译也很给力。每一章后面都有相关的实验，需要你手写代码去完成，堪称理论与实践结合的经典。

这里引用一下书里的简介，大家可以感受一下：

本书通过展现简单但功能强大的计算机系统之构建过程，为读者呈现了一幅完整、严格的计算机应用科学大图景。本书作者认为，理解计算机工作原理的最好方法就是亲自动手，从零开始构建计算机系统。
通过12个章节和项目来引领读者从头开始，本书逐步地构建一个基本的硬件平台和现代软件阶层体系。在这个过程中，读者能够获得关于硬件体系结构、操作系统、编程语言、编译器、数据结构、算法以及软件工程的详实知识。通过这种逐步构造的方法，本书揭示了计算机科学知识中的重要成分，并展示其它课程中所介绍的理论和应用技术如何融入这幅全局大图景当中去。
全书基于“先抽象再实现”的阐述模式，每一章都介绍一个关键的硬件或软件抽象，一种实现方式以及一个实际的项目。完成这些项目所必要的计算机科学知识在本书中都有涵盖，只要求读者具备程序设计经验。本书配套的支持网站提供了书中描述的用于构建所有硬件和软件系统所必需的工具和资料，以及用于12个项目的200个测试程序。
全书内容广泛、涉猎全面，适合计算机及相关专业本科生、研究生、技术开发人员、教师以及技术爱好者参考和学习。

做完这些实验，让我有了一个质的提升。以前感觉计算机就是一个黑盒，但现在不一样了。我开始了解计算机内部是如何运作的。明白了自己写的代码是怎么经过编译变成指令，最后在 CPU 中执行的。也明白了指令、数据怎么在 CPU 和内存之间流转的。

这本书所有实验的答案我都放在了 github 上，有兴趣不妨了解一下。

Vue

这一年还学会了 Vue。除了熟读文档外，还为了研究源码而模仿 Vue1.0 版本写了一个 mini-vue。不过学习源码对于我写业务代码并没有什么帮助。如果不是出于兴趣去研究源码，最好不要去学，熟读文档就能完全应付工作了。如果是为了面试，那也不需要阅读源码。只需要在网上找一些质量高的源码分析文章看一看，作一下笔记就 OK 了。

为什么我不建议阅读源码？因为阅读源码效率太低，而且相对于你的付出，收益并不大。到后面 Vue 出了 3.0 版本时，我也是有选择地阅读部分源码。

第三年

第三年有大半年的时间浪费在王者荣耀上，那会天天只想着冲荣耀，根本没心思学习。后来终于醒悟过来了，王者荣耀是我成为顶级程序员的阻碍。于是痛定思痛，给戒掉了。

由于打王者的原因，第三年没学习多少新知识。基本上只做了三件事：

1. 写了几个 Vue 相关的插件和项目。
2. 将过去所学的前端知识，整理了一下放在 github 上，有空就复习一下。
3. 学习数据结构与算法。

数据结构与算法

数据结构和算法有什么用？学了算法后，我觉得至少会懂得去分析程序的性能问题。

一个程序的性能有问题，需要你去优化。如果学过数据结构和算法，你会从时间复杂度和空间复杂度去分析代码，然后解决问题。如果没学过，你只能靠猜、碰运气来解决问题。

理论知识上，我主要看的是算法这本书，课后习题没做，改成用刷 leetcode 代替。目前已经刷了 300+ 道题，还在继续刷。不过由于数学差，稍微复杂一点的算法知识都看不懂，效果不是很好。

第四年

第四年，也就是今年（2020），是我重新奋斗的一年。今年比以往的任何一年都要努力，每天保证 3 小时以上的学习时间。如果实在太忙了，达不到要求，那就改天把时间补上。附上我今年的学习时长图（记录软件为 Now Then）：

今年我做了非常多的事情：

1. 研究前端工程化。
2. 学习操作系统。
3. 学习计算机网络。
4. 学习软件工程。
5. 学习 C++。
6. 学英语。

前端工程化

研究前端工程化的目的，就是为了提高团队的开发效率。为此我看了很多书和资料：

• 高性能网站建设指南
• 高性能网站建设进阶指南
• Web性能权威指南
• Chrome DevTools
  ...

研究了一年的时间，写了一篇质量较高的入门教程——手把手带你入门前端工程化——超详细教程。除此之外，还有其他工程化相关的一系列文章：

• 前端性能和错误监控
• 前端项目自动化部署——超详细教程（Jenkins、Github Actions）
• ESlint + stylelint + VSCode自动格式化代码(2020)
• 前端性能优化 24 条建议（2020）

操作系统

操作系统是管理计算机硬件与软件资源的计算机程序。通常情况下，程序是运行在操作系统上的，而不是直接和硬件交互。一个程序如果想和硬件交互就得通过操作系统。

如果你掌握了操作系统的知识，你就知道程序是怎么和硬件交互的。

例如你知道申请内存，释放内存的内部过程是怎样的；当你按下 k 键，你也知道 k 是怎么出现在屏幕上的；知道文件是怎么读出、写入的。

对于操作系统，我主要学习了以下书籍：

1. x86汇编语言:从实模式到保护模式
2. xv6-chinese
3. 操作系统导论

然后做 MIT6.828 的实验，实现了一个简单的操作系统内核。

计算机网络

计算机网络的作用主要是解决计算机之间如何通信的问题。

例如 A 地区和 B 地区的的计算机怎么通信？同一局域网的两台电脑又如何通信？学习计算机网络知识就是了解它们是怎么通信的以及怎么将它们联通起来。

对于计算机网络，我主要学习了以下书籍：

1. 计算机网络--自顶向下
2. 计算机网络
3. HTTP权威指南
4. HTTP/2基础教程

并且做了计算机网络--自顶向下的实验。

软件工程

软件工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。它涉及程序设计语言、数据库、软件开发工具、系统平台、标准、设计模式等方面。

学习以下书籍：

1. 代码大全（第2版）
2. 重构（第2版）
3. 软件工程

软件工程是一门非常庞大的学科，我只学习了一点皮毛。主要学习的是关于代码怎么写得更好、结构组织更合理的知识，这需要一边学习一边在工作中运用。

C++

学习 C++ 其实是为了研究 nodejs 源码用的，看的这本书C++ Primer 中文版（第 5 版）。

英语

我从转行开始就一直在学习英语，不过今年花的时间比较多。

英语对于程序员的好处非常非常多，就我知道的有：

1. 可以用 google 和 stackoverflow 来解决问题。
2. 知道怎么给变量、函数起一个好的命名。
3. 很多流行的软件都是国外程序员写的，有问题你可以直接看文档以及和别人交流。

在我转行前英语词汇量只有几百，三年多过去了，现在词汇量有 6000（都是用百词斩测的）。

写作

写作的好处是非常多的，越早写越好。我还记得第一篇文章是 2017 年 2 月发表的，是我工作后的第 13 天，发表在 CSDN 上。

个人认为写作的好处有三点：

1. 锻炼你的写作能力。一般情况下，写得越多，写作能力越好。这个好，不是说你的文章遣词造句有多好，而是指文章条理清晰，通俗易懂，容易让人理解。
2. 写作其实是费曼学习法的运用，帮助自己加深理解所学的知识。有没有试过，学完一个知识点后，觉得自己懂了。但让你向别人讲述这个知识点时，反而吞吞吐吐不知道怎么讲。其实这是没理解透才会这样的，要让别人明白你在表达什么，首先你得非常熟悉这个知识点。一知半解是不可能把它讲明白的，所以写作也是在帮你梳理知识。
3. 增加自己的曝光度。在我三年多的程序员生涯中，一共写了 50 多篇文章，因此在一些平台上也收获了不少赞和粉丝。因为我写的某些文章质量还行，不少大厂的程序员找过我，给我内推。不过由于个人学历问题，基本上都没下文...

总之一句话，写作对你只有好处，没有坏处。

学习

有选择的学习

我觉得学习一定要有非常清晰的目标，知道你要学什么，怎么学。对于前端来说，我认为很多框架和库都是不用学的。例如前端三大框架，没有必要三个都学，把你工作中要用的那个掌握好就行。

比如你公司用的是 Vue，就深入学习 Vue，如果要看源码就只看重点部分的源码。例如模板编译、Diff 算法、Vue 原生组件实现、指令实现等等。

剩下的两个框架 React、Angular 做个 DEMO 熟悉一下就行，毕竟原理都是相通的。等你公司要上这两个再深入学习，不过也不建议阅读源码了，太累。看别人写的现成的源码分析文章就好。

其他的，像 easyui、Backbone.js、各种小程序... 用不到的坚决不学，浪费时间。用的时候看文档就行了，当然，如果有兴趣了解如何实现也是可以的。

学习方法

我觉得好的学习方法非常重要，对我比较有用的两个是：

1. 费曼学习法。
2. 学习一个知识点，最好把它吃透。

费曼学习法在《写作》一节中已经说过了，这里着重说说第二个。

你有没有过这种感觉：觉得自己会的东西很多，但其实掌握的知识很多都停留在表面上，别人要是往深一问，就懵逼了。

我以前就有过这种感觉，主要问题出在对知识的学习仅停留在浅尝即止的状态。就是学习新知识，能写个 DEMO，就觉得自己学得差不多了。这种学习方法是很有害的，首先知识存留度不高，其次是浪费时间，因为很快就会忘掉。

后来我尝试改正这种状态，在学习新的知识点时，时常问自己三个问题：

1. 这是什么？
2. 为什么要这样？可以不这样吗？
3. 有没有更好的方式？

当然，不是所有问题都能适用灵魂三问，但它适用大多数情况。

举个例子：看过性能优化相关文章的同学应该知道有这么一条规则，要减少页面上的 HTTP 请求。

这是什么？

先了解一下 HTTP 请求是啥，查资料发现原来是向服务器请求资源用的。

为什么要减少 HTTP 请求？

查资料发现：HTTP 请求需要经历 DNS 查找，TCP 握手，SSL 握手（如果有的话）等一系列过程，才能真正发出这个请求。并且现代浏览器对于 TCP 并发数也是有限制的，超过 TCP 并发数的 HTTP 请求只能等前面的请求完成了才能继续发送。

我们可以打开 chrome 开发者工具看一下一个 HTTP 请求所花费的具体时间。

这是一个 HTTP 请求，请求的文件大小为 28.4KB。

名词解释：

1. Queueing: 在请求队列中的时间。
2. Stalled: 从TCP 连接建立完成，到真正可以传输数据之间的时间差，此时间包括代理协商时间。
3. Proxy negotiation: 与代理服务器连接进行协商所花费的时间。
4. DNS Lookup: 执行DNS查找所花费的时间，页面上的每个不同的域都需要进行DNS查找。
5. Initial Connection / Connecting: 建立连接所花费的时间，包括TCP握手/重试和协商SSL。
6. SSL: 完成SSL握手所花费的时间。
7. Request sent: 发出网络请求所花费的时间，通常为一毫秒的时间。
8. Waiting(TFFB): TFFB 是发出页面请求到接收到应答数据第一个字节的时间总和，它包含了 DNS 解析时间、 TCP 连接时间、发送 HTTP 请求时间和获得响应消息第一个字节的时间。
9. Content Download: 接收响应数据所花费的时间。
   从这个例子可以看出，真正下载数据的时间占比为 13.05 / 204.16 = 6.39%。文件越小，这个比例越小，文件越大，比例就越高。这就是为什么要建议将多个小文件合并为一个大文件，从而减少 HTTP 请求次数的原因。

有没有更好的方式？

使用 HTTP2，所有的请求都可以放在一个 TCP 连接上发送。HTTP2 还有好多东西要学，这里不深入讲解了。

经过灵魂三问后，是不是这条优化规则的来龙去脉全都理清了，并且在你查资料动手的过程中，知识会理解得更加深刻。

掌握了这种学习方法，并且时刻运用在学习中、工作中，突破瓶颈只是时间的问题。

总结

下面提前回答一下可能会有的问题。

百度前端技术学院

百度前端技术学院 2017 年及往后的任务，如果没有报名，那就只能做部分任务。2016 年的任务则由于百度服务器的问题，很多题的示例图都裂了。这个其实是有解决方案的，那就是看别人的答案。把别人的源码下载下来，用浏览器打开 html 文件当示例图看。这两年的任务我都做了大部分，附上答案：

1. 百度前端技术学院2016任务
2. 百度前端技术学院2017任务

学历提升

我从 18 年开始，已经报考了成人高考大专，19 年报了自考本科。大专明年 1 月就能毕业，自考本科比较难，可能 2021 年或 2022 年才能考下来。

写在最后

从转行到现在，已经过去 3 年多了。不得不说转行当程序员给了我人生第二次机会，我也很喜欢这个职业。不过这几年一直都是在小公司，导致自己的技术和视野得不到很大的提升。所以现在的目标除了学习计算机专业外，就是进大厂，希望有一天能实现。

虽然今年已经 32 了，但我对未来仍然充满希望。努力地学习，努力地提升自己，为了成为一名顶尖的程序员而努力。