程序员经验分享-hwhale

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

2023-05-16

文章目录

  • 前端学习路径B站视频整合
    • 网络知识
    • 超文本标记语言
    • 层叠样式表
    • 浏览器脚本语言[https://www.bilibili.com/video/BV1Sy4y1C7ha](https://www.bilibili.com/video/BV1Sy4y1C7ha)
    • 版本控制管理系统
    • 网络安全相关知识
    • 包管理工具
    • CSS 预处理 语言
    • 构建工具
    • 三大前端框架
      • React.js
      • Vue.js
    • CSS 相关框架
    • JavaScript 语法糖
    • 服务端渲染
      • React.js
      • Vue.js
    • 静态站点生成器
    • 移动App开发
      • Uni-App美团外卖：[https://www.bilibili.com/video/BV1Zt4y117RR](https://www.bilibili.com/video/BV1Zt4y117RR)
    • 桌面应用开发

前端学习路径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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

大前端知识图谱+B站视频整合 的相关文章

随机推荐

  • 【ChatGPT快速搭建】手把手教你搭建一个可快速响应的ChatGPT网站，并通过DNS域名部署上线

    x1f680 本篇文章会实现一个不用 魔法方法 也可以访问运行的ChatGPT网站 x1f680 实现 网站部署 gt 域名购买 gt DNS解析 gt 公开上线 ChatGPT搭建全流程 1 先看最终效果2 vervel网站部署工具简介3

  • C/C++语言：判断是否是素数

    题目 xff1a 给出一个大于等于2的正整数 n xff0c 判断它是不是一个素数 xff08 质数 xff09 注 xff1a 1 素数 xff08 质数 xff09 xff1a 除了1和它本身之外 xff0c 没有其他的因数 xff1b

  • 信息系统项目管理-信息化和信息系统-一

    一 信息资源日益成为重要生产要素 无形资产和社会财富 xff0c 被认为是与土地 能源 材料同等重要的战略资源 二 信息论 与控制论 系统论并称为现代科学的三论 三 信息系统突出的三大系统特性开放性 脆弱性 健壮性 四 管理模型是指系统服务

  • java中的异常处理

    异常概述 异常的作用 xff1a 增强程序的健壮性 java中异常以什么形式存在 xff1f 异常在java中以类的形式存在 xff0c 每一个异常类都可以创建异常对象 JVM执行到某一处觉得有异常 xff0c 会new异常对象 xff0c

  • 人工智能在医学影像中的研究与应用

    人工智能在医学影像中的研究与应用 韩冬 李其花 蔡巍 夏雨薇 宁佳 黄峰 沈阳东软医疗系统有限公司 xff0c 辽宁 沈阳 110167 慧影医疗科技 xff08 北京 xff09 有限公司 xff0c 北京 100192 东软集团股份有限

  • 开始

    文章目录 徐工本科生 希望明天更好 xff0c 今天开始扬帆起航 新的改变功能快捷键合理的创建标题 xff0c 有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中 居左 居右

  • Linux-生产者消费者模型

    生产者消费者模型 生产者消费者模型概念生产者消费者模型特点生产者消费者模型优点基于BlockingQueue的生产者消费者模型基于阻塞队列的生产者消费者模型 模拟实现生产者消费者模型多生产者和多消费者 生产者消费者模型概念 生产者消费者模型

  • Ubuntu20.04下更新系统Python版本

    起因 xff1a 写Python时报错 xff1a TypeError unsupported operand type s for 61 dict and dict 原因 xff1a python3 9 支持对 dict 类型使用 xff

  • Ubuntu密码忘记怎么办

    1 重启Ubuntu xff0c 长按shift出现以下界面 xff0c 按回车键 2 紧接着进入如下界面 xff0c 选中recovery mode的选项 xff0c 按 e 进入界面 xff0c 务必记得不要按enter键 3 找到下图

  • 小程序视频截gif_3个简单的应用程序，可让您深入视频和GIF

    小程序视频截gif Deepfakes make it possible to manipulate videos and GIFs The technology has become so easy to use you can now

  • Spring框架详解（建议收藏）

    1 什么是Spring xff1f 官网 xff1a https spring io 侠义的Spring是指Spring框架 xff08 Spring Fremework xff09 https spring io projects spr

  • Debian (Linux)安装UFW防火墙

    Debian Linux 安装UFW防火墙 1ufw简介 UFW xff0c 即简单防火墙 xff0c 是iptables的接口 xff0c 旨在简化防火墙的配置过程 尽管iptables是可靠且灵活的工具 xff0c 但对于初学者而言 x

  • 高性能动画JSON动画

    animejs 它是一个js动画库 xff0c 是对transform进行封装 xff0c 使其受js控制 拥有更高性能和很好的兼容 最重要的是 xff1a 提供了很多回调 监听方法 eg 每帧回调 每次循环回调 循环开始的回调 提供了一个

  • C++ 生产者消费者示例代码

    三部分构成 xff1a 生产者 消费者 仓储 span class token macro property span class token directive keyword include span span class token

  • 7-1 将数组中的数逆序存放 (15 分)

    7 1 将数组中的数逆序存放 15 分 本题要求编写程序 xff0c 将给定的n个整数存入数组中 xff0c 将数组中的这n个数逆序存放 xff0c 再按顺序输出数组中的元素 输入格式 输入在第一行中给出一个正整数n xff08 1 n 1

  • JavaFX学习笔记（最全，最详细）

    文章目录 Java JavaFX桌面GUI开发1 基本概念2 最小框架代码3 控件布局4 xff0c 初步认识stage窗口5 xff0c stage窗口模式 StageStyle 6 xff0c screen类的使用7 xff0c Gro

  • vue3安装和开发环境搭建

    文章目录 一 xff0c 简介二 xff0c vue cil 搭建 vue3 开发环境三 xff0c 增加typescipt 一 xff0c 简介 二 xff0c vue cil 搭建 vue3 开发环境 1 xff0c 安装 xff1a

  • 使用vite创建vue项目和使用vue-cli创建项目的区别

    文章目录 一 xff0c 介绍二 xff0c vite创建项目介绍三 xff0c vue cli创建项目介绍 xff08 1 xff09 安装升级 xff08 2 xff09 创建项目 一 xff0c 介绍 Vite 是一个 web 开发构

  • vue3中的组件通信【2】《爷孙组件通信》

    文章目录 爷孙组件通信provide inject响应性数据的传递与接收 爷孙组件通信 顾名思义 xff0c 爷孙组件是比 父子组件通信 要更深层次的引用关系 xff08 也有称之为 隔代组件 xff09 xff1a Grandfather

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

    文章目录 前端学习路径B站视频整合网络知识超文本标记语言层叠样式表浏览器脚本语言 https www bilibili com video BV1Sy4y1C7ha https www bilibili com video BV1Sy4y1

热门标签