Web 开发
前端开发
JavaScript
前端工程师
前端入门

Web 前端怎样入门？

css+html5+javascript同时学的模式对吗？
关注者
7,457
被浏览
3,187,221

402 个回答

又过了好久，前端发展果然很快，重写了回答，以免误人子弟，以后不再更新。匿名是不想引起过多关注，没有别的意思。

直接进入正题。前端入门是一个螺旋上升的过程，既要反复看书，也必须抓紧时间实践。入门的话三个月肯定是足够了。

IFE（百度前端技术学院）是一个绝佳的练习平台，题目都是开源的。15年的学习资料比较多，而16年的题目题量较大，难度也稍大。所以我个人建议先刷点 15 年的基础题，不会做也可以参考别人的代码。

自己想搞点其他项目也是可以的，本质上就是要给自己找点事情做，绝对不能单看书。

我把这三个月大致分为三个阶段。

1. HTML + CSS
前端的入门门槛极低，体现在 HTML 和 CSS 上。运行环境就是浏览器，推荐 Chrome。你需要的只是一个编辑器，直接用 VSCode 吧。

HTML 和 CSS 不是编程语言，前者只是结构标签，后者则是样式配置，入门是非常简单的。网上资料也有很多，可以参考 MDN 。
我当时是看了一本书 Head First HTML and CSS ，比较无脑，虽然浅显易懂但价格比较感人，粗略翻一遍就可以了，不用买。
迅速刷一遍 MDN 上介绍 HTML 和 CSS 的部分，对两者有个大致印象就好，不用死记硬背，短时间记不住的。刷慕课网勉强还行，但以后查资料还是要看 MDN 的，建议一步到位，最好看英文原版的。

接下来就是学习 CSS 了，CSS 要学深入非常难，入门的话会切图就行了。推荐：

  • 《CSS 权威指南（第四版）》。第四版包含了 CSS3 的内容，不需要再看别的了。这书非常枯燥，花几天硬啃下来就好了。属性细节不必记忆，以后用到肯定要再查的。着重点放在大局上，抓住重点快速过一遍，比如盒模型、定位、弹性盒布局等。

以上内容用时 5 天左右，主要是啃《CSS 权威指南（第四版）》。下面是实践。
学了几天 HTML 和 CSS 了，应该也有点成果了。打开 IFE2015 task1，写个静态页面吧。

写不出来是正常的。可以去看下别人的代码吧，看一小部分就开窍了。忘掉的属性就查书或者查 MDN，多尝试，不断踩坑才有进步。

切完一张图后，别着急往下写。新手的代码通常会有胡乱的代码缩进、毫无章法的属性顺序等问题。

这时候应该重写。重写之前先找一份代码规范，比如 GitHub - ecomfe/spec: This repository contains the specifications. 。当然代码规范不是唯一的，只要合理及风格统一即可。

再去看一下别人提交的代码，多看几份。当然自己也要判断，不能听风就是雨啊，人家写得不好你再去重写一次，等于你也有责任对不对。

开始重写了，会发现写代码速度也快了很多。切几张页面后，应该比较熟练了。如果看到页面布局就大概知道应该怎么写了，那就可以进入 JavaScript 的学习了。

以上内容用时 10 天左右。

进阶部分可以回头再看：

  • 掌握预处理工具 Sass 或 Less，语法都差不多，不用死记硬背，一通百通
  • 阅读 Bootstrap 源码。其实用得很少了，主要是看下大量的 CSS 代码是如何组织的，以及关注栅格布局等关键实现
  • 《CSS 揭秘》，奇技淫巧合集，增长一下见识，献上膝盖就行

2. JavaScript

这是至关重要的阶段。广义的 JavaScript 可以大致分为语言特性（ECMAScript）和 Web API（DOM、BOM 等）。

  • 强烈推荐《JavaScript 高级程序设计（第3版）》，俗称红宝书。前七章大致讲语言特性，是重中之重，必须反复阅读，直至完全理解，有 C/C++ 基础的同学应该没什么问题。DOM、事件流、表单、JSON、Ajax 与最后几章也相当重要，是一些常用的 Web API。其余章节可以略读或直接跳过，比如像 XML 这种已经没用的东西就不用看了，还有那些列举大量 API 的章节，用到再查
  • 推荐《JavaScript 语言精粹》，俗称蝴蝶书。超薄的一本，半天就可以看完。JavaScript是一门有很多坑的语言，去掉坑就是“精粹”了，过一遍就好，不理解的以后回头再看。
  • ECMAScript(简称 ES) 规范在 2015 年后每年都有新特性加入，而红宝书成书时间较早，很多知识点已经跟不上了。ES6(又称 ES2015) 及以后的语言特性也是必学内容，推荐阮一峰老师的《ES6 标准入门》，但这本书以 API 居多，所以还是留个大致印象，以后写到类似的地方，查一查在新的语言特性下，有没有更简洁的写法就好，不必死记硬背
  • 强烈推荐 《你不知道的 JS》 。原版是英文的，有需要的同学可以自行搜索中文版。非常精彩的书，将 JavaScript 的细节一网打尽。前几本书里搞不懂的东西，比如 this 的指向等问题，通常都能在这里找到答案
  • 不太推荐《JavaScript权威指南》，也就是犀牛书，那就是像一本字典。我就翻过一下，没有细读，不好进一步评论
  • 评论里有提到 jQuery，我觉得完全不用看，写祖传项目的时候再学也很简单的。还是要以原生的 API 为主

以上内容用时 1 个月左右，如果有一些编程经验的话，应该没什么压力。 这些书全部刷完后，差不多就入门了，可以跟人谈笑风生了。 开始实践，IFE2016 阶段二的题基本随便刷。

进阶：

  • TypeScript。对于有静态语言经验的同学，可以直接上手，基本没有难度
  • 学会使用包管理工具 npm，学会在社区上找想要的包，如 npms.io
  • 尝试使用 webpack 构建项目，并通过 Babel 编译 ES 新特性的代码兼容旧版浏览器。配置 webpack 令人痛苦，先能跑起来就行，精细的优化可以以后慢慢调，多查点资料
  • 配置 ESLint 规范代码格式，养成良好编码习惯
  • 看一下 lodash，尝试自己用简洁的代码实现。不希望读过我回答的人还遇到下面这种情况，因为这个问题里的面试官我认识（逃

3. JavaScript 框架

这部分就比较自由了，每个人点的技能树都不一样的。前端的发展是爆炸式的，换工具比翻书还快，所以还是以看文档为主了。

目前主流框架经常被提及的是 React，Angular，Vue。知乎搜一搜就有相当多的优秀答案了。

熟练掌握至少一种框架，把 IFE2016 刷通关吧，耗时 1 个半月左右。我个人推荐 React，对提升 JavaScript 基础有很大帮助。Vue 更像是一门新语言。新人通常不用纠结框架好坏，时间长了都学会也没什么难度吧。

进阶：

  • 框架周边生态，如无数种 Redux 封装，无数种 CSS in JS 方案等
  • 造些轮子
  • 带着问题读源码
  • Node.js，Backend for Frontend
  • ……
  • 都到了这个份上，该学什么心里都有数吧，还用写么

4. 计算机基础知识

发现前端有太多的非科班选手，所以特此补充一节，不懂基础的话天花板会很低。由于本人有 OI 的经验所以稍微占点优势。

操作系统：

  • 《深入理解计算机系统》（CSAPP），入门级别的书，挑重点看一下
  • 《现代操作系统》，翻译得比较差，有条件的同学可以读英文原版，或者用 Operating Systems: Three Easy Pieces 代替
  • The Linux Programming Interface ，系统编程好书，跟前端的直接关系已经不大了，但不了解一下的话实在说不过去，不要把路子走窄了
  • Advanced Programming in the UNIX Environment (3rd Edition) （中文版《UNIX 环境高级编程》），同上面的可以一起看

计算机网络：

  • 《计算机网络 自顶向下方法》，入门的网络书，前端至少也要懂 HTTP 协议吧
  • TCP/IP Illustrated （中文版《TCP/IP 详解》），非常详细的经典，内容巨多，按需阅读吧
  • UNIX Network Programming （中文版《UNIX 网络编程》），跟上面系统编程的书一起读

算法和数据结构：

  • 《算法（第四版）》，书里是 Java 实现的，但其实并不难
  • 《算法导论》，比较学术，以实践为主的话可以略读
  • 必须刷题，加强编码水平，LeetCode 级别就足够应付大部分面试了
  • 《算法竞赛入门经典（第二版）》《算法竞赛入门经典 训练指南》，搞竞赛的基本人手一本，没接触过又感兴趣的可以看一下

编译原理：

  • 《编译原理》，俗称龙书。项目里这么多涉及到编译的东西，学一下屠龙之技也无妨啊，其实挺好玩

评论里有觉得我误导人，认为完全不可能做到，甚至说我装逼的。我必须澄清，文章里提到的都是 100% 真实经历，我不缺人脉不缺钱，又不开培训班，何况我都匿名了，装逼图个啥呢……

不过，这个答案还是禁止任何形式的转载，包括但不限于复制、扩充、改写等。

完。