零基础转行前端,怎么自学才能拿到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),抱团学习

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云鹿师兄

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值