一个前端工程师如何入门？

 第一阶段：前端基础

（HTML / CSS / HTML5 / CSS3 / JavaScript ）

干货文章：

• 初识HTML+CSS

• 【学习笔记】HTML基础完结篇

• html基础知识——css样式①

• 史上最全Html和CSS布局技巧

• 面试题汇总 HTML+CSS篇

• CSS 最核心的几个概念

• HTML5之元素与标签结构

• 基于HTML5和CSS3构建3D模型

• 10个最常见的 HTML5 面试题及答案

• 9款超绚丽的HTML5/CSS3应用和动画特效

• 移动手机平台的HTML5前端优化指南

• 一张思维导图搞定CSS3全部新特性

• 纯CSS3画出小黄人并实现动画效果

• CSS3动画开发指南之逐帧动画

• 三分钟学会用 js + css3 打造酷炫3D相册

• 纯HTML+CSS+JavaScript编写的计算器应用

免费推荐：

• 初识HTML+CSS

• 十天精通CSS3

• 手把手教你实现电商网站开发

 第一阶段配套的视频

• 前端零基础入门 2019版    总时长：58小时，42门课

教学目标：掌握基本的HTML/HTML5+CSS/CSS3网页布局，以及JavaScript特效，最终可以独立开发出高颜值，多特效的前端PC网页。

 第二阶段：组件化网页开发

（JavaScript深入/ jQuery/ 组件化电商网页开发）

干货文章：

• 更快学习 JavaScript 的 6 个思维技巧

• Javascript操作DOM常用API总结

• 彻底理解JavaScript原型

• JavaScript优化篇1-Loading and Execution 加载和运行

• 我们到底需不需要 jQuery

• 前端开发者都应知道的 jQuery 小技巧

• 每个程序员都会的 35 个 jQuery 小技巧

• bootstrap学习总结，常看

• 如何高效开发企业级电商的前端？

• 学习组件化开发完整AndroidApp

• 吐槽前端组件化的踩坑之路

• 基于SSM+Shiro+Redis+Bootstrap的超市管理系统(电商网站)

• 基于 Node.js + Express + mongoDB + Bootstrap 搭建的电影网站

• Spring+SpringMVC+MyBatis从零开始搭建一个精美且实用的管理后台

免费推荐：

• JavaScript深入浅出

• jQuery基础

• 基于bootstrap的网页开发

 第二阶段配套的视频

• 组件化网页开发 2019版    总时长：45小时，20门课

教学目标：学会JS深入技能变量、函数作用域，学会基础JavaScript库jQuery，掌握企业级开发思想——组件化开发, 实现网页的高效开发，达到专业级编码水平。

 第三阶段：WebAPP开发与小程序

（HTML5移动开发/ 移动基础 / 小程序基础）

干货文章：

• 学习html5存储数据和缓存

• HTML5学习–SVG全攻略（基础篇）

• HTML5学习–SVG全攻略（进阶篇）

• 响应式布局的三大要点

• 响应式web设计

• 响应式开发之图片响应式实战

• canvas实现 漂亮的下雨效果

• 移动web性能优化从入门到进阶

• 移动端网站提升页面加载性能的优化技巧

• 移动H5前端性能优化指南

• [Canvas前端游戏开发]——FlappyBird详解

• canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战

• 电商总结——如何打造一个小而精的电商网站架构

• Webpack模块打包飞行手册

• WebPack在项目配置中的探索

• Web APP开发技巧总结

• 再看微信小程序

• 开发者，你应当拥有一款自己的产品。

• 微信小程序开发干货合集

• 微信小程序组件化（上）

• 微信小程序组件化（下）

免费推荐：

• Hello，移动WEB

• 移动端开发框架Zepto.js入门

• 前端性能优化-基础知识认知

  第三阶段配套的视频

• WebAPP开发与小程序 2019版    总时长：54小时，23门课

教学目标：从网页开发扩展到移动开发，学会移动开发中必备的响应式/Flex，性能优化，移动适配；并且带你初体验小程序开发，快速学会新技术，为自我竞争力增加筹码。

 第四阶段：Vue与React高级框架开发

（ES6 / Vue / React.js/ 面试）

干货文章：

• 说说ES6那些事儿–ES6十问

• 用 ES6 畅快地写 JavaScript

• 深入ES6 四 字符串的括展

• ES6系列文章 Promise

• 当 better-scroll 遇见 Vue

• Vuex 2.0 源码分析（上）

• Vuex 2.0 源码分析（中）

• Vuex 2.0 源码分析（下）

• 滴滴 webapp 5.0 Vue 2.0 重构经验分享

• Vue-cli 3.0 初体验 ！

• React 是什么

• 通往全栈工程师的捷径 —— React

• React 入门实例教程

• 快速入门react

• React16+React-Router4从零打造企业级电商后台管理系统

• 最全的BAT大厂面试题整理

• BAT大厂面试流程剖析

免费推荐：

• vue2.5入门

• ES6快速入门

• ReactNative入门与进阶

 第四阶段配套的视频

• Vue与React高级框架开发 2019版    总时长：40小时，23门课

教学目标：使用主流框架Vue.js/React.js与ES6， 结合主流工具Webpack，完成电商WebApp及新闻网站项目开发，体验真实项目开发流程；最终达到企业用人标准，成为合格的前端工程师。