前端学习路线【本科还在迷茫的宝子们抓紧收藏起来跟着学习吧】

本文介绍了Python全栈学习的详细路线,涵盖了HTML、CSS、JavaScript基础知识,jQuery和ES6的运用,Vue框架,进阶的JavaScript特性、前端工程化、ES6-ES11,React技术,路由与状态管理,以及UI库、Node.js、Git和高级阶段的Webpack和性能安全等内容,强调实践和持续学习的重要性。
摘要由CSDN通过智能技术生成

        有粉丝私信我让我给大家整理一下Python的学习路线,接下来的博客我将会给大家陆续进行更新,涵盖Python的一条完整的全栈学习路线,需要的小伙伴们收藏+关注吧,我会在后面陆续完成更新~❥(^_-)~

        前端的全栈开发是一项广泛应用的技术领域,在这篇技术博客中,我们深入探讨了前端全栈学习路径,从入门初级、进阶到高级,帮助读者建立起系统而完善的前端技能体系。从建立基本的网页结构到掌握前端框架和工程化工具,再到深入研究性能优化、安全和移动端开发,读者将逐步成为一名熟练的前端全栈工程师。在学习的过程中,实践和参与实际项目是提升技能的关键,同时保持对新技术的敏感性,不断追求学习和进步。祝愿每一位读者在前端的探索之路上取得巨大的成功!

三天疯狂的用心整理(两天晚饭没吃o(╥﹏╥)o),请大数据将我推向更多需要的朋友们吧!!!!!

        宝子们,关注不迷路哟    ~ღ( ´・ᴗ・` )比心~

目录

三天疯狂的用心整理(两天晚饭没吃o(╥﹏╥)o),请大数据将我推向更多需要的朋友们吧!!!!!

第一部分:入门初级阶段

1.1. HTML、CSS基础

1.2. JavaScript基础

1.3. 前端开发工具

1.4. jquery

1.5. ES6

1.6. Vue

第二部分:进阶

2.1. JavaScript高级特性

2.2. 前端工程化

2.3. ES6-ES11

2.4. React

2.5. 前端路由和状态管理

2.6. ui库

2.7. nodejs

2.8. git

第三部分:高级阶段

3.1. WebPack

3.2. 前端性能优化       

3.3. 前端安全       

3.4. TypeScript       

总结


第一部分:入门初级阶段

1.1. HTML、CSS基础

        HTML和CSS是前端基础中的基础,是每个前端开发者的入门。记住HTML中常用标签,理解熟练使用HTML(超文本标记语言),记住CSS汇总常用的属性(背单词),能够结合HTML做出简洁的的网页。学会使用音视频标签,学会css动画和3d效果,简单掌握BootStrap基础用法(会玩就行),养成使用官方文档的习惯。

  • HTML基础: 了解HTML的基本结构和标签,学会创建网页结构。
  • CSS基础: 学会使用CSS样式表美化网页,掌握选择器、盒模型等基本概念。

学习链接:

视频链接:黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

网页链接:Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

1.2. JavaScript基础

       知道JS数据类型 函数 判断 for循环等基础逻辑方法的使用以及对JS的对象,数组,函数有了解(常用数组方法,切数组,截取数组方法,为对象添加数据方法,修改对象方法,理解浅拷贝和深拷贝,理解通过遍历树比较对象的方法(数据结构的树这一节知识点))。

  • JavaScript基础: 掌握JavaScript的基本语法,了解变量、数据类型、运算符等,实现简单的交互效果。

学习链接:

视频教程:黑马程序员JavaScript全套教程,Web前端必学的JS入门教程,零基础JavaScript入门_哔哩哔哩_bilibili

视频教程:黑马程序员JavaScript核心教程,前端基础教程,JS的DOM BOM操作教程_哔哩哔哩_bilibili

文档教程:MDN Web Docs

1.3. 前端开发工具

        前端开发工具是前端开发过程中的利器,能够提高开发效率、简化任务、优化代码以及进行调试和测试。

  • 选择合适的编辑器和IDE 学会使用VS Code等流行的编辑器,提高开发效率。
  • 浏览器开发者工具调试技巧: 掌握浏览器开发者工具的使用,进行代码调试和性能优化。

学习链接:

视频教程:前端开发的实用工具_哔哩哔哩_bilibili

视频教程:软件推荐:六款前端开发工具,你喜欢哪一款?_哔哩哔哩_bilibili

1.4. jquery

        jQuery是一款快速、轻量级、跨浏览器的JavaScript库,用于简化HTML文档的遍历、事件处理、动画操作以及AJAX交互。在Web开发中,jQuery曾经是广泛使用的工具,尤其是在处理不同浏览器的兼容性和简化DOM操作方面。     

 我要求大家实现的目标:
        1.jquery用于简化JS开发,简化JS语法,虽然技术较老,现已经不常用,但有时在工作时会接触到部分老项目仍沿用该技术。
        2.jquery Ajax(特别注意:如果觉得本课程难度较大,可当后面学完VUE后继续学习本模块的部分)。使用jquery Ajax,首次尝试与后端交互,到目前为止的学习都是静态页面,那是因为没有接入后端,通过学习jquery Ajax,你将能够简单与后端进行交互,让你的页面动起来~

  • 了解其特点: 掌握简化DOM操作,了解事件处理、AJAX交互以及动画效果等。
  • 用法: 掌握选择器及链式调用等等。

学习链接:

视频教程:黑马程序员web前端基础教程_4天从零玩转jQuery_哔哩哔哩_bilibili

视频教程:黑马程序员AJAX零基础到精通_整合Git核心内容全套教程(2022年已更新优化)_哔哩哔哩_bilibili

1.5. ES6

        ES6,也被称为ECMAScript 2015,是JavaScript的一个版本,于2015年发布。ES6引入了许多新的语法特性和功能,为JavaScript带来了更强大、更灵活的编程能力。

        我们要掌握这一模块, ES6是JS的新特性,往后学习当今各种流行框架的基础。开发项目中90%都会使用到。     

  • let和const 声明let关键字用于声明变量,其作用域是块级作用域,解决了var存在的变量提升和作用域问题,const关键字用于声明常量,一旦赋值后不可再改变。它也具有块级作用域。
  • 箭头函数 ES6引入了箭头函数,简化了函数的书写,同时改变了函数内部this的指向。
  • 解构赋值:解构赋值允许按模式匹配从数组和对象中提取值,并对变量进行赋值。

  • 扩展运算符:扩展运算符用于将数组或对象展开为独立的元素。

学习链接:

视频教程:ES6从入门到精通系列(全23讲),开发必备,推荐必看_哔哩哔哩_bilibili

1.6. Vue

       Vue.js是一款用于构建用户界面的渐进式JavaScript框架。它的目标是通过简单的API提供高效的数据绑定和组件系统,使得构建交互性强、可复用的Web界面变得更加容易。

        特别注意:可以先看完VUE2,然后继续学习前端进阶的内容)了解VUE组件(包括组件传值,共享方法等),路由(修改路由,获取路由,在路由添加参数),生命周期(理解官网生命周期那张图),vue动画。     

  • 数据绑定Vue通过数据绑定建立了视图和数据的关联,当数据发生变化时,视图会自动更新。
  • 指令: Vue提供了丰富的指令用于在模板中声明式地应用动态行为。
  • 组件:Vue允许开发者将页面划分为独立、可复用的组件,提高了代码的模块化和可维护性。

  • 生命周期钩子:Vue组件生命周期钩子允许开发者在组件创建、更新和销毁等阶段执行自定义逻辑。

学习链接:

视频教程:尚硅谷Vue技术全家桶(天禹老师主讲)_哔哩哔哩_bilibili

文档教程:Element - The world's most popular Vue UI framework

文档教程:Vue.js - 渐进式 JavaScript 框架 | Vue.js

文档教程:Less 快速入门 | Less.js 中文文档 - Less 中文网

第二部分:进阶

2.1. JavaScript高级特性

       JavaScript作为一门灵活且功能强大的语言,具有许多高级特性,这些特性使得开发者能够写出更加优雅、可维护和高效的代码。     

  • Promise和Async/Await:学会处理异步操作,提高用户体验。
  • DOM和事件处理: 了解DOM树结构,掌握事件处理机制,实现动态页面交互。

学习链接:

视频教程:黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程_哔哩哔哩_bilibili

博客:JavaScript 开发者应懂的 33 个概念_javascript开发者应懂的33个概念-CSDN博客

2.2. 前端工程化

       前端工程化是一种通过工程化的方法提高前端开发效率、规范项目结构、优化性能和提升可维护性的开发模式。

  • npm和yarn:学会使用npm和yarn管理项目依赖。
  • Webpack: 掌握Webpack的基本配置,实现代码打包和优化。
  • 包管理器:包管理器用于管理项目的依赖关系,包括第三方库、工具和框架。最常见的包管理器是npm和Yarn。
  • 打包工具:打包工具用于将多个模块或文件合并为一个或多个静态资源文件,减少网络请求次数,提高页面加载速度。常见的打包工具有Webpack、Parcel和Rollup

学习链接:

视频教程:前端工程化精讲_哔哩哔哩_bilibili

2.3. ES6-ES11

       ECMAScript(简称ES)是JavaScript的标准化规范,而ES6到ES11分别是ECMAScript 2015到ECMAScript 2020的版本。     

        本章节旨在了解js更多的语法特性,哇~原来js也能面向对象编程,让你的js用的更加出神入化。

  • ES6:初级阶段提到过。
  • ES7: 其中Array.prototype.includes()用于判断数组是否包含特定元素。
  • ES8:其中的async/await用于更方便地处理异步代码,基于Promise,Object.values() 和 Object.entries()则分别返回对象的值数组和键值对数组。
  • ES9:异步迭代引入异步生成器和 for-await-of 循环,使得异步迭代更加方便。
  • ES10:Array.prototype.flat() 和 Array.prototype.flatMap()用于将嵌套数组扁平化,以及对数组元素进行映射和扁平化。
  • ES11:允许在访问可能不存在的对象属性或方法时不引发错误。

学习链接:

视频教程:尚硅谷Web前端ES6教程,涵盖ES6-ES11_哔哩哔哩_bilibili

2.4. React

        React是由Facebook开发的用于构建用户界面的JavaScript库。它以声明式、高效、灵活的特点而闻名,被广泛应用于构建单页面应用(SPA)和复杂的用户界面。       

        本章节的目标在于了解react相关语法及组件。     

  • 组件:React中一切皆是组件,可以将用户界面拆分为独立的、可复用的组件。组件可以是类组件或函数组件。
  • JSX: JSX是一种JavaScript的语法扩展,它允许在JavaScript代码中编写类似HTML的结构。JSX使得React组件的定义和渲染更加直观。
  • 状态:状态是组件内部用于存储和管理数据的机制。通过this.setState方法,React组件可以更新其状态,并触发重新渲染。
  • 生命周期:React组件生命周期包括挂载、更新和卸载等阶段。通过生命周期方法,开发者可以在组件的不同阶段执行特定的逻辑。

学习链接:

视频教程:黑马程序员React从零基础入门到react好客租房项目实战-pink老师推荐(素材持续更新)-全套视频_哔哩哔哩_bilibili

2.5. 前端路由和状态管理

        React是由Facebook开发的用于构建用户界面的JavaScript库。它以声明式、高效、灵活的特点而闻名,被广泛应用于构建单页面应用(SPA)和复杂的用户界面。       

        本章节的目标在于了解react相关语法及组件。     

  • Vue Router和React Router:学习前端路由的实现和使用。
  • Vuex和Redux: 了解前端状态管理的概念和使用。

学习链接:

视频教程:

前端路由解析_哔哩哔哩_bilibili

2.6. ui库

       在前端开发中,有许多优秀的UI库(User Interface Library),它们提供了丰富的UI组件和样式,可以帮助开发者更高效地构建用户界面。       

        本章节的目标在于熟练掌握一些ui库。     

  • Bootstrap:Bootstrap是由Twitter开发的开源前端框架,提供了一套现代化的UI组件和样式,使得构建响应式和美观的网站变得更加容易。
  • Ant Design: Ant Design是由阿里巴巴开发的企业级UI设计语言和React组件库,提供了丰富的组件和设计规范,适用于构建现代化的Web应用。
  • Material-UI:Material-UI是一个基于Google的Material Design规范的React组件库。它提供了许多符合Material Design风格的组件,易于集成到React应用中。
  • Semantic UI:Semantic UI是一个现代化的UI框架,使用简洁的HTML语言描述界面,同时提供了灵活的CSS和JavaScript组件,适用于构建美观的用户界面。
  • Element UI:Element UI是一套基于Vue.js的组件库,设计简洁而美观。它提供了许多常用的UI组件,适用于构建Vue.js应用。
  • Chakra UI:Chakra UI是一个React组件库,注重可访问性和开发者友好性。它提供了一组简单而强大的组件,使得构建现代React应用变得更加容易。
  • Bulma:Bulma是一个基于Flexbox的现代CSS框架,提供了一套简单而灵活的样式和布局,适用于快速构建响应式的网页。
  • Vuetify:Vuetify是一个基于Vue.js的Material Design组件库,提供了丰富的Material Design风格的组件,适用于构建Vue.js应用。

学习链接:

文档:Element - The world's most popular Vue UI framework

文档:Ant Design - A UI Design Language

文档:iView - 一套高质量的UI组件库

2.7. nodejs

        Node.js是一个基于Chrome V8引擎的JavaScript运行时,允许在服务器端运行JavaScript。它是一个轻量级、高效的平台,用于构建可扩展的网络应用程序。       

        本章节的目标在于让你了解nodejs,一个让你完成简单后端开发,实现全栈梦的技术。     

  • JavaScript运行时:Node.js使得开发者能够使用JavaScript语言在服务器端运行代码,而不仅仅局限于浏览器中。这样一来,可以实现前端和后端使用同一种语言,从而实现更好的代码复用和协同开发。
  • 事件驱动和非阻塞I/O: Node.js采用事件驱动的架构,通过事件循环来处理请求和响应。同时,它采用非阻塞I/O模型,使得服务器能够处理大量并发请求而不需要创建大量线程。这种设计使得Node.js在处理高并发场景下表现出色。
  • 模块化:Node.js支持模块化开发,开发者可以将功能划分为模块,通过require关键字引入模块。这种模块化的开发风格有助于提高代码的可维护性和复用性

学习链接:

视频教程:千锋前端Node.JS教程,快速入门nodejs全套完整版_哔哩哔哩_bilibili

2.8. git

       Git是一个分布式版本控制系统,用于跟踪文件和项目的变化。它是由Linus Torvalds为管理Linux内核开发而创建的,如今已成为广泛用于各种软件开发项目的版本控制工具。       

        本章节的目标在于让你了解一些git命令。     

  • 一些基本概念​​​​​​​:Git仓库是包含项目版本历史记录的地方,它可以是本地仓库或远程仓库。提交表示对项目文件的一次更改。分支是项目的不同版本。合并将一个分支的更改合并到另一个分支。拉取从远程仓库获取最新更改,推送将本地更改上传到远程仓库。
  • 常用操作: 如初始化仓库、添加和提交文件、创建和切换分支、合并分支等等。

学习链接:

视频教程:【狂神说Java】Git最新教程通俗易懂_哔哩哔哩_bilibili

第三部分:高级阶段

3.1. WebPack

     Webpack是一个现代JavaScript应用程序的静态模块打包工具。它分析项目结构,找到JavaScript模块以及它们的依赖,然后生成用于浏览器的静态资源(通常是JavaScript、但也可以是CSS、图片等)。       

        本章节的目标在于让你了解webpack5个核心概念 Entry Output Loader Plugin Mode,记住常用的依赖包,配置devServer提高开发效率。     

  • 一些基本概念​​​​​​​:入口是Webpack开始构建依赖图的地方。输出定义了Webpack构建后的文件输出位置以及文件名。Loader用于对模块的源代码进行转换。插件用于执行更广泛的任务,例如打包优化、资源管理、注入环境变量等。
  • 常用配置: 如多入口、CSS处理、文件加载器等等。

学习链接:

视频教程:尚硅谷新版Webpack实战教程(从入门到精通)_哔哩哔哩_bilibili

3.2. 前端性能优化       

        前端性能优化是提高网站加载速度和用户体验的关键,本章节的目标在于让你了解并掌握前端性能优化的方法,可以做到自主优化页面的渲染功能。     

  • 网络优化了解掌握CDN和懒加载,其可以优化资源加载速度。
  • 页面渲染优化​​​​​​​: 了解学习减少重绘和重排,可以自主优化页面渲染性能。

学习链接:

视频教程:前端性能优化方法与实战_哔哩哔哩_bilibili

3.3. 前端安全       

        前端安全是保护前端应用免受恶意攻击和数据泄露的一系列措施。     

  • XSS和CSRF攻击:了解XSS和CSRF攻击,学习防范常见前端安全问题的方法。
  • 跨站请求伪造: 了解其攻击原理CSRF攻击利用用户已经登录的身份,在用户不知情的情况下执行恶意操作,如修改密码、发起转账等。
  • 点击劫持:点击劫持通过透明的覆盖在网页上层,引导用户点击看似无害的页面元素,实际触发隐藏在下层的恶意操作,可以使用Frame Busting技术、X-Frame-Options头部等方式来进行攻击防范。

  • 不安全的第三方组件:使用不安全或被植入恶意代码的第三方组件可能导致安全漏洞,选择可信赖的第三方组件,并定期检查依赖项。

学习链接:

视频教程:【黑客基础】前端安全课程_哔哩哔哩_bilibili

3.4. TypeScript       

        TypeScript是一种由微软开发的开源编程语言,是JavaScript的超集,添加了静态类型、接口、泛型等特性。       

        本章节我们要了解Ts的语法以及使用原理,尝试尝试玩玩js项目转换成ts项目。     

  • 类型系统TypeScript引入了静态类型,即在编写代码时明确变量的类型。同时也引入了接口,接口用于定义对象的结构,包括属性的名称和类型。泛型允许在编写函数或类时使用参数化的类型,提高代码的复用性和灵活性。
  • 类和对象: TypeScript支持类的定义,包括构造函数、成员方法和属性。类可以继承父类,并且子类可以重写父类的方法实现多态。TypeScript支持模块化,可以使用exportimport关键字来创建和使用模块。
  • 高级类型:TypeScript提供了丰富的高级类型,如联合类型、交叉类型、映射类型等,使得代码更加灵活。

学习链接:

视频教程:Typescript教程_Typescript视频教程 ts入门实战视频教程-2021年更新 包含Vue3+Ts_哔哩哔哩_bilibili

总结

         通过以上学习路径,你将逐步成为一名熟练的前端开发者。记得在实际项目中不断实践,参与开源项目,保持对新技术的敏感性,前端领域的知识更新速度快,持续学习是成为优秀前端工程师的关键。祝你前端路上顺利!

  • 24
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小羊一定要努力变强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值