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

云鹿师兄

已于 2022-08-22 13:07:16 修改

阅读量539

点赞数

文章标签：前端 javascript 学习

于 2022-07-27 14:37:47 首次发布

本文链接：https://blog.csdn.net/zzzhhhy/article/details/126014160

版权

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

只要按照我列出的知识点和学习路线坚持学下去，保底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 的基本使用

网站推荐（文档）：