大家好，我是若川。最近组织了源码共读活动《1个月，200+人，一起读了4周源码》，已经有超50+人提交了笔记，群里已经有超1200人，感兴趣的可以点此链接扫码加我微信 ruochuan12

大家好，我是山山而川，一位零基础转行前端的小白，很荣幸受freeCodeCamp邀请给大家分享一下有关零基础学习前端的内容。

为什么写这篇文章呢

我是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和红宝书都讲过了，有时间的同学可以考虑看一下。