前端即网站前台部分，运行在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开始学推荐

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

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

学前端的三大忠告 - 知乎

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

自学前端怎么学 - 知乎

一搬前端的工作内容

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

资料

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

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