前端从零自学路线，免费视频教程总结

前言

前端从零自学路线，哪怕你一丁点基础都没有，也可以按照本教程设置的路线由简到难的学下去。如能坚持独立看完，找一份前端开发的工作不难。

编辑器

• WebStorm安装与使用
• WebStrom破解和汉化
  如实在破解不了，可以某宝花1块钱买现成的

HTML 和 CSS 基础

• 初识HTML+CSS
• 从 psd 到 html

页面布局

• 如何用CSS进行网页布局
• 手把手教你实现电商网站开发
• 企业网站综合布局实战
• 网站首页布局搭建

HTML5 和 CSS3

• HTML5之元素与标签结构
• 十天精通CSS3
• CSS3实现漂亮ToolTips效果
• CSS3实现网页平滑过渡效果
• CSS3实现“图片阴影效果

Emmet

Emmet-前端开发神器

Flex

• Flexbox 布局
• Flex 布局教程：语法篇
• Flex 布局教程：实例篇

中期考核

下载标注图（https://share.weiyun.com/5opxTkI），并用 HTML + CSS 完成该项目

要求：

1. CSS 里不能出现 float，出现一处代表考核失败
2. 布局尽可能不用的或者完全不用 position，每出现一处 position ，扣一分

---

JavaScript

• JS 基础
• JS 进阶
• DOM探索之基础详解篇
• 回到顶部效果
• 浏览器开发者工具使用技巧
• 用JavaScript实现图片缓慢缩放效果
• 用 JS 实现购物车效果
• 用 JS 实现放大镜效果
• 日期选择组件

命令行工具

安装Cmder
命令行教程

CSS预处理器

sass入门

Git

• Git 简易教程
• GitHub 客户端教程

Vue 入门

• Vue 2.5 入门
• Vue 入门
• Vue官网教程 下面的框选部分至少看三遍以上 ↓
  
  

  image.png
• Vue 开发购物车

• Vue 官网练手小项目，只需要关注红色框选的部分，其他的不用看。首先不要看代码，根据效果自己去实现，如果自己实现不出来，再看代码。如果代码看不懂，就对着敲一遍，如果还不懂，就再敲一遍、三遍，十遍，直到自己能独立实现出来为止

  
  
  

  image.png

Vue 进阶

• 安装 nodeJS 最新版
• npm 入门
• 3小时速成 Vue2.x 核心技术
• Vue 开发去哪网 APP
• vue-router 文档，过一遍
• vuex 文档，过一遍

ES6

• ES6 入门
• 购买书籍《ES6标准入门》第三版，也可在线阅读
  看完下面的框选章节，没有框选的部分以后再看
  
  

  image.png
• Promise 入门

ES6 练习

• 通过一个简单的 TODO 项目来练习 ES6 和 Vue
  把下代码克隆下来，阅读 README 文档
• 把 Vue 官网练手小项目 改为 ES6

HTTP（以下课程过一遍即可，无需敲代码）

• 互联网协议入门
• 互联网协议入门 二
• DNS 原理入门
• HTTP协议原理（只看前三章）
• 什么是跨域
• 如何上线一个 web 网站
• 把《图解 HTTP》书过一遍

---

如已独立完成以上全部内容，恭喜你已经入门前端！

---

前端进阶学习路线待更新...

---

2019-07-10 更新：
更新了HTTP 相关的内容