大前端的学习路径 转自b站up主技术胖

感谢技术胖up主的推荐 能够更加有效率的学习

技术胖的个人空间_哔哩哔哩_Bilibili

(Internet)

1. 网络工作原理

计算机网络原理:视频去哪了呢?_哔哩哔哩_bilibili

2. 什么是HTTP

HTTP协议详解:HTTP协议详解_哔哩哔哩_bilibili

3. 浏览器及工作方式

浏览器是如何运作的?:【干货】浏览器是如何运作的?_哔哩哔哩_bilibili

4. DNS 及其工作原理

DNS基本工作原理:DNS基本工作原理、配置使用_哔哩哔哩_bilibili

直观DNS科普:超直观的DNS科普,一个视频搞懂DNS是啥,是怎么运作的_哔哩哔哩_bilibili

5. 域名相关知识

域名解析完整讲解:域名解析完整讲解视频课程_哔哩哔哩_bilibili

6. 云服务相关知识

揭秘阿里云服务器:【黑马程序员】揭秘阿里云服务器_哔哩哔哩_bilibili

超文本标记语言

(HTML)

1. HTML基础知识学习

HTML全套基础教程:HTML全套基础教程-html实战开发-深入浅出HTML_哔哩哔哩_bilibili

2. HTML 编写规则 和语义化写法

HTML 速成:为初学者准备的:HTML 速成_哔哩哔哩_bilibili

3. 表单和验证

html5表单验证:html5表单验证系列课程_哔哩哔哩_bilibili

4. 公约和最佳实践方法

前端代码规范秘籍:9个前端代码规范秘籍 让你也能写出诗一样的代码_哔哩哔哩_bilibili

5. SEO 基础知识

SEO优化学习教程:【全套SEO优化学习教程】从SEO是什么到网站优化排名_哔哩哔哩_bilibili

层叠样式表

(CSS)

1. CSS 基础知识学习

CSS3基础教程:黑马程序员前端CSS3基础教程,前端必备基础_哔哩哔哩_bilibili

CSS3全套教程:CSS3免费视频教程_哔哩哔哩_bilibili

2. 页面切图和布局实现

  • 浮动布局

  • 浮动布局:【HTML网页制作教程】-页面布局-浮动布局_哔哩哔哩_bilibili

  • 定位布局

  • CSS定位布局:动画解释CSS定位布局-Static, Relative, Absolute, Fixed, Sticky, 五大定位模式实现自由布局_哔哩哔哩_bilibili

  • Display

  • display&visibility:5_display&visibility_哔哩哔哩_bilibili

  • 盒子模型

  • CSS盒子模型与定位:css小白入门编程课程 —— css盒子模型与定位_哔哩哔哩_bilibili

  • Grid 布局

  • 如何用grid:css grid布局实例讲解,手把手教你如何用grid一步步去写页面_哔哩哔哩_bilibili

  • Flex 布局

  • Flex伸缩布局:黑马2019pink老师Flex伸缩布局_哔哩哔哩_bilibili

3. 页面响应式布局设计

六个案例学会响应式布局:六个案例学会响应式布局_哔哩哔哩_bilibili

浏览器脚本语言

(JavaScript)

1. JavaScript基础语法和知识

JavaScript基础语法:JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

2. 使用JavaScript 操作 DOM元素

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

3. Ajax 异步请求相关知识学习

Ajax入门到精通:【尚硅谷】3小时Ajax入门到精通_哔哩哔哩_bilibili

4. ES6 以上版本 的JavaScript

ES6-ES11新特性:尚硅谷Web前端ES6教程,涵盖ES6-ES11_哔哩哔哩_bilibili

版本控制管理系统

Version Control System

1. Git的基本用法

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

2. 相关平台/软件的使用

  • GitHub

  • 十分钟学会Github:GitHub 到底怎么用?十分钟学会 GitHub 基础知识_哔哩哔哩_bilibili

  • GitLab

  • gitlab使用说明:叮~,你收到一份最全的gitlab使用说明_哔哩哔哩_bilibili

  • Gitee

  • 这个看中文网址就可以了,目前B站还没有很好的视频介绍

网络安全相关知识

Web Security Knowledge

1. HTTPS 原理和使用

你连HTTPS原理都不懂:你连HTTPS原理都不懂,还给我讲“中间人攻击”?_哔哩哔哩_bilibili

2. CORS 跨域请求和安全知识

什么是CORS:【跨域请求】【前端】什么是CORS,教你解决跨域问题_哔哩哔哩_bilibili

3. 内容安全策略

网络渗透:学完能渗透色情网站,净化网络空间【网络安全】持续更新~_哔哩哔哩_bilibili

4. OWASP 安全风险知识

OWASP TOP10:【实操教学】OWASP TOP10 网络渗透测试系列课程_哔哩哔哩_bilibili

包管理工具

Package Managers

1. npm

包管理工具:【NPM】包管理工具 #node package manager_哔哩哔哩_bilibili

2. yarn

Yarn入门:Yarn构建工具入门基础_视频教程-慕课网 (B站没有,推荐这个免费)

CSS 预处理 语言

CSS Preprocessors

1. Sass

SCSS从入门到实战:SCSS从入门到实战_哔哩哔哩_bilibili

2. PostCSS

B站没太好的视频,建议买书《深入PostCSS Web设计》

3. Less

前端less教程:尚硅谷前端less教程_哔哩哔哩_bilibili

构建工具

Build Tools

1. 任务执行命令

[Task Runners]

  • npm scripts

  • npm包管理应用:https://www.bilibili.com/video/BV1Dv411W7XP

  • Gulp

  • Gulp入门:千锋教育_JS项目构建工具Gulp入门全套教程_哔哩哔哩_bilibili

2. 打包工具

  • Webpack

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

  • Parcel

  • Parcel初体验:Parcel & Preact 初体验_哔哩哔哩_bilibili

3. 代码格式化工具

  • Prettier

  • Prettier和ESLint使用:【建议收藏】全网最全的讲清eslint和prettier关系的视频!!!前端开发的利器!!!_哔哩哔哩_bilibili

  • ESLint

  • ESLint基础入门:colin3dmax的个人空间_哔哩哔哩_Bilibili

三大前端框架

Web Framework

React.js

React基础视频:React16免费基础视频教程_哔哩哔哩_bilibili

React全家桶:尚硅谷React技术全家桶全套完整版(零基础入门到精通/男神天禹老师亲授)_哔哩哔哩_bilibili

React实战博客:React实战技术博客系统_哔哩哔哩_bilibili

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从入门到精通:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

Angular

Angular基础:某马Angular 39(全) 学到这里就会感觉自己离大佬越来越近了 嘿嘿_哔哩哔哩_bilibili

Web 组件化编程

Web Components

HTML Templates

Custom Elements

Shadow DOM

概要: 此部分内容没有找到合适视频

CSS 相关框架

CSS Frameworks

BootStrap

一周学会BootStrap:【极客学院】一周学会Bootstrap_哔哩哔哩_bilibili

Material UI

Material UI入门教程:react.js & material-ui 入门中文教程 全_哔哩哔哩_bilibili

Materialize CSS

Materialize CSS Crash Course:Materialize CSS Crash Course_哔哩哔哩_bilibili

ReactStrap

JavaScript 语法糖

Type Checkers

TypeScript

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

Flow

服务端渲染

Server Side Rendering (SSR)

React.js

  • Next.js

  • Next.js入门教程:React服务端渲染框架Next.js入门教程_哔哩哔哩_bilibili

  • GatsbyJS

  • GatsbyJS 实战:建立一个火爆的快速网站与 GatsbyJS 和内容_哔哩哔哩_bilibili (英文)

Vue.js

  • Nuxt.js

  • Nuxt.js入门:Nuxt.js免费视频教程 开启SSR渲染_哔哩哔哩_bilibili

Angular

  • Universal

图形化编程

GraphQL

Cocos Creator

Cocos 图形游戏开发:https://www.bilibili.com/video/BV1sA411Y7x4

Three.js

Three.js基础教程-英文:Three.js基础教程_哔哩哔哩_bilibili

Three.js教程:Three.js教程_哔哩哔哩_bilibili

静态站点生成器

Static Site Generators

Next.js

Next.js入门教程:https://www.bilibili.com/video/BV13441117KK

GatsbyJS

GatsbyJS 实战:建立一个火爆的快速网站与 GatsbyJS 和内容_哔哩哔哩_bilibili (英文)

Nuxt.js

Nuxt.js入门:Nuxt.js免费视频教程 开启SSR渲染_哔哩哔哩_bilibili

Vuepress

Vuepress入门到精通:【啰里啰嗦】一步步搭建 VuePress 及优化_哔哩哔哩_bilibili

Hugo

10分钟搭建个人网站:Hugo - 10分钟搭建 & 部署个人网站/博客,简历中的博客网站怎么建_哔哩哔哩_bilibili

移动App开发

Mobile Applications

React Native

ReactNatvie基础:3小时入门ReactNative教程_哔哩哔哩_bilibili

ReactNatvie实战:【叩丁狼教育】ReactNative实战项目演练-自学必备_哔哩哔哩_bilibili

UniApp

Uni-App从入门到实战:Uni-App从入门到实战-黑马程序员杭州校区出品_哔哩哔哩_bilibili

Uni-App美团外卖:uniapp打造美团外卖微信小程序开发,uni-app,vue中高级实战课程,提供https在线接口,可发布上线_哔哩哔哩_bilibili

Flutter

Flutter基础:Flutter基础视频教程_哔哩哔哩_bilibili

Flutter实战:Flutter20个小实例免费视频教程_哔哩哔哩_bilibili

Ionic

Ionic入门:https://www.bilibili.com/video/BV1Ub41117q5

桌面应用开发

Desktop Applications

Electron

Electron入门:https://www.bilibili.com/video/BV1QB4y1F722

Electron基础:Electron免费视频教程-从基础到实战_哔哩哔哩_bilibili

学到此处,基础部分学习已经全部完成。

你可能感兴趣的:(笔记,前端)