零基础转行前端，怎么自学才能拿到10k以上薪资

我是云鹿，从事前端五年多了，也是从自学过来的，非常了解小白自学的难处，利用空余时间写下这篇文章，非常干货，适合零基础的伙伴阅读，觉得有帮助的伙伴可以点赞收藏！

只要按照我列出的知识点和学习路线坚持学下去，保底10k以上薪资。其实学前端最难的不是知识点，最难的是坚持，如果你决定了要进入这一行，一定要坚持走下去！加油 ！！

一、准备工作：

（主要针对小白，有基础的伙伴可以跳过）

1）开发软件：官网下载Visual Studio Code - Code Editing. Redefined

64位电脑可直接保存安装包：VsCode 64位 提取码:by45

2）一套系统的视频教程

零基础的伙伴刚学不太建议看文档，看视频会比较好，通俗易懂。后期可以通过文档或者书籍查漏补缺，我会在下面各个阶段放上文档链接，需要的伙伴到时候可以查看。

b站、慕课网、腾讯课堂等都有很多免费的视频，或者某宝某鱼也有卖教程的。找不到的伙伴可以微(YL25796)我领取（我自己整理的一套视频教程：练习，代码，项目都有）。

3）加群抱团学习

自学的伙伴很容易遇见各种各样的问题无法独立解决，遇到问题发到群里大家一起讨论，互帮互助，效率会高很多。

v(YL25796)，加入前端学习营，抱团学习

4）学习周期，学到什么程度可以找工作

学习周期：对于有基础的伙伴大概能在4个月左右可以学完，对于完全0基础的伙伴可能稍慢一些大概6-8个月。

就业：至少要达到能独立完成项目的水平。这就意味着你至少要把基础的html、css、js学扎实，框架至少要掌握一个vue/react，自己动手做两到三个项目。

接下来是系统的前端学习路线，会告诉你每个阶段都是做什么的、需要掌握的内容、要掌握到什么水平以及文档书籍推荐

二、前端学习路线及学习资源（文档/书籍）

第一阶段：HTML、CSS

1）HTML：

超文本标记语言, 用来制作网页的一门语言，由标签组成，如图片、链接、视频标签等组成。 它负责网页的结构层，相当于网页的骨架。

下面是纯html写的页面，可以看出页面是比较丑的而且很混乱，后期可以通过css修改文本、图片的样式并进行布局，使页面更美观。

学习内容：

html语法规范、html基本结构、标签语义化、网页三要素、SEO、注释、标签、属性。

网站推荐（文档）：

w3school 在线教程
菜鸟教程 - 学的不仅是技术，更是梦想！

达标水平：html是前端最简单最基础的部分，主要掌握标签的用法及含义。比如给你一个图片，你知道应该用img标签就可以了。

2）CSS：

CSS 是层叠样式表，用于设置 HTML页面中元素的排版、大小、颜色、背景等属性以及页面的布局和外观显示样式，使页面看起来更美观。

下面是加上css的页面效果，但只是静态的页面，没有交互动态效果。

学习内容：

Css简介、Css书写规范、选择器、常用属性（字体、文本）、引入方式、复合选择器、元素显示、背景、三大特性、盒子模型、边框、阴影、浮动、定位、字体图标、布局技巧等

网站推荐（文档）：

w3school 在线教程
菜鸟教程 - 学的不仅是技术，更是梦想！

达标水平：这个阶段主要多练习多写页面，熟练掌握CSS核心语法，掌握多种布局技巧，能够独立完成前端静态页面。做到拿到任意一张UI设计图可以精准的还原出静态页面。

第二阶段：移动端

移动端即通过手机、平板等移动设备浏览的页面。

学习内容：

1）H5C3新特性：
H5新增标签、H5新增属性、多媒体、C3新增选择器、C3盒子模型、2D 3D转换、动画
2）移动适配：
移动端调试方式、视口、分辨率、流式布局(百分比)、Flex布局、Rem、Less、媒体查询、屏幕适配
3）响应式布局：
Bootstrap、栅格系统、媒体查询、组件、Flex布局

网站推荐（文档）：

Flex 布局语法教程 | 菜鸟教程 (runoob.com)
Bootstrap 教程 | 菜鸟教程 (runoob.com)

达标水平：了解 PC屏幕与移动屏幕本质上的差异，结合视口、媒体查询、rem 等基础知识整合出稳定高效的移动屏幕适配方案。利用html css及移动端布局技巧，独立实现移动端H5开发适配各种移动设备并且能够处理各种兼容问题。

第三阶段：JavaScript

运行在客户端的脚本语言，负责界面上的动态交互效果，是前端开发的核心技能，重要性大于前面两个，难度也更高。熟练掌握js，后期任何基于js开发的框架都会很快上手。

下面是加上js的效果，可以实现页面中各种动态交互效果，使页面更生动。

学习内容：

1）Js基础：
js简介、变量、数据类型、运算符、流程控制（分支、循环）、数组、函数、作用域、对象(创建, 属性, 方法, 内置对象, 宿主对象)
2）DOM与BOM：
DOM 概念、获取元素、事件、操作元素、节点操作、鼠标事件、键盘事件、高阶函数、window 对象、定时器、JS 执行机制、location 对象、navigator 对象、history 对象、正则表达式
3）Js高级：
面向对象、构造函数、原型、函数的定义和调用、this、 严格模式、 高阶函数、 闭包、 递归、防抖、节流 、深浅拷贝、Es6/7/8

网站/书籍推荐：

Js学习网站：  JavaScript | MDN
Js书籍推荐：JavaScript 高级程序设计 （第四版）、JavaScript 权威指南、你不知道的JavaScript（上/中/下）、 阮一峰ES6 入门教程

达标水平：熟练掌握JavaScript基础语法，培养编程思维，掌握DOM和BOM对象的常用属性和方法，能够完成网页常见的交互效果，通过 JavaScript+HTML+CSS 技术编写具有动效和交互的网页。

整理了几本电子书籍，需要的伙伴可以找我领取

(YL25796)免费领取电子书籍，加入前端学习营

第四阶段：服务器端开发

主要处理前端与后端的连接，打包数据，配置接口等问题，使前端和后端可以交互。

学习内容：

Git：Git安装并配置、Git的基本操作、Githu远程仓库、git分支和常用命令
Ajax ：客户端与服务器端、异步交互、跨域处理、ajax封装、axios使用、接口
Node：Node.js 环境配置、fs文件系统模块、path 路径模块、http模块
Npm：npm安装、配置、包管理、依赖管理、版本控制、项目初始
Webpack：基本概念、环境配置、基本使用、Webpack打包、webpack入口和出口配置、模块处理

网站推荐（文档）：

Git 安装配置 | 菜鸟教程 (runoob.com)
AJAX教程： AJAX 教程 /  Ajax - Web 开发者指南 | MDN (mozilla.org)
Node.js教程： Node.js 简介/七天学会NodeJS
npm 中文文档 | npm 中文网 (npmjs.com.cn) /  npm 包管理器简介 (nodejs.cn)
概念 | webpack 中文网 (webpackjs.com)

达标水平：能够完成前后端的联调，接口的调试等问题。

第五阶段：Vue2/3框架

框架主要是更高效快捷的开发，降低成本，让程序员更好的开发。打个比喻，就像js是面粉，吃什么自己做，而vue/react这些是面条，可以直接吃，快捷方便。

vue目前占市场份额比较高，大部分中小企业都在使用，是就业必须要掌握的技能之一。

学习内容：

vue基本概念、Vue 脚手架、Vue指令、Vue基础api（key, 计算属性, 过滤器, 侦听器） 、Vue组件（Vue组件概念, 创建和使用、Vue组件通信）、生命周期（Vue生命周期讲解、axios使用、$refs和$nextTick使用）、Vue Router 路由系统（Vue路由简介和基础使用、声明式导航、重定向和模式、编程式导航、嵌套和守卫）、Vuex 状态管理、axios 请求库等、ElementUI 的基本使用

网站推荐（文档）：

vue中文文档

达标水平：能够运用vue、vuex、vuerouter、vue-cli、webpack等实现项目开发需求，独立完成前端项目。

第六阶段：React框架

react的作用跟vue一样，同样是为了更高效快捷的开发。

但比起vue，它更复杂一点，重量级一点，但是实现大型的项目也很快速便捷，一般大厂用的居多。

学习内容：

React安装与使用、react脚手架、JSX、react组件、虚拟DOM对象、React-Router 路由、Axios、fetch、React Antd使用、Redux 、React-Hooks、TypeScript

网站推荐（文档）：

React 中文文档

达标水平：能够运用react、React-Router、Redux、react脚手架、webpack等实现项目开发需求，独立完成前端项目

第七阶段：小程序

小程序就不用说了，我们每天用的微信小程序就是这么来的。

学习内容：

AppID 申请、开发者工具、项目配置、屏幕适配、数据绑定、事件处理、生命周期、模块化、小程序各种组件与API调用、WXML、WXSS、WXS、路由、组件、Uniapp

网站推荐（文档）：

微信开放文档

达标水平：熟悉小程序的开发流程、通用组件、基本语法，基于真实需求综合运用小程序开发的相关知识，完成小程序项目开发。

---

接下来完善简历就可以去找工作了。简历要写的丰富一点，特别是对项目的描述。项目使用的技术栈、主要功能以及技术难点都要写清楚，最好加上项目的源码地址，这样面试官可以通过你的项目经历做一个初步的评估。项目经历越丰富越好，但是也不要什么项目都往简历上写，要写有实际应用价值的项目。

还有最最最最重要的一点：千万不要在简历上坑自己！在写自己的技能项时，了解，熟悉，熟练，精通要分的清。自己不会的技能项或者是只是听过这个东西有过一点点的了解，那就不要写到自己的简历上了。切记！

---

自学的伙伴可以加入前端学习营：

• 会给大家组队学习，进度相同的两人一组，一起探讨交流，互帮互助，避免一个人产生惰性。
• 整理了一套前端学习资料，免费提供给大家学习使用，有需要可以找我私发。
• 不定期组织各种小活动，促进大家学习，小项目练习、学习经验分享、电子书籍等等。

欢迎加入前端学习营(YL25796)，抱团学习