前端学习路线(前端零基础)

Hello! 我是程序员米粉。目前在一家世界500强上市公司做全栈开发,曾担任10多人的前端小组的组长,喜欢分享各种前端技术、以前受人帮助,所以我也会传承这种助人为乐的精神。

前言

今天我们来简单聊一聊前端程序员的成长,学习什么前端技术,以及怎么学,如何从一个小白如何独当一面。前端的发展从我刚毕业那会只要会点 HTML、css、JavaScript、jquery 就有很多公司
抢着要,甚至前端开发那个岗位,也要会点 PS 设计。我曾经也做过,自己设计自己开发页面,自己也跟着用 php 开发。不过现在好多了,不需要自己设计自己用,但是前端的技术发展得
很快,也很多知识点,随着互联网的发展,前端做的事情更专注于开发。目前主流就 vue 全家桶、 React 全家桶、node 技术栈、等等。

面对市面上各种各样技术,一个前端程序员小白应该如何学习路线呢?人呢,总对不知道的事情会恐惧、迷茫和焦虑、这里大可以放心,今天来跟大家捋一捋,简单的来说一说,免得多走冤枉路。

第一阶段 基础入门

  1. 学习 HTML5、CSS3
    这个阶段,还是比较容易的,自己上网看一下一个初级教程,把 HTML5、CSS3 相关知识、示例都写一遍,学到一个什么阶段可以及格了呢?就是自己能独立完成一个 PC 端页面。
  • 独立完成一个企业网站静态切图。例如: hao123 页面的静态切图。这个时候记得要多练,熟能生巧、
  • 独立完成一个电商站,可以让同学们掌握更复杂的网页效果的开发流程和布局标准,做到100%还原设计稿。
  • 学会处理好相关浏览器页面开发的兼容问题,这个比较烦心,多花点时间就好了。
  1. web移动端开发(手机移动H5)
    这个阶段,主要学习手机端的静态切图,独立完成,设计稿尽可能的100%还原设计稿,使用字体图标、平面转换、动画等,丰富网页效果和呈现方式;完成移动端和多端适配效果。

第二阶段 技术进阶

经过第一阶段,我们掌握了 HTML5、CSS3 可以独立完成市面上所有的 企业站、复杂的电商网站、适配多端的手机端移动页面等等,静态页面的切图。

这个技术进阶阶段,就是让这些我们静态切图开发的能够动起来。实现网页数据交互与动画效果,并实现与后端数据的联通。那就需要学习核心内容 JavaScript:

JavaScript 零基础学习

这个阶段说实话,没接触过编程的时候,这是一个非常辛苦的阶段,作为曾经一个小白的我,毫无编程经验,因为我们学习的专业非计算机。所以当时学习,自学起来有点头疼,不过没所谓,坚持坚持一下就好了。
这个时候你需要你将掌握JavaScript基础从变量的定义与使用、数据类型及相互转换、运算符、流程控制语句、三元运算符、数组、函数、构造函数、内置对象以及对象等基础必备技能。

JavaScript 核心API

这个时候,你需要掌握与浏览器的技术相关的操作,根据产品的需求完成开发任务,例如视觉效果(动画、交互等等)、数据处理、安全、性能等,熟练掌握 DOM 操作的方法,能够分析视觉交互需求,结合 CSS 规则设计合理的 DOM 结构,完成开发任务。

AJAX 学习与后端数据交互&异步编程

这个阶段你差不多已经入门了。这个阶段,我们需要掌握的是 Ajax 原理,学习如何和后端数据交互;学会处理浏览器跨域、JSONP、模板引擎、节流防抖 等常用技术。
这里还算比较容易,很快就能掌握了。

第三阶段 vue开发

这里恭喜你,你已经掌握了 HTML5、css3、JavaScript 前端核心知识内容。成为一个完全入门的前端开发了。不过想要真正到公司能做项目,这里还需要再简单来学一下,相对前面的内容,比较简单一点。

Node.js 基础

这里为什么讲node.js,因为基础的 node.js 是前端目前主流框架,包括 React、 Vue 、Angular 前置知识。重点为铺垫 npm、包、模块化、身份认证、CORS 跨域等主要知识点,为学习后面的 React、 Vue 、Angular 课程夯实基础。同时,顺便学习 MySQL 数据库、API 接口项目开发等后端内容,拓宽了一下自己的知识面,为构建了前后端完整的知识体系,更好地发展。

vue2、vue3

这里我们需要学习一下vue2/vue3。国内最流行的框架之一,大中小厂都有的技术栈,只要学会这一个就可以找到不错的工作了。这里需要学习一下 vue的语法,也相对简单。这里需要掌握 vue全家桶,包括MVVM思想、模板语法、
计算属性与监听器、Class 与 Style 绑定、条件/列表渲染、事件处理、组件开发、vuex(状态管理)、hooks、Router 等等。

学到这里,你出去工作,一点问题都没有。可以完成一个核心的项目了。

第四阶段 React

React 技术栈,很多大厂都在用,包括 BAT、美团、京东、拼多多,等等。既然已经学习了 vue 就能胜任任何一个项目了,为什么还要学这个技术栈?其实我当初也这么想过,学了那么多,已经很累了,但是市场就这样,你不学很多人学,学了可以拓展一下知识面,也提高一下竞争力,等你真学会,发现真香!

React 开发

这里需要掌握 React全家桶 React 脚手架、JSX、函数组件、类组件、受控组件、组件通讯、Context、组件生命周期、高阶组件、hooks、Redux等等技术。学完了这么多,做个 Todolist(为什么选择它呢?因为这个小东西,包括了增删改查,日常工作需要用的操作),或者顺便用一个小项目练练手。

TypeScript (这个可以看个人选择)

TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性,难以胜任和维护大型项目开发。因此微软开发了TypeScript ,使得其能够胜任开发大型项目。这里我们需要学习的东西也挺多的,
刚开始的时候挺痛苦的,不过掌握了,真的能把开发效率提高,bug减少。掌握基础知识以及高级的知识点之后,再结合 vue3 与 React 使用。

微信小程序

这个做小程序的开发,你们都学到这里来了,只要看文档,不用几天就能把一个小程序的入门掌握,这里需要掌握从基础的,小程序账号注册、开发环境搭建、基础语法、路由导航、数据请求、分包、组件化等知识点。
学完之后,再学习一下, uni-app 技术实现微信小程序的开发,可以做到一次开发多端部署。

第五阶段 学习路线总详情

好了,你已经掌握常用的前端知识点了。上述只是讲了一个大概的情况,如果真要很详细的。下面有一个图:

在这里插入图片描述

结语

所以希望看完这篇文章对你有帮助,文中如有错误,欢迎在评论区指正,如果这篇文章帮助到了你,

🌹🌹🌹欢迎点赞和关注🌹🌹🌹,后续会输出更好的分享。

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值