前端学习路线图

简介: 前端学习路线图

(一)巩固基础

这是入门前端最基础的内容。。熟悉了前端开发的HTML与CSS基础知识,就能够配合UI设计师进行项目布局开发了。这一步骤共分为三部分内容:HTML、CSS和页面制作工具。HTML是前端开发入门首先要学会的东西,有了它,你才可以布局页面结构。CSS是页面美化和精细化的核心技术。想要更好的完成页面的开发,更好的与UI部门合作,这些页面制作工具是必须掌握的。

这里推荐尚硅谷的html+css讲的十分详细

(二)页面布局实战

有了第一步的基础知识,你就可以实战各种页面布局了。学会后,更加夯实初级Web前端工程师水平,能够完成各种PC端与移动端网页布局与样式设计实现了。 这一步骤共分为两部分内容:布局技术,布局规范与方案。 想要轻松的完成各种PC端和手机端的布局,这些重要的布局技术必须掌握。另外一些布局规范与布局方案,是完成浏览器兼容和各种设备适配的法宝。

(三)前端开发内功

对于JavaScript这么重要的部分,一定要用书籍系统的去学习,推荐几本书口,

仅供参考:1.《你不知道的javascript》

2.《JavaScript权威指南》

3.《JavaScript高级程序设计》这部分是初学者的第一个大坎,所以一定不要忽视动手实践的重要性。主打就是跟着敲,一步一步敲,我无法用言语来描绘这个过程的曼妙,但你一定可以感受得到。这部分如果觉得书上晦涩难懂,可以去各大学习官网搜寻视频教程,跟着视频来可以缓解枯燥。这里推荐pink老师的

JS分为基础和高级,高级也可以学完ajax再学。刚接触会比较抽象,非计算机专业刚接触会有一定难度,但一定要打好基础。重点超多: 继承、闭包、递归、深浅拷贝、事件处理机制等等,也涉及一些手写题,手写深浅拷贝、防抖函数等等。bom部分文档对象模型和浏览器对象模型需要理解,其实内容不多。主要掌握元素增删改查、事件执行过程、定时器、一些事件属性方法等等。监听事件是一块很重要又很容易犯迷糊得部分。其中点击,鼠标移入移出,键盘操作监听,都是非常有意思得地方。我在学习这部分得时候特别喜欢放着一行控制台打印得语句,随时看到各种行为得触发反馈。aiax这部分就是进行前后端数据交互啦。需要一些网络原理内容,比如http和https啦,握手挥手等等es6部分尤其重要,一些新特性可以大大提高代码体验,比如set数据结构,扩展运算符等等贼方便啦。是面试重点,比如一些问题你可以讲一下传统is如何解决,可以用es6新增的什么特性这样。像promise,axios这部分,并不一定要求你深刻了解,也不必要求自己一定要能够手写promise,做到基础学习,知道这是什么用在哪里就可以。JavaScript部分的学习开始依附于大量的代码练习,其中也是正式开始锻炼逻辑思维能力。在此过程中也开始了手写bug的旅程。那么就有一个亟待解决的问题,学习途中遇到的问题和自己亲手写出来的BUG不知从何下手解决。依托于现在互联网的发达,可以从各个网站进行发问。当然也可以选择AI,

这里留下我一直在用的ai—KIMi----https://kimi.moonshot.cn/

(四)前段工程化

这部分要学习得东西又多又杂,但每一个都是应用广泛得技能,属于开发技能中得软实力。Node.is和Webpack推荐视频教程,了解下Webpack这个构建工具到底是干嘛的,简单了解就好,以后慢慢进阶。当下出现了比webpack更出色得构建工具VITE,相比于webpack打包更快速,配置更简易,这两个构建工具可以对比学习。其他工作实操需要的工具类就要了解git和node指令。git部分要会连仓库,拉代码,建分支,合分支,切换分支等等基本操作就行。node部分要会一些npm命令,装包卸载包,看得懂项目文件夹配置文件就可以了。

(五)工程化开发

这个步骤是从事前端工作必须掌握的重要内容,尤其是Vue、React,已经是公司开发企业项目的首选框架。 学会这个部分,你就是一名高级Web前端工程师了,那这些框架都需要学习掌握什么呢? Vue框架,需要掌握Vue3和它的生态技术。掌握了Vue3的选项式API,Vue2的项目也信手拈来。Vue3生态的每个技术都包含了很多内容,都需要你掌握它并熟练应用。像Vue3的组合式API、Vite2+SFC、VueRouter4、Vuex4、Pinia2、TypeScript基础、TS+Vue3,其他的技术栈。学会这些,你就可以基于这些技术开发Vue3的C端和B端项目了。 Vue.js致力于构建数据驱动的web应用开发框架,以简洁化,轻量级,数据驱动,模块友好等优势深受企业以及前端开发者的喜爱,成为前端开发人员必备的技能

(六)学会使用各大ui框架

当学会了以上内容 还局限于页面布局都自己一点点的手敲吗?显然是不现实的这里推荐element-ui配合vue进行开发

https://element.eleme.cn/#/zh-CN

(七)总结

当完全掌握上述内容的话基本可以获得一笔不菲薪资的工作了。让我们一起加油吧!


目录
相关文章
|
3天前
|
前端开发 JavaScript 小程序
2022年前端学习路线(个人认为)
本文提供了一条前端工程师的学习路径,分为三个阶段。第一阶段(1-2个月)重点掌握HTML、CSS、JavaScript及H5+CSS3,目标是能够构建基本的静态网页。第二阶段(2-3个月)深入Node.js、Git、Webpack及相关工具和规范,提升项目管理和构建能力。第三阶段(4-6个月)专注于Vue、React、Angular等主流框架,以及uni-app和微信小程序的开发,旨在实现跨平台应用的开发能力。每个阶段都有详细的课程推荐,帮助初学者逐步成长为合格的前端工程师。
|
2月前
|
机器学习/深度学习 搜索推荐 图计算
图基础知识
图基础知识
|
3月前
|
前端开发 数据可视化 JavaScript
前端 three学习路线
【8月更文挑战第21天】前端 three学习路线
52 2
|
5月前
|
移动开发 前端开发 JavaScript
大前端完整学习路线(详解)
大前端完整学习路线(详解)
118 0
|
移动开发 前端开发 数据可视化
一份小白前端可视化学习指南——附思维导图
一份小白前端可视化学习指南——附思维导图 前言 因为群里粉丝一直要求我写一篇「可视化入门指南」,今天他来了。其实说起前端可视化,大家所能想到的就是各种图表,大屏。这种看着贼炫酷,而笔者呢工作也一直从事3D前端开发工作,慢慢对图形产生了兴趣。但是呢一直做的是三维的东西,没搞过二维的。大概是2月前开始学习2D的一些东西,然后并写了一些文章,效果还不错。所以我就写一些经验之谈,大佬勿喷。我大概从4个方面去讲我是怎么学习的 「可视化不得不掌握的数学基础」 「svg」方面的学习 「canvas」方面的学习 「可视化中」不得不掌握的「图形算法」 读完本篇文章,你可以大概知道我该怎么去学,需要学什
一份小白前端可视化学习指南——附思维导图
|
前端开发
前端学习案例3-jsonStringfy
前端学习案例3-jsonStringfy
60 0
前端学习案例3-jsonStringfy
|
前端开发
前端学习案例3-pupperteer之3
前端学习案例3-pupperteer之3
63 0
前端学习案例3-pupperteer之3
|
Web App开发 前端开发 JavaScript
前端学习路线(一)
很多人问我前端学习的路线是怎么样的,css要学多久,js高级要不要学,先学node.js还是先学vue,所以想通过一篇博文来讲一下这个事情
218 5
前端学习路线(一)
|
前端开发 JavaScript NoSQL
前端学习路线(二)
在前端学习路线(一)一章中我们讲了关于前端三剑客和jq与js的问题,并且简要的说明了js高级是什么,那在本章节我们主要从如何学习js高级开始进行讲述,并对es6如何学习,bootstrap学不学和学什么,并对前后端分离做个简要的描述这几个问题展开讲解,还有推荐基本适合初学者看的书,这个书是有读者问了我我才想起来的,在此感谢很多喜欢博主的文并提出建议的小伙伴!
190 4
前端学习路线(二)
|
前端开发 JavaScript 程序员
前端学习路线(三)
往期回顾↓↓↓ 前端学习路线(一) 前端学习路线(二) 在前两章中,我们讲了如何去学习前端三剑客、js高级和bootstrap的重点,得到了很多前端初学者的好评,收藏量也是每天都在增加,所以今天博主想写一下第三章,主要想讲一下学习ajax和webpack的问题,ajax是前端学习的重点,如果不会ajax,写出再好的页面也只是一个空壳,而webpack则是一个打包工具,对于项目的上传具有重要的作用。
170 1
前端学习路线(三)