前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

大部分人都是这种状态，大学期间，学的都是理论知识，做的都是约定俗层的项目，和实际工作中的项目还是有很大差异的，也可能是因为你接触的这部分正是前端中比较棘手的部分，刚工作，不要气馁，也不要有太大的心理负担，年轻嘛，有试错的资本，不过压力肯定是要有的，多问问带你的人，或者一些前端前辈，肯定比自己研究强，无师自通的人太少了。

学习阶段第一阶段

主要内容包括PC端网站布局、HTML5+CSS3基础，古老的jQuery、AJAX、bootstrap还是要了解一点的。
jQuery就是javascript中的一个函数库，一个js文件，是把js中比较复杂的东西封装成一个库，能够让人们在开发过程中尽可能的少写多做。
ajax可以实现不刷新页面更新网页、在页面加载后从服务器请求数据、在页面加载后从服务器接收数据、在后台向服务器发送数据。
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。

Bootstrap主要功能实现：

• 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
• CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
• 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
• JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
• 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

第二阶段

JavaScript高级程序设计，主要内容包括原生JavaScript交互功能开发、面向对象进阶与ES5/ES6/ES7应用、JavaScript工具库自主研发、jQuery经典交互特效开发、前端工程化与模块化应用等。
javaScript是运行在浏览器端的脚本语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScript是浏览器解释执行的。

JavaScript主要包括：
数组、表格、数据类型、运算符、对象、函数、垃圾回收、读取元素的样式、通过document获取节点元素、正则表达式、实现图片上传并预览、整合JqGrid完整实例、DOM规范中的MutationObserver接口、JavaScript中的File API、Streams API、Web Cryptography API、客户端存储、JavaScript代码重构、JavaScript API、网络请求与远程资源等。

第三阶段

Node.js后端开发、Vue.js、React、Angular是目前流行的三大前端框架，本质上都是一样的，根据实际开发需求，学一个即可，大同小异。

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型， 让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。

Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言。其本质上来说也是js代码。

Vue.js主要包含：
动态绑定v-bind、常用标签、组件化开发、实现树形结构、双向绑定原理、插槽slot与vue导入导出、vue webpack打包原理、使用vue-cli（vue脚手架）快速搭建项目、
Vue路由（vue-router）、ES6 promise、Axios

第四阶段

H5、微信小程序，有精力的也可以学习一下，现在移动端开发已经是一个大的趋势，实际开发中，这方面的需求已经越来越多了。

学习目录

|── 前端工具
|   ├──VS Code 的使用
|   ├──Git 使用
|   ├──Sublime Text 的使用
|   ├──WebStorm 的使用
|   ├──GitHub 的使用
|   ├──VS Code 的使用累积
|   ├──Chrome 浏览器
|──HTML
|   ├──认识 Web 和 Web 标准
|   ├──浏览器的介绍
|   ├──初识 HTML
|   ├──HTML 标签：排版标签
|   ├──HMTL 标签：字体标签和超链接
|   ├──HTML 标签：图片标签
|   ├──HTML 标签：图文详解
|   ├──HTML5 详解
|   ├──HTML5 举例：简单的视频播放器
|   ├──HTML 详解（二）
|   ├──HTML 详解（三）
|   └──HTML 基础回顾
|──CSS 基础
|   ├──CSS 属性：字体属性和文本属性
|   ├──CSS 属性：背景属性
|   ├──CSS 样式表和选择器
|   ├──CSS 选择器：伪类
|   ├──CSS 样式表的继承性和层叠性
|   ├──CSS 盒模型详解
|   ├──浮动
|   ├──CSS 属性：定位属性
|   ├──CSS 案例讲解：博雅互动
|   ├──CSS3 选择器详解
|   ├──CSS3 属性详解（一）
|   ├──CSS3 属性详解：动画详解
|   ├──CSS3 属性：Flex 布局图文详解
|   ├──CSS3 属性：Web 字体
|   ├──SaaS 入门
|   ├──浏览器的兼容性问题
|   └──CSS3 的常见边框汇总
|──CSS 进阶
|   ├──准备
|   ├──CSS 中的非布局样式
|   ├──CSS 布局
|   ├──网页开发和设计中的字体常识
|   ├──如何让一个元素水平居中
|   ├──CSS 开发累积
|   ├──CSS 文章推荐
|   ├──CSS 的一些小知识
|   └──CSS 面试题
|──JS 基础
|   ├──编程语言
|   ├──JS 简介
|   ├──变量
|   ├──变量的数据类型：基本数据类型和引用数据类型
|   ├──基本数据类型
|   ├──typeof 和数据类型转换
|   ├──运算符
|   ├──流程控制语句
|   ├──对象简介
|   ├──基础包装类型
|   ├──内置对象
|   ├──数组
|   ├──函数
|   ├──作用域和变量提升
|   ├──预编译
|   ├──this 指向
|   ├──call、apply 和 bind
|   ├──高阶函数
|   ├──闭包
|   ├──对象
|   ├──深浅拷贝
|   ├──原型链和原型继承
|   ├──类和构造继承
|   ├──正则表达
|   ├──事件
|   └──jQuery
|──JS 之 ES6 语法
|   ├──ES6 介绍和环境配置
|   ├──ES5 中的严格模式
|   ├──ES5 中的一些扩展
|   ├──ES6：变量 let、const 和块级作用域
|   ├──变量的解构赋值
|   ├──箭头函数
|   ├──剩余参数和扩展运算符
|   ├──字符串、数据和对象的扩展
|   ├──内置对象扩展：Set 数据解构
|   ├──Promise 入门详解
|   ├──ES7：async 函数详解
|   └──ES6：Symbol
|──JS 进阶
|   ├──var、let、const 的区别
|   ├──数据的赋值
|   ├──JS 开发累积
|   ├──call、apply、bind 的区别
|   ├──this
|   ├──作用域与闭包
|   └──创建对象和继承
|──前端基本功
|   ├──CSS 基础练习
|   └──DOM 操作练习
|──Ajax
|   ├──服务器分类及 PHP 入门
|   ├──Ajax 入门和发送 http 请求
|   ├──函数封装
|   ├──同源和跨域
|   └──模版引擎
|──移动 Web 开发
|   ├──Bootstrap 入门
|   ├──Bootstrap 使用
|   └──Less 详解
|──Node.js 和数据库
|   ├──Node.js 介绍
|   ├──Node.js 的特点
|   ├──Node.js 开发环境安装
|   ├──Node.js 模块化规范
|   ├──Node.js 内置模块
|   ├──Node.js 操作 MySQL 数据库
|   ├──CommonJS
|   ├──ES6
|   ├──JS 模块化：AMD
|   ├──JS 模块化：CMD
|   ├──JS 模块化：ES6
|   ├──KOA2
|   ├──Node.js 代码举例
|   ├──WebSocket
|   └──事件驱动和非阻塞机制
|──Vue 基础
|   ├──指令系统
|   ├──v-on 事件修饰符
|   ├──系统指令（二）
|   ├──举例：列表功能
|   ├──自定义过滤器
|   ├──自定义按键修饰符 & 自定义指令
|   ├──Vue 实例的生命周期函数
|   ├──Vue 中的 Ajax 请求
|   ├──Vue 动画
|   ├──Vue 组件的定义和注册
|   ├──Vue 组件之间的传值
|   ├──Vue-router 路由
|   ├──Vue.js 在开发中的常见写法累积
|   ├──Vue 开发累积
|   └──Vue 组件
|──React 基础
|   ├──React 介绍
|   ├──JSX 语法介绍
|   ├──React 组件：生命周期
|   ├──React 组件：常见属性和函数
|   ├──React 中绑定 this 并给函数传参的方法
|   ├──React  单向数据绑定
|   ├──React 路由的使用
|   ├──Ant Design 的基本使用
|   ├──AntD 框架的踩坑记录
|   ├──AntD 框架 upload 组件自定义
|   └──React Native 初识
|──前端面试
|   ├──面试必看
|   ├──面试题累积
|   └──网友面经
|──前端进阶
|   ├──代码规范
|   ├──常见专有名词
|   ├──数组的常见操作
|   ├──前端监控技术
|   ├──lazyload & 防抖动和节流阀
|   ├──Vue 开发累积
|   └──前端的几道题目
|──前端综合
|   ├──2019 Web 前端入门自学路线
|   ├──前端学习分享
|   ├──Express
|   ├──CSS 开发总结
|   ├──Ajax 相关
|   ├──HTML 相关
|   ├──Json 字符串的解析和遍历
|   ├──Json 相关
|   ├──前端博客推荐
|   ├──前端开发累积
|   ├──前端语录
└──扩展阅读
    ├──2020 Web 前端最新导航
    ├──GitHub 项目推荐
    ├──网站推荐
    ├──前端文章推荐
    ├──上海有哪些互联网大厂
    ├──北京有哪些互联网大厂
    └──深圳有哪些互联网大厂

推荐文章

从0开始学推荐

零基础可以学前端吗 - 知乎

学前端先，你应该了解为什么要学前端，有哪些坑

学前端的三大忠告 - 知乎

如果是自学，那么推荐看看现在的文章

自学前端怎么学 - 知乎

一搬前端的工作内容

前端工程师的主要工作是什么 - 知乎

资料

给大家分享我收集整理的各种学习资料，前端小白交学习流程，入门教程等回答-下面是学习资料参考。

前端学习交流、自学、学习资料等推荐 - 知乎