如何自學前端與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 ，然後回覆 福利 即可免費獲得。