1. Toy模板网首页
  2. > Toy博客

大前端知识图谱+B站视频整合

8月前 作者：小番茄夫斯基 分类：Toy博客 阅读(24) 违法举报

这篇具有很好参考价值的文章主要介绍了大前端知识图谱+B站视频整合。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端学习路径B站视频整合

网络知识

  1. 网络工作原理
    计算机网络原理：https://www.bilibili.com/video/BV1xJ41137Q3
  2. 什么是HTTP
    HTTP协议详解：https://www.bilibili.com/video/BV1js411g7Fw
  3. 浏览器及工作方式
    浏览器是如何运作的？：https://www.bilibili.com/video/BV1x54y1B7RE
  4. DNS 及其工作原理
    DNS基本工作原理：https://www.bilibili.com/video/BV1GW411j7Ts
    直观DNS科普：https://www.bilibili.com/video/BV1F54y1R7BC
  5. 域名相关知识
    域名解析完整讲解：https://www.bilibili.com/video/BV1zA411x7Pj
  6. 云服务相关知识
    揭秘阿里云服务器：https://www.bilibili.com/video/BV1Rt411u7k4

超文本标记语言

  1. HTML基础知识学习
    HTML全套基础教程：https://www.bilibili.com/video/BV11t411K74Q
  2. HTML 编写规则 和语义化写法
    HTML 速成：https://www.bilibili.com/video/BV1vs411M7aT
  3. 表单和验证
    html5表单验证：https://www.bilibili.com/video/BV16K4y1Z7Gb
  4. 公约和最佳实践方法
    前端代码规范秘籍：https://www.bilibili.com/video/BV19P4y147Jz
  5. SEO 基础知识
    SEO优化学习教程：https://www.bilibili.com/video/BV1fE411J7ya

层叠样式表

  1. CSS 基础知识学习
    CSS3基础教程：https://www.bilibili.com/video/BV1Bx411u7cS
    CSS3全套教程：https://www.bilibili.com/video/BV1et411q74F
  2. 页面切图和布局实现
  • 浮动布局
  • 浮动布局：https://www.bilibili.com/video/BV1Zs411j7Z3
  • 定位布局
  • CSS定位布局：https://www.bilibili.com/video/BV1ni4y1g7tc
  • Display
  • display&visibility：https://www.bilibili.com/video/BV1HJ411M7CM
  • 盒子模型
  • CSS盒子模型与定位：https://www.bilibili.com/video/BV1P7411G7BW
  • Grid 布局
  • 如何用grid：https://www.bilibili.com/video/BV14C4y1W7oA
  • Flex 布局
  • Flex伸缩布局：https://www.bilibili.com/video/BV1BJ41197XE
  1. 页面响应式布局设计
    六个案例学会响应式布局：https://www.bilibili.com/video/BV1ov411k7sm

浏览器脚本语言https://www.bilibili.com/video/BV1Sy4y1C7ha

  1. JavaScript基础语法和知识
    JavaScript基础语法：https://www.bilibili.com/video/BV1Sy4y1C7ha
  2. 使用JavaScript 操作 DOM元素
    JS必会的DOM BOM操作：https://www.bilibili.com/video/BV1k4411w7sV
  3. Ajax 异步请求相关知识学习
    Ajax入门到精通：https://www.bilibili.com/video/BV1WC4y1b78y
  4. ES6 以上版本 的JavaScript
    ES6-ES11新特性：https://www.bilibili.com/video/BV1uK411H7on

版本控制管理系统

  1. Git的基本用法
    Git最新教程：https://www.bilibili.com/video/BV1FE411P7B3
  2. 相关平台/软件的使用
  • GitHub
  • 十分钟学会Github：https://www.bilibili.com/video/BV1yo4y1d7UK
  • GitLab
  • gitlab使用说明：https://www.bilibili.com/video/BV11E411x7Uv
  • Gitee
  • 这个看中文网址就可以了，目前B站还没有很好的视频介绍

网络安全相关知识

  1. HTTPS 原理和使用
    你连HTTPS原理都不懂：https://www.bilibili.com/video/BV1Up4y1i7PG
  2. CORS 跨域请求和安全知识
    什么是CORS：https://www.bilibili.com/video/BV1Kt411E76z
  3. 内容安全策略
    网络渗透：https://www.bilibili.com/video/BV1kh411W7Vv
  4. OWASP 安全风险知识
    OWASP TOP10：https://www.bilibili.com/video/BV1ey4y1V7Jj

包管理工具

  1. npm
    包管理工具：https://www.bilibili.com/video/BV1Dv411W7XP
  2. yarn
    Yarn入门：https://www.imooc.com/learn/766 (B站没有，推荐这个免费)

CSS 预处理 语言

  1. Sass
    SCSS从入门到实战：https://www.bilibili.com/video/BV1Zg4y1v75U
  2. PostCSS
    B站没太好的视频，建议买书《深入PostCSS Web设计》
  3. Less
    前端less教程：https://www.bilibili.com/video/BV1YW411T7vd

构建工具

  1. 任务执行命令
    [Task Runners]
  • npm scripts
  • npm包管理应用：https://www.bilibili.com/video/BV1Dv411W7XP
  • Gulp
  • Gulp入门：https://www.bilibili.com/video/BV1yA411s72G
  1. 打包工具
  • Webpack
  • Webpack从入门到精通：https://www.bilibili.com/video/BV1e7411j7T5
  • Parcel
  • Parcel初体验：https://www.bilibili.com/video/BV1Pa4y147Kf
  1. 代码格式化工具
  • Prettier
  • Prettier和ESLint使用：https://www.bilibili.com/video/BV183411r7YK
  • ESLint
  • ESLint基础入门：https://space.bilibili.com/390120104/search/video?keyword=ESLint

三大前端框架

React.js

React基础视频：https://www.bilibili.com/video/BV1g4411i7po
React全家桶：https://www.bilibili.com/video/BV1wy4y1D7JT
React实战博客：https://www.bilibili.com/video/BV1CJ411377B
React商城实战：https://www.bilibili.com/video/BV1i5411c7xp

Vue.js

Vue2全家桶：https://www.jspang.com/detailed?id=57
Vue3全家桶：https://www.jspang.com/detailed?id=67
vuejs从入门到精通：https://www.bilibili.com/video/BV1Zy4y1K7SH

CSS 相关框架

BootStrap
一周学会BootStrap：https://www.bilibili.com/video/BV1Lx411v73k
Material UI
Material UI入门教程：https://www.bilibili.com/video/BV12J411s75b
Materialize CSS
Materialize CSS Crash Course：https://www.bilibili.com/video/BV1gx411h7Y5

JavaScript 语法糖

TypeScript从入门到精通：https://www.bilibili.com/video/BV1qV41167VD

服务端渲染

React.js

  • Next.js
  • Next.js入门教程：https://www.bilibili.com/video/BV13441117KK
  • GatsbyJS
  • GatsbyJS 实战：https://www.bilibili.com/video/BV1i4411T7AR （英文）

Vue.js

  • Nuxt.js
  • Nuxt.js入门：https://www.bilibili.com/video/BV1Xt41117Kg

静态站点生成器

Next.js入门教程：https://www.bilibili.com/video/BV13441117KK
GatsbyJS 实战：https://www.bilibili.com/video/BV1i4411T7AR （英文）
Nuxt.js入门：https://www.bilibili.com/video/BV1Xt41117Kg
Vuepress入门到精通：https://www.bilibili.com/video/BV1vb411m7NY
10分钟搭建个人网站：https://www.bilibili.com/video/BV1x64y117PX

移动App开发

ReactNatvie基础：https://www.bilibili.com/video/BV1Eg4y16735
ReactNatvie实战：https://www.bilibili.com/video/BV15K411s75p
UniApp
Uni-App从入门到实战：https://www.bilibili.com/video/BV1BJ411W7pX

Uni-App美团外卖：https://www.bilibili.com/video/BV1Zt4y117RR

Flutter基础：https://www.bilibili.com/video/BV15t411U7yf
Flutter实战：https://www.bilibili.com/video/BV1kt411B7mu
Ionic入门：https://www.bilibili.com/video/BV1Ub41117q5

桌面应用开发

Electron入门：https://www.bilibili.com/video/BV1QB4y1F722
Electron基础：https://www.bilibili.com/video/BV177411s7Lt文章来源地址https://www.toymoban.com/news/detail-417063.html

到了这里，关于大前端知识图谱+B站视频整合的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包