网络知识 (Internet)

  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

  5. 直观DNS科普:https://www.bilibili.com/video/BV1F54y1R7BC

  6. 域名相关知识 域名解析完整讲解:https://www.bilibili.com/video/BV1zA411x7Pj

  7. 云服务相关知识 揭秘阿里云服务器:https://www.bilibili.com/video/BV1Rt411u7k4

超文本标记语言 (HTML)

  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

层叠样式表 (CSS)

  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

浏览器脚本语言 (JavaScript)

  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

版本控制管理系统 Version Control System

  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

网络安全相关知识 Web Security Knowledge

  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 .WASP 安全风险知识 OWASP TOP10:https://www.bilibili.com/video/BV1ey4y1V7Jj

包管理工具 Package Managers

  1. npm 包管理工具:https://www.bilibili.com/video/BV1Dv411W7XP

CSS 预处理 语言 CSS Preprocessors

  1. Sass SCSS从入门到实战:https://www.bilibili.com/video/BV1Zg4y1v75U

  2. Less 前端less教程:https://www.bilibili.com/video/BV1YW411T7vd

构建工具 Build Tools

  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

  2. 代码格式化工具 Prettier Prettier和ESLint使用:https://www.bilibili.com/video/BV183411r7YK

ESLint ESLint基础入门:https://space.bilibili.com/390120104/search/video? keyword=ESLint

三大前端框架 Web Framework

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

Angular Angular基础:https://www.bilibili.com/video/BV1Wx411R7qt

CSS 相关框架 CSS Frameworks 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 语法糖 Type Checkers TypeScript TypeScript从入门到精通:https://www.bilibili.com/video/BV1qV41167VD

服务端渲染 Server Side Rendering (SSR) React.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

图形化编程 GraphQL

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

Three.js基础教程-英文:https://www.bilibili.com/video/BV1ks411W78i

Three.js教程:https://www.bilibili.com/video/BV1va4y1p7QB

静态站点生成器 Static Site Generators

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

GatsbyJS GatsbyJS 实战:https://www.bilibili.com/video/BV1i4411T7AR (英文)

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

Vuepress Vuepress入门到精通:https://www.bilibili.com/video/BV1vb411m7NY

Hugo 10分钟搭建个人网站:https://www.bilibili.com/video/BV1x64y117PX

移动App开发 Mobile Applications

ReactNatvie基础:https://www.bilibili.com/video/BV1Eg4y16735

ReactNatvie实战:https://www.bilibili.com/video/BV15K411s75p

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

桌面应用开发 Desktop Applications

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

Electron基础:https://www.bilibili.com/video/BV177411s7Lt
最后,在学习过程中会遇到各种各样的问题,如果问题很久不能解决,就会打击到你学习的信心,最终导致放弃。所以你最好还是有一个经验丰富的人在前期能够带一带你,帮你解答学习过程中遇见的问题。身边没有能够帮你解答问题的人,加一些学习群或者加我聊聊,帮你解决各种问题~

多年开发经验,你可以私信我你目前的情况,我可以帮你根据你的时间制定一个学习规划,学习过程中遇见什么问题也可以随时问我。

web前端自学路线(b站web好评排行课程汇总)相关推荐

  1. 零基础web前端学习路线【全新web前端入门视频教程】

    零基础怎么学web前端?下面就一起来看看吧! 想学好web前端,该从哪里入手学习呢?零基础学习web前端学习路线图从哪里可以找到呢?这里为大家整理完整的零基础 前端学习路线分享给大家. 适合零基础学员 ...

  2. 史上最全web前端学习路线

    web前端学习路线 一.web前端学习路线 一.web前端学习路线 HTML 基础,建议时常两周,包括面试的热点:margin塌陷.bfc CSS 基础,建议时长两周,包括权重 Js(Ajax) 基础 ...

  3. 爱创课堂分享web前端学习路线自学如何找到工作

    爱创课堂分享web前端学习路线自学如何找到工作,自学能不能学会WEB前端并且找到WEB前端开发岗位的工作取决于自身条件,如果基础好,自律性强那么将会容易很多,还有就是自学最难克服的并不是知识点,而是自 ...

  4. 2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记

    2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...

  5. 一个「学渣」从零开始的Web前端自学之路

    从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的"丰富". 最后的机缘巧合下,走上了前端开发之路,作为 ...

  6. 一个「学渣」从零Web前端自学之路

    从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的"丰富". 最后的机缘巧合下,走上了前端开发之路,作为 ...

  7. 一个「学渣」的从零Web前端自学之路,附学习资源分享

    从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的"丰富". 最后的机缘巧合下,走上了前端开发之路,作为 ...

  8. 45万年薪web前端工程师,给你一条“不归路”-系统的web前端学习路线

    首先,对于HTML.CSS的学习内容,完全看视频就可以学,因为HTML.CSS没有任何的逻辑,而w3cschool是我们必须参考的标准,最重要的是 一遍一遍的敲,不要偷懒:然后参考大网站的官网去模仿, ...

  9. web前端自学之路分享

    前言: 2018年随着编程的火热和自身对这岗位的热爱,这一年毅然决然的开始了自己的自学之路,这一阶段的学习过程中有很多感触,随着工作逐步稳定想要写下来和正在学习或者正在犹豫要不要学习的人们一起分享.也 ...

最新文章

  1. spring mvc 篇
  2. 前言:写python和django博客的背景
  3. uva 11212 Editing a Book
  4. python编程经典案例-一个非常适合Python新手的编程案例——投票小程序
  5. HTML5的明天,局部有小雨
  6. Pool多进程的加速
  7. linux上安装hackrf_在Linux上安装Kubectl
  8. 《Access 2007开发指南(修订版)》一一1.5 什么是数据库对象
  9. Axure RP 8--模板的使用
  10. 超简单的倒计时代码编写
  11. 数据结构的大体学习框架
  12. ps顶级调色技术解密视频教程 终极大法
  13. matlab神经网络函数(feedforwardnet,fitnet,patternet)
  14. 外包公司干了不到 3 个月,我离职了
  15. webRtc+websocket多人视频通话
  16. 千万别学网络工程,这是为什么?为什么有这样的说法
  17. NSD Devops day03
  18. 任务36 学生考勤信息管理系统
  19. python镜像站点
  20. 优雅的自定义 ThreadPoolExecutor 线程池

热门文章

  1. 可折叠手机讲这么久!实用性依然有待检验
  2. android 触摸屏双击事件
  3. PS制作文字图片的倒影
  4. 不需要库函数实现不依赖语言的RoundUp以及Round(四舍五入)
  5. 一文看尽 27 篇 CVPR2021 2D 目标检测论文
  6. 很多朋友都在想,做软件测试有没有捷径可以走,有没有什么绝招?
  7. source insight 常规配置以及背景配色
  8. JAVA集成PC端银联支付(含代码和图文详解)
  9. 计算机应用水平等级考试样题和练习,全国计算机等级考试一级考试练习题(一)...
  10. [论文阅读笔记51]关系抽取【DNN】综述(监督与远程监督)