热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

适合我的前端学习路线(学习前端不迷路)

适合我的前端学习路线(学习前端不迷路)小伙伴们想学习前端,但是却不知如何入手,上网查前端学习路线,第一页往往充

适合我的前端学习路线(学习前端不迷路)



小伙伴们想学习前端,但是却不知如何入手,上网查前端学习路线,第一页往往充斥着各种培训公司的广告,又或者是搜前端学习路线图时,出现大量的路线图导致你还是不能确定适合自己的路线。

 

所以在这里我向大家分享一下我走的前端道路。




一:大体上学习前端的两种选择



意思就是你是选择自学还是报社会上的培训班学。为什么要先提这一点呢,因为在我看来这也是学习前端的关键一步。那我给出我的一些看法建议。

1:如果你现在是大一,大二,时间充裕,并且对学习前端有坚定的信念,这里我建议自学,如果你所在的专业开设的有前端课程,你要多与课程老师交流,如果你前端学的差不多了,让课程老师注意到你了,那么以后他可能会带你做项目,甚至把他的一些就业资源推给你。

2:如果你现在是大三,甚至是大三下学期,你要走前端这条路。那肯定最开始是自学。跟着b站上的视频一步一步的来,这时候你要利用好最后的一个寒假和暑假(因为大四上学期就要秋招了)。如果到大四秋招了,你去面试,如果找到工作了,那万事大吉。如果没找到工作,你可以继续学习到大四上学期的一次招聘,但是在我看来你也可以选择报培训班。这就看你的选择了,因为一般培训班的收费在一两万左右。(我目前是大三,正在自学,不知道能不能赶上今年秋招).

3:如果你是大四才开始学习前端,又或者在大四秋招找到的工作不满意,这个时候就可以选择报培训班。一般培训班的收费在一两万左右,在培训班里,因为它对你的就业有一些保证,所以在学习的过程中可能会很严格,你如果认真学习,肯定是能够学会的。并且听说有些培训班如果你最后没找到工作,它会退你一些学费,而且它应该会有内推的名额,但肯定是优异者优先,而且会给你包装简历等等。(我这样说,肯定有些小伙伴会心动,但我可不是打广告的呀,毕竟你也是拿钱换来的资源)。




二:我的前端学习路线(只代表我个人)



 

这张图想必不少人都见过,凭借一图之力劝退的多少前端初学者,哈哈。其实没那么夸张,实际上到第三个阶段就差不多能找工作了,但前提是你要对其特别精通,最好自己开发的有项目。

我是在b站学习的尚硅谷的学习视频,它还整理的有学习路线图:2021年度全网最全Web前端学习路线 - 哔哩哔哩专栏 (bilibili.com)。我不知道其他品牌的教育视频,但在我看来,尚硅谷的学习视频也确实良心。(哈哈,这也不是打广告,大家自行选择。有一个方法,那就是在b站搜索相关知识点,直接跟着播放量高的视频学习)。

那我也分阶段讲述我的前端学习之路。




阶段一:打好基础



html-->css-->js-->js高级-->less-->jQuery-->BootStrap-->AJAX



HTML:超文本标记语言(网页结构)。学习视频:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



css:层叠样式表(添加样式)。学习视频:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



js:让网页相应某种行为(让网页动起来)。学习视频:尚硅谷最新版Javascript基础全套教程完整版(140集实战教学,JS从入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



js高级:详细讲述,以后用到,面试必面。学习视频:尚硅谷Javascript高级教程(Javascript实战进阶)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



Less: 是一门 CSS 预处理语言.学习视频:尚硅谷前端less教程_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



jQuery:是一个快速、简洁的Javascript框架,是继Prototype之后又一个优秀的Javascript代码库。学习视频:尚硅谷jQuery教程(jquery从入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



BootStrap:提供了优雅的HTML和CSS规范。学习视频:【极客学院】一周学会Bootstrap_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



AJAX:前后端交互。学习视频:尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版(ajax最新版)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili




阶段二:学习框架前的铺垫



ES6-->Node.js-->MongoDB-->Webpack-->Git-->TypeScript-->promise-->axios

小伙伴们不要觉得内容多,实际上每个知识点的内容都不多,平均每个知识点会花费两三天的时间,最多的不会超过一周。



ES6:一些新语法。学习视频:尚硅谷Web前端ES6教程,涵盖ES6-ES11_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili。



Node.js:对一些特殊用例进行优化,提供替代的API。学习视频:【尚硅谷】最经典Node.JS全套完整版教程(快速入门nodejs)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili。



MongoDB:非连接式数据库。学习视频:尚硅谷MongoDB基础教程(数据库精讲)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili。



Webpack:学习框架必不可少的。学习视频:尚硅谷最新版Webpack5实战教程(从入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



Git:是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。学习视频:尚硅谷Git教程全套完整版(12h深入掌握git)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



TypeScript:学习过java的人对这应该很熟悉。学习视频:尚硅谷2021版TypeScript教程(李立超老师TS新课)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



promise:学习框架必不可少的一部分。学习视频:尚硅谷Web前端Promise教程从入门到精通(2021抢先版)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



axios:学习框架必不可少的一部分。学习视频:尚硅谷2021最新版axios入门与源码解析_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili(这个视频有几集会有问题,建议自己找视频学习)




阶段三:重头戏(框架)



React-->Vue-->Vue3-->微信小程序



React:一线城市多用框架。学习视频:尚硅谷2021版React技术全家桶全套完整版(零基础入门到精通/男神天禹老师亲授)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



Vue:热门框架。学习视频:尚硅谷Vue核心技术实战教程全套完整版(vue.js初学者快速入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



Vue3:新特性。热门框架。学习视频:尚硅谷2021最新Vue.JS教程快速入门到项目实战(Vue3/VueJS技术详解)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili




阶段四:实战。



实战就是多做项目了,先是跟着网上的一些项目做,多练习。最后团队完成一个有意义的项目。



React实战:尚硅谷React项目教程(react实战全栈谷粒后台)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili



vue实战:尚硅谷Vue实战教程(企业级vue项目,Vue项目硅谷外卖)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili




阶段四:面试题



这里就让小伙伴们失望了。我也将要面临找工作了,但是在面试题上没什么资源,这里就仰仗万能的小伙伴了。求分享(哈哈)




三:相关技术的官网



html,css:HTML 系列教程 (w3school.com.cn)

js:Javascript 教程 | 菜鸟教程 (runoob.com)

less:Less 中文网 (lesscss.cn)

jQuery:Download jQuery | jQuery

BootStrap:Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 Javascript 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)

ES6:ES6 入门教程 - ECMAScript 6入门 (ruanyifeng.com)

Node.js:Node.js (nodejs.org)

MongoDB:MongoDB中文网

Webpack:webpack (docschina.org)

Git:直接搜github

TypeScript:TypeScript中文网 · TypeScript——Javascript的超集 (tslang.cn)

promise:Javascript Promise 对象 | 菜鸟教程 (runoob.com)

axios:axios中文网|axios API 中文文档 | axios (axios-js.com)

React:React 官方中文文档 – 用于构建用户界面的 Javascript 库 (docschina.org)

Vue:Vue.js 教程 | 菜鸟教程 (runoob.com)

 

还有许多比较实用的网站比如:阿里的矢量图库,bootCDN等。




四:好书推荐



js红皮书和犀牛书。(如果你不懂什么意思,直接上淘宝搜就能找到,我还没买不知道全名叫什么,哈哈)。




五:结尾



希望大家多交流学习经验。目前我还没学完,做这个分享也花费不少时间,小伙伴们也不要吝啬一键三连哟。

如果有小伙伴想要一些资料的相关笔记代码,也可以评论私聊我。


推荐阅读
  • 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • jQuery HooRay:一款自创的实用 jQuery 工具插件
    这款插件主要由作者在工作中积累的常用功能开发而成,旨在解决现有插件间的冲突及浏览器兼容性问题。通过整合和优化现有插件,确保其稳定性和高效性。 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中,将行标题字段呈现为锚点(即可点击链接),帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释,即使是新手也能轻松掌握。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • 本文讨论了如何根据特定条件动态显示或隐藏文件上传控件中的默认文本(如“未选择文件”)。通过结合CSS和JavaScript,可以实现更灵活的用户界面。 ... [详细]
  • 本题要求在一组数中反复取出两个数相加,并将结果放回数组中,最终求出最小的总加法代价。这是一个经典的哈夫曼编码问题,利用贪心算法可以有效地解决。 ... [详细]
author-avatar
依love依CENE_790
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有