记录前端自学的学习路线(详细)

目录

HTML

css

javaScript

javaScript高级

jQuery(快速过一遍)

bootstrap

移动端适配

ajax

ES6

Vue2+vue3全家桶(vue3暂时不学,后面会解释原因)

axios

promise

vue2结束后

Vue3

Ts

依我而言


曾经我也迷茫过,如何学习前端,查了很多资料,也见过很多路线,我觉得适合自己的就是最好的,没想到一路走下来,回头看了看,原来走了这么远(因为我是科班,对html+css,jQuery是快速过的),我曾经也是小白,也遇到了各种报错,博客中也有关于报错的解决方案,通过各种途径,自己排查、向大佬询问、自己上网搜集,这并不丢人,这是个从0到1的过程

HTML

尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通_哔哩哔哩_bilibili尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通共计148条视频,包括:1_尚硅谷_课程简介、2_尚硅谷_网页简史、3_尚硅谷_HTML简介等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1XJ411X7Ud/?spm_id_from=333.999.0.0

css

   尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通_哔哩哔哩_bilibili尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通共计148条视频,包括:1_尚硅谷_课程简介、2_尚硅谷_网页简史、3_尚硅谷_HTML简介等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1XJ411X7Ud/?spm_id_from=333.999.0.0

javaScript

尚硅谷JavaScript DOM教程_哔哩哔哩_bilibili尚硅谷JavaScript DOM教程共计16条视频,包括:1. 尚硅谷_佟刚_JavaScript DOM编程_在什么位置编写 JS 代码、2. 尚硅谷_佟刚_JavaScript DOM编程_获取元素节点、3. 尚硅谷_佟刚_JavaScript DOM编程_读写属性节点等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV14W411u7bC/?spm_id_from=333.999.0.0

javaScript高级

尚硅谷JavaScript高级教程(javascript实战进阶)_哔哩哔哩_bilibili尚硅谷JavaScript高级教程(javascript实战进阶)共计48条视频,包括:01.尚硅谷_JS高级_准备、02.尚硅谷_JS高级_数据类型、03.尚硅谷_JS高级_相关问题等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV14s411E7qf/?spm_id_from=333.999.0.0

jQuery(快速过一遍)

尚硅谷jQuery教程(jquery从入门到精通)_哔哩哔哩_bilibili尚硅谷jQuery教程(jquery从入门到精通)共计54条视频,包括:01.尚硅谷_jQuery_了解jQuery、02.尚硅谷_jQuery_jQuery的基本使用、03.尚硅谷_jQuery_jQuery的2把利器等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1ts411E7ag/?spm_id_from=333.999.0.0

bootstrap

【极客学院】一周学会Bootstrap_哔哩哔哩_bilibili【极客学院】一周学会Bootstrap共计51条视频,包括:观看视频前必读、1.1.1.Bootstrap 介绍、1.1.2.入门例子创建等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1Lx411v73k/?spm_id_from=333.999.0.0        +黑马pink阿里百秀响应式教程可自行搜索

尚硅谷Bootstrap教程(bootstrap框架讲解)_哔哩哔哩_bilibili尚硅谷Bootstrap教程(bootstrap框架讲解)共计17条视频,包括:1.尚硅谷_bootstrap_bootstrap邂逅、2.尚硅谷_bootstrap_bootstrap容器、3.尚硅谷_bootstrap_bootstrap行&列等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1YW411T7yy/?spm_id_from=333.999.0.0&vd_source=4d5d6a5fb9cf1f3272851ffccb83b1fc

移动端适配

黑马面面移动端布局开发-rem+less适配码云部署发布静态网站git上传摹客/蓝湖协作平台使用-pink老师公开课_哔哩哔哩_bilibili黑马面面移动端布局开发-rem+less适配码云部署发布静态网站git上传摹客/蓝湖协作平台使用-pink老师公开课共计29条视频,包括:01-寒暄、02-黑马面面项目的规范要求、03-PS安装摹客协作平台插件等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1dK411n7an/?spm_id_from=333.999.0.0这个讲的很详细,接下来,这个天禹老师陪我走了很长很长一段时间的路

尚硅谷移动端_哔哩哔哩_bilibili尚硅谷移动端共计32条视频,包括:1.屏幕大小、2.屏幕分辨率、3.屏幕密度等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1LT41157ag/?spm_id_from=333.999.0.0

ajax

黑马程序员前端教程Ajax零基础入门ajax前后端交互技术_哔哩哔哩_bilibili黑马程序员前端教程Ajax零基础入门ajax前后端交互技术共计120条视频,包括:01.基本概念、02.安装web服务器软件、03.web服务器软件问题等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1ox411M7P2/?spm_id_from=333.999.0.0

说起来你们可能不信,我直接跳过promise直接去了vue2,因为我感觉我一直在底层徘徊,像箭头函数,等es6语法都不清楚,被劝退了一次,选择快速过es6,想不起来的时候再去补,先过了一遍es6

ES6

第一遍是这个

尚硅谷Web前端ES6教程,涵盖ES6-ES11_哔哩哔哩_bilibili尚硅谷Web前端ES6教程,涵盖ES6-ES11共计68条视频,包括:01.尚硅谷_ES6-课程介绍、02.尚硅谷_ES6-ECMAScript相关名词介绍、03.尚硅谷_ES6-let变量声明以及声明特性等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1uK411H7on/?spm_id_from=333.999.0.0第二遍深入了解axios,promise,因为在vue2中发请求的时候不懂axios怎么回事,单独看的,链接在下面我会补充。

不用先学axios,直接去vue2,vue2讲到了我再去补,先看看这个vue的独特点在哪,我等不及啦

Vue2+vue3全家桶(vue3暂时不学,后面会解释原因)

可能你遇到了vue2中axios发请求的这一块了(等到学到那一集再学,前面的用不到axios)

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通共计168条视频,包括:001_尚硅谷Vue技术_课程简介、002_尚硅谷Vue技术_Vue简介、003_尚硅谷Vue技术_Vue官网使用指南等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1Zy4y1K7SH/?spm_id_from=333.999.0.0你会在vue这里遇到各种各样的问题,或许是报错,或许是因为对es6不了解,又可能是对相关api不熟悉,这个是看文档+看es6的那个视频,知识点被分成了视频,时间成本相对来说不高。

axios

尚硅谷Web前端axios入门与源码解析_哔哩哔哩_bilibili尚硅谷Web前端axios入门与源码解析共计21条视频,包括:01-课程介绍、02-json-server的介绍与服务搭建、03-axios的介绍与页面配置等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1wr4y1K7tq/?spm_id_from=333.999.0.0&vd_source=4d5d6a5fb9cf1f3272851ffccb83b1fc下面这个我喜欢,因为这些老师里面,我听天禹老师的习惯了

尚硅谷axios_哔哩哔哩_bilibili尚硅谷axios共计17条视频,包括:1_HTTP相关、2_请求方式与请求参数的总结、3_API的分类等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1Ga41177Tn/?spm_id_from=333.999.0.0

promise

尚硅谷promise_哔哩哔哩_bilibili尚硅谷promise共计33条视频,包括:1_函数对象与实例对象、2_回调函数的分类、3_错误类型的说明等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1sU4y117YD/?spm_id_from=333.999.0.0

vue2结束后

你心里很没有底,你感觉你学的东西,让你仔细说你也说不明白

你觉得你可以了,前端只不过就是发请求+渲染

你会遇到上面两种状态,不要慌,这两种状态我觉得还比较正常,因为我就有。。。。

  1. 我现在需要重新,1.5倍速再过一遍vue2基础
  2. 我需要一个企业级的项目,让我熟悉整个项目的开发流程
  3. 我还没有使用vue+vant实现移动端项目
  4. 我需要自己通过开放的api来写一个自己的项目(独立负责)
  5. 我对组件库不太熟悉
  6. ········

如果你是自学,你必须跟着视频,去体会项目的开发流程、代码规范以免错误频出,我这也是建议,大佬可自行决定。

走到这一步,就学习怎么向码云上传项目,这里用到了git,命令不是很多

相信在之前你也接触到了静态页面如何上传并浏览。什么,你不知道,在上面黑马阿里百秀的教程里会告诉你咯。

当我完成上方问题和项目后,是时候展望一下未来,因为我时间比较充裕,为了在未来能够少些压力,

Vue3

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通共计168条视频,包括:001_尚硅谷Vue技术_课程简介、002_尚硅谷Vue技术_Vue简介、003_尚硅谷Vue技术_Vue官网使用指南等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1Zy4y1K7SH/?spm_id_from=333.999.0.0

Ts

        关于TS     Ts是大趋势,它是一种强类型的语言,相对于js来说,它有很多优势,这里就不一一赘述。

       关于Vue:  看着ElementUI的官网还是默认vue2在首页,在二线城市,vue2还是主流,如果想要去一线,react或许是你的最佳选择,我选择vue是希望退居二线时,有所保障,当然,react我也会学,掌握一种框架再去学另一种框架,相对来说难度也并不是很大。

        关于小程序  :这个在自学中,可学可不学,因为这个并不是刚需,主要还是先找工作,将学到的vue在企业中熟练,并掌握业务逻辑才更重要。

如果你和我一样,是需要依靠vue先谋一个出路,再依靠react寻求一个机会,那诸位,一起加油!

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值