2022年前端学习路线(个人认为)

简介: 本文提供了一条前端工程师的学习路径,分为三个阶段。第一阶段(1-2个月)重点掌握HTML、CSS、JavaScript及H5+CSS3,目标是能够构建基本的静态网页。第二阶段(2-3个月)深入Node.js、Git、Webpack及相关工具和规范,提升项目管理和构建能力。第三阶段(4-6个月)专注于Vue、React、Angular等主流框架,以及uni-app和微信小程序的开发,旨在实现跨平台应用的开发能力。每个阶段都有详细的课程推荐,帮助初学者逐步成长为合格的前端工程师。

以下内容属于个人认为的学习路线,不能保证完全无误,但是坚持学习下去是能够成为一个初级前端工程师的。

目录

1.第一阶段(1-2月)

    1.HTML(1-2周)

    2.css(2-3周)

    3.JavaScript(3-4周)

    4.H5+CSS3(2-3周)

推荐课程:HTML+CSS JavaScript Js进阶

2.第二阶段(2-3月)

    1.node.js(2-3周)

    2.git(1周)

    3.webpack(1-2周)

    4.各种工具和规范的学习(2-3周)

课程推荐:node.js(含模块化,webpack) git lodash文档 axios文档 less sass stylus postman

3.第三阶段(4-6月)

    1.Vue,React,Angular(3-4月)      

    2.uni-app和微信小程序(1-2月)

课程推荐:vue React Angular uni-app 微信小程序

结语

1.第一阶段(1-2月)
1.HTML(1-2周)

            HTML主要是就是学习一些常用的标签以及头部文件的了解,内容比较简单。
    2.css(2-3周)

            css知识点比较多,除了要学习和记住一些常用属性外,还需了解浏览器的兼容性,属性的各种书写方式,各个属性的使用场景以及属性之间的搭配,css是前端里比较复杂的一个点,能做的事很多且是编写网页布局的重中之重,需认真学习。
    3.JavaScript(3-4周)

            js作为一门弱类型的编程语言,学习难度并不大,但需学习的内容多且杂具体包括但不限于js的基本语法,dom操作,bom操作,原型链,this指向,异步,ajax以及es6的语法。js是让网站动起来的根本,没有js就没有现在形形色色的网站。
    4.H5+CSS3(2-3周)

            H5是HTML是一个版本,H5中新增了许多新的内容,比如获取用户的地理位置,视频音频标签,各种语义化标签等等。CSS3同理,也是新增了许多新的属性如动画,弹性盒子,媒体查询,阴影等。

    第一阶段总结:前端学习的第一个阶段我们的目标应该是搭建PC端和移动端静态页面。让我们从小白升级成为网页的化妆师。这里需要掌握的知识点为HTML+CSS+JS相关内容。

推荐课程:HTML+CSS JavaScript Js进阶

2.第二阶段(2-3月)
1.node.js(2-3周)

            node.js作为一个js语法的后端语言,能让我们体验用js语法搭建后台的同时,还能加强我们对全后端分离的理解,主要的学习内容是包管理工具npm,cnpm,yarn等,express,http,js的模块化commjs等。
    2.git(1周)

            git可以帮我们进行管理项目的历史版本,代码托管,版本回溯等,使我们可以更好的管理项目。
    3.webpack(1-2周)

            这是一个项目打包工具,可以打包项目中的代码,可以解决js代码的兼容性,css的兼容性等。
    4.各种工具和规范的学习(2-3周)

            学习各种前端开发的工具和库如lodash,axios,css预处理器less,sass,stylus,postman。

            学习前端模块化,工程化,让项目结构变得规范起来,为之后的前端项目开发打下基础。

    第二阶段总结:第二阶段主要是提高我们对于前端开发的概念,该阶段的学习能让我们可以搭建一个简单的后端供前端去调用接口,且使用postman测试接口,实现一个简单的动态网站。

课程推荐:node.js(含模块化,webpack) git lodash文档 axios文档 less sass stylus postman

3.第三阶段(4-6月)
1.Vue,React,Angular(3-4月)

            目前前端三大主流框架,最好是三者都学习,从Vue开始,Vue入门简单,开发项目相对来说比较容易一点,建议学习Vue3+ts+vite+pinia+vue-router全家桶。能我们快速的步入入门前端的门槛。
    2.uni-app和微信小程序(1-2月)

            多端适配和兼容性是前端的一大难题,uni-app的出现可以让我们一套代码运行在14个平台上。微信小程序是当前非常热门的开发方向,制作简单,凭借微信流量多,是现在前端的必备技能。

    第三阶段总结:第三阶段能让我们做出一个前后端分离的,且有多端的网站,使用的技术也是当前最热门的,学习完此阶段已经可以说是一个合格的初级前端工程师了!

课程推荐:vue React Angular uni-app 微信小程序

结语

    以上就是我目前我认为的前端学习路线,不全但够大家入门的了,前端要学习的东西还有很多,但再往后就是我的知识盲区了,一起加油内卷吧。

目录
相关文章
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线路线设置
前端学习笔记202305学习笔记第二十三天-地图单线路线设置
70 0
|
移动开发 前端开发 JavaScript
前端入门 前端自学路线 web开发前端如何学习
前端入门 前端自学路线 web开发前端如何学习
260 0
前端入门 前端自学路线 web开发前端如何学习
|
缓存 JavaScript 前端开发
一个大四学长分享自己的web前端学习路线--vue篇(1/3)
学会使用插值、什么是表达式、了解什么是指令、什么是动态属性已经v-html标签(注意:v-html这个标签会有XSS风险,它会将我们的子组件覆盖掉)
36669 1
一个大四学长分享自己的web前端学习路线--vue篇(1/3)
|
Web App开发 前端开发 JavaScript
前端学习路线(一)
很多人问我前端学习的路线是怎么样的,css要学多久,js高级要不要学,先学node.js还是先学vue,所以想通过一篇博文来讲一下这个事情
226 5
前端学习路线(一)
|
前端开发 JavaScript NoSQL
前端学习路线(二)
在前端学习路线(一)一章中我们讲了关于前端三剑客和jq与js的问题,并且简要的说明了js高级是什么,那在本章节我们主要从如何学习js高级开始进行讲述,并对es6如何学习,bootstrap学不学和学什么,并对前后端分离做个简要的描述这几个问题展开讲解,还有推荐基本适合初学者看的书,这个书是有读者问了我我才想起来的,在此感谢很多喜欢博主的文并提出建议的小伙伴!
194 4
前端学习路线(二)
|
前端开发 JavaScript 程序员
前端学习路线(三)
往期回顾↓↓↓ 前端学习路线(一) 前端学习路线(二) 在前两章中,我们讲了如何去学习前端三剑客、js高级和bootstrap的重点,得到了很多前端初学者的好评,收藏量也是每天都在增加,所以今天博主想写一下第三章,主要想讲一下学习ajax和webpack的问题,ajax是前端学习的重点,如果不会ajax,写出再好的页面也只是一个空壳,而webpack则是一个打包工具,对于项目的上传具有重要的作用。
176 1
前端学习路线(三)
|
设计模式 前端开发 JavaScript
写给初中级前端的高级进阶指南(万字路线)
由于公众号文章不允许外链,需要跳转文中链接的同学可以在脚注里找到各个的资源链接,也可以通过点击阅读原文更加方便的跳转链接
|
缓存 JavaScript 前端开发
一个大四学长分享自己的web前端学习路线--webpack篇(2/3)
webpack所谓的拆分的配置就是将webpack分为common(公共配置)、dev(开发环境下的配置)、prod(生产环境下);然后还需要的是在dev当中将它引入我们的common,再在prod当中引入common,这个时候我们要做的就是安装webpack-merge,比如通过这个方法module.export = smart将其导入common的时候对应的配置的命名。
一个大四学长分享自己的web前端学习路线--webpack篇(2/3)
|
JSON 小程序 JavaScript
一个大四学长分享自己的web前端学习路线--小程序篇(3/3)
小程序文件类型分别有:样式(WSCC)、骨架(WXML)、业务(js)、配置(json)。但是注意的是:其实小程序开发虽然和web开发方式差不多,但是底层的原理根本不一样。
一个大四学长分享自己的web前端学习路线--小程序篇(3/3)
|
前端开发 JavaScript
重学前端 2 # 前端学习路线与方法
重学前端 2 # 前端学习路线与方法
70 0