如何自学前端与web前端知识体系梳理

什么是前端工程师？

总而言之前端工程师就是运用HTML/CSS/JavaScript等Web技术，在工作中配合设计师实现用户界面，和后端工程师进行数据对接，完成Web应用开发的职位。

建立学习大纲

必学内容

基础：

• HTML
• CSS
• JavaScript

进阶：

JavaScript 的三大框架，三个必学一个。

• vue.js
• react.js
• angular.js

基础知识

• HTML
  • MDN的HTML入门
  • HTML30分钟快速入门
• CSS
  • MDN的CSS入门教程
  • 学习CSS布局
• JavaScript
  • JavaScript菜鸟教程
  • 慕课网JavaScript入门篇
• Web
  • 当你在浏览器中输入google.com并按下回车后发生了什么
  • 互联网协议入门

中级知识

• HTML5
  • MDN的HTML5入门教程
  • 网易云课堂HTML5入门
• CSS3
  • CSS3菜鸟教程
  • Gitbook的CSS3教程
• Style Guide
  • 腾讯alloteam前端代码规范
  • 百度ecomfe前端代码规范
  • Google HTML/CSS Style Guide
  • Google JavaScript Style Guide
• Responsive Design
  • 响应式设计指南
  • 自适应网页设计——阮一峰
  • 什么是响应式web设计？怎样进行？
• Web Animation
  • CSS动画
  • Canvas动画教程
  • Learn to Create Animations in JavaScript
• Bootstrap
  • Bootstrap菜鸟教程
  • 慕课网玩转Bootstrap
• jQuery
  • jQuery菜鸟教程
  • 慕课网jQuery基础
• Ajax
  • jQuery Ajax快速入门
  • jQuery Ajax全解析

高级知识

• w3c标准

  • Web Platform Docs

• ECMA6

  • 阮一峰ECMAScript6入门

• 测试

  • FEX前端自动化测试探索
  • 测试框架Mocha实例教程
  • Karma和Jasmine自动化单元测试

• 自动化构建

  • 流式自动化构建工具Gulp
  • 前端工程构建工具fis
  • Web项目脚手架生成工具Yeoman
    • 用Yeoman和AngularJS做Web应用

• 模块/包管理

  • npm
    • npm使用介绍
    • 快速搭建 Node.js 开发环境以及加速 npm
  • Sea.js
    • 5分钟上手Sea.js
  • RequireJS
  • ES6模块

• 预处理器

  • Haml
    • Tutorial
    • HTML代码简写法：Emmet和Haml
  • Sass
    • Sass入门
  • TypeScript
    • TypeScript Handbook（中文版）

• 框架

  • React
    • 入门实例教程
  • Vue
    • vue.js教程
  • Angular

服务器端

• Nodejs
  • Node入门
  • 7天学会NodeJS
• MongoDB
  • NodeJS与MongoDB交互

在线资源

• 大前端导航
• Frontend Stuff
• Frontend directory
• Frontend Interview Questions

在线教程

• 菜鸟教程
• 极客学院Wiki
• Mozilla开发者网络
• front-end-web-development on Treehouse
• Learn to Code Advanced HTML/CSS

在线书籍

• Front-end Developer HandBook
• Front-end Database
• Frontend Notebook

推荐书目

• 基础

  • 深入浅出HTML与CSS、XHTML
  • HTML & CSS设计与构建网站
  • Pro Git中文版
  • 鸟哥的linux私房菜

• 中级

  • Head First HTML5 Programming
  • JavaScript权威指南
  • JavaScript语言精粹
  • JavaScript & jQuery交互式Web前端开发
  • 深入浅出Ajax

• 高级

• JavaScript高级程序设计

• HTML5高级程序设计

• CSS权威指南

• 深入浅出Node.js

面试

• 目前最全的前端开发面试题及答案

• 前端面试常考问题整理，按模块知识点分类

• 全栈工程师培训材料

免费视频学习资料

• 完整学习视频

• Vue2.0+Node.js+MongoDB全栈打造商城系统
  

• node.js
  

• Vue+Node+MongoDB高级全栈
  

最后

以上就是我对自学前端的几点建议，希望对你们有帮助。
最后，对 WEB 前端 学习感兴趣请长按二维码关注一波，我会努力带给你们价值，如果觉得本文对你哪怕有一丁点帮助，请帮忙点个赞。

以上视频学习资料只需要关注公众号： BiaoChenXuYing ，然后回复 福利 即可免费获得。