首页 > 其他分享 >前端小白学习路线与方法推荐

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

时间:2024-04-15 10:12:13浏览次数:25  
标签:学习 视频 0.0 前端 路线 小白 video spm https

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.最后

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

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

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

标签:学习,视频,0.0,前端,路线,小白,video,spm,https
From: https://www.cnblogs.com/coderzdz/p/18135256

相关文章

  • [转]写给前端的 react-native 入门指南
    前言本文主要介绍react-native(下称RN)的入门,和前端的异同点文章不涉及功能的具体实现选择优势我们先说说,为什么很多人会选择使用RN、他对应的特性和普通Web的区别前端资源,生态的互通因为使用的语言是JS和react,对于前端来说可以无缝切换,并且他还能......
  • 简单了解前端性能监控
    作为一名开发来讲,以下场景你有没有遇到:点击这个按钮怎么没反应了页面为什么白了怎么一直正在加载很多用户说图片加载不出来......那么有一款性能监控产品太重要了,但是性能相关的东西实在太多了。那么从一个熟悉又陌生的api开始,performance。1.什么是performancemdn上是......
  • 未来的前端框架技术发展趋势
    ​福利开篇推荐老铁们,你们是否平常开发有这样的问题:1.需要公网访问内网的一个服务?2.需要一个开发环境直接支持https,但是弄本地证书既不合法,又很麻烦?3.本地有强劲的服务器,需要对公网提供服务,但是拉宽带既贵,又麻烦?4.有云主机,但同时云主机需要访问内部的服务器?5.......
  • P2437 蜜蜂路线
    P2437蜜蜂路线题目描述一只蜜蜂在下图所示的数字蜂房上爬动,已知它只能从标号小的蜂房爬到标号大的相邻蜂房,现在问你:蜜蜂从蜂房\(m\)开始爬到蜂房\(n\),\(m<n\),有多少种爬行路线?(备注:题面有误,右上角应为\(n-1\))输入格式输入\(m,n\)的值输出格式爬行有多少种路线样例......
  • 短视频app源码,一文带你轻松搞懂前端大文件上传思路
    短视频app源码,一文带你轻松搞懂前端大文件上传思路文件上传是我们在平时开发短视频app源码中经常会遇到的业务,如果只是简单的文件上传那还不足以作为项目亮点,而当我们给它加上切片、续传的功能,就不一样了。本文会带大家搞明白这些功能的实现思路,主要聚焦于前端部分,基于Vue3......
  • freemarker 生成前端文件
    Freemarker是一种模板引擎,它允许我们在Java应用程序中分离视图和业务逻辑。在Freemarker中,List是一种非常有用的数据结构,它允许我们存储一组有序的元素。有时候,我们需要判断一个List是否为空,这在程序设计中有许多应用场景。本文将详细介绍如何使用FreemarkerList判断一个List是否......
  • 前端录屏并保存视频到本地
    API、第三方库使用getDisplayMedia+MediaRecorder+@ozean/set-webm-duration<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-wid......
  • P4568 [JLOI2011] 飞行路线
    分层图的板子题代码#include<bits/stdc++.h>#defineR(x)x=read()#definefifirst#definesesecondusingnamespacestd;typedefpair<int,int>PII;constintN=1e4,M=5e5;inlineintread(){intx=0,f=1;charch=getchar();......
  • 前端使用 Konva 实现可视化设计器(4)
    给上一章做一个补充,就是实现通过上下左右按键移动所选节点。继续求Star,希望大家多多一键三连,十分感谢大家的支持~创作不易,Star50个,创作加速!github源码gitee源码示例地址通过按键移动节点准备工作给SelectionTool添加两个必要的方法://更新已选位置selecti......
  • pdf在前端网页的显示
    背景:react框架实现插件:pdfjs-dist:"^2.0.943"  (还有其他插件  react-pdf, react-pdf-js,pdf.js都可以尝试一下呢)实现效果:实现代码如下:index.jsximportReact,{useState,useEffect}from'react';import{Spin}from'antd';import{RightOutlined,L......