前端小白学习路线与方法推荐

0.编辑器推荐

1).WebStorm
  • 优点:本身功能丰富
  • 缺点:体积较大,需要破解,或者购买正版
2)VsCode
  • 优点: 轻量,开源免费
  • 缺点: 需要插件扩展,才能达到Webstorm的很多功能
    推荐插件:


    image.png

    书写标签,自动补全标签


    image.png

    给代码添加颜色,使代码更加易于区分
    image.png

    可以直接运行js代码,而不用通过html引入之后再在浏览器打开
    image.png

    git管理工具,可以更加方便的进行代码的管理


    image.png

    html标签提示补全
    image.png

    右键点击open in browser在浏览器直接打开html文件,而不用找到文件再双击运行
    image.png

    依赖引入的时候有提示
    image.png

    vue代码标签书写提示,格式化

两个二选一,至少别用文本编辑器一点点的敲,没有很大必要

1.技术点

1).HTML

推荐视频:尚硅谷/黑马html
黑马:https://www.bilibili.com/video/BV14J4114768?from=search&seid=2290928400442488944&spm_id_from=333.337.0.0
尚硅谷:https://www.bilibili.com/video/BV1XJ411X7Ud?from=search&seid=2290928400442488944&spm_id_from=333.337.0.0

HTML本身只是一门标记语言,不算是程序语言,学习起来比较简单,只需要记住多数的标签及各自的特性,并没有逻辑,在项目上需要合理的进行标签的嵌套使用,想要掌握熟练,先跟着视频模仿敲一些,到后面可以自己找一些网站进行仿写。

学习的时候,HTML一般是与css一块进行学习的。

HTML好比人体中的骨骼,是整个页面的架子,而css就是肉与皮让页面更加好看。JavaScript则是大脑的存在,控制着躯体的行动,也就是页面与用户的交互。

2).Css

推荐视频:黑马/尚硅谷
黑马:https://www.bilibili.com/video/BV14J4114768?from=search&seid=2290928400442488944&spm_id_from=333.337.0.0
尚硅谷:https://www.bilibili.com/video/BV1XJ411X7Ud?from=search&seid=2290928400442488944&spm_id_from=333.337.0.0

Css的学习需要去尝试使用很多属性,用的多了后续根据页面设计图可以自然而然的想到怎么布局,用什么属性,能实现对应的页面效果,

3).JavaScript

推荐视频:尚硅谷
尚硅谷:https://www.bilibili.com/video/BV1YW411T7GX?from=search&seid=1897047036263251726&spm_id_from=333.337.0.0
课程不是很新,但是基础知识都覆盖到了
js强化:https://www.bilibili.com/video/BV14s411E7qf?from=search&seid=8025926353439305422&spm_id_from=333.337.0.0
ES6学习:https://www.bilibili.com/video/BV12K411H7F7?spm_id_from=333.999.0.0

推荐书籍:JavaScript高级程序设计

俗名:红宝书,前端开发必备书籍,视频看完后可以系统的进行前端知识的梳理,也可以变看视频边看,可以去网上找电子书或者直接购买实体书,一般当你先在视频学习,并敲了代码,然后去看书籍可以起到查缺补漏的效果,如果直接去看书有一些枯燥并且效果没有那么好,因为单单去看很容易忘记,需要反反复复看很多遍。


image.png

当然这本书很优秀,即使工作了一段时间的人依然会看这本书。

Js是很重要的,后续学习框架(VUE/REACT)的使用在一定程度上依赖了你的js能力,你如果js功力非常深厚,那么你学习框架使用就会容易不少。

视频不仅仅有这些,看完之后可以适当的再学习一下其他的一些视频

4).Vue

推荐视频: b站why的vue教程
链接地址:https://www.bilibili.com/video/BV15741177Eh?from=search&seid=1897047036263251726&spm_id_from=333.337.0.0

这个教程将vue的基本使用方法都讲到了,里面也有webpack的配置学习(这一段的学习应该是比较困难的,很多问题都是依赖的版本问题,可以根据弹幕,以及百度来解决问题,解决问题的能力非常重要,这个需要时间以及自己多思考来积累经验)。

教程还有一个小项目,这个挺重要的,会把之前的知识进行整合,有一个整体融会贯通,这个代码敲一遍并不能完全吸收,可以先跟着视频敲,在敲的过程会遇到依赖问题以及你觉得写的和视频完全一样的代码,运行结果却不同的情况,最终原因还是写错了

建议在项目敲完之后建议自己购买申请一个域名,然后去免费空间申请一个账号,然后把自己的项目部署上去,面试会有一定的加分,当然不买域名也可以,通过直接访问免费空间的地址也一样,域名以及部署也会遇到很多问题需要自己摸索。

5).React

推荐视频:https://www.bilibili.com/video/BV1wy4y1D7JT?from=search&seid=15004808249328722138&spm_id_from=333.337.0.0

一般入门都先学vue,react对于js要求更高一些,但是也可以先学react没有说完全不能学,一般大厂使用react多一些,基本两个都需要学,

6).Node

推荐视频:https://www.bilibili.com/video/BV1Ns411N7HU?spm_id_from=333.999.0.0

7).Git版本控制工具

推荐视频:https://www.bilibili.com/video/BV1pW411A7a5?from=search&seid=576186207931810441&spm_id_from=333.337.0.0

自己学习的代码可以使用git进行一个管理,后续项目上基本都是使用git进行团队开发协作,国内github访问受到一些限制有时候访问不通,国内可以使用gitee,在简历上把自己gitee地址添加进去

2.注意点

必须自己敲代码!必须自己敲代码!必须自己敲代码! 最好再记个笔记更加易于吸收,实在不愿意记笔记,直接写注释也可以,可以加深印象,并且后续复习容易

这个是很重要很重要的,学到后期可以适当少敲一点,只看思路原理之类的,在敲代码的过程中可能会遇到各种各样的问题(代码敲错,使用的依赖不兼容,预期运行结果不一致等等),即使一些在你自己看来很简单的东西也会存在敲错的情况,但是也是在这些出错的过程中,不断排除错误,改正错误你才能提高自己的排错能力,当你真正去工作进行开发的时候,遇到问题才能快速定位原因,并改正。

多去想为什么,要知其然,更要知其所以然,拥有这种想法,才能走的更远,

界面与功能大家都能实现出来,但是在实现时间,以及测试bug的多少,修复的快慢,就会存在差别了,了解原理能够让你综合能力更加厉害。

3.面试:

多刷一些面试题牛客或者网上找一些,某鱼买些课程里面有一些也带面试题,面试的时候一般问项目,主要是使用技术,有什么优势缺点,你遇到了什么困难,怎么解决的,可以根据面试官提问点进行延伸,引导着他去问一些你懂的问题,面试官问的爽,你答的也多,基本就稳了,自己没做过的东西不要硬说,撒谎比较减分

  • 是否有必要报名培训班
    • 好处: 可以系统学习,跟着老师走就好了,不用自己找资料,可以在一定程度上督促自己学习(自制力差的),有问题可以直接问培训老师
    • 坏处: 花钱haha

    如果说报名培训班能够让你顺利找到工作,培训班的费用还是很值得花的,如果你自学能力比较强,自制力也可以,可以自己学习

4.最后

一整套流程下来需要很久了,如果你现在大二或者大三最好,可以学习更多时间,学习更多的知识,我是大三下学期假期开始学习的,学习时间累计有一年左右,学习的过程有时候是很枯燥的,甚至学不下去,此时可以试着学习一些没学习过得东西,尽量搞一些能看得见成果的页面之类的,可以让自己学习起来更加有动力,大四下学期大部分时间都在学习,毕设也是做了一个前后端的增删改查的项目,秋招春招多去投简历,自己学校如果没有好一些的公司可以去其他学校的校招现场,在其他学校官网可以查到他们的招聘会时间,或者直接找你们负责就业的老师
当然视频不仅仅局限于推荐的这些,一些播放量高的视频也可以去看一看,学习一下,后面查缺补漏需要多看一些视频,前提是时间比较充裕,不充裕就不要看太多视频了,工作后一般都会有学习的时间,仍要持续不断的进行学习

仅仅是起一个指引的作用,当你学到后面的时候自己需要学什么东西,自己的内心大致有了一个轮廓了

有什么问题可以直接评论询问,看到后会进行回复

你可能感兴趣的:(前端小白学习路线与方法推荐)