【建议收藏】91个前端开发必备学习国内外免费网站和个人博客

时间：2023-05-24 13:18:01 | 来源：网站运营

时间：2023-05-24 13:18:01 来源：网站运营

【建议收藏】91个前端开发必备学习国内外免费网站和个人博客：

看完这篇91个网站，就不需要在看其他的了。

HTML【6】个+CSS【10】个 + JavaScript【10】个 + 前端框架【17】个 + 算法【9】个 +面试【4】个+技术社区【6】个+工具篇【26】个 + 其他【10】个+学习视频【2】个。

关于前端所有的学习网站、各种工具、实战网站等等，都这一篇文章了。

记得点赞+收藏，以后绝对用得到

HTML免费自学网

W3school：

地址：http://www.w3school.com.cn/

"W3School是一个非常好的网页开发和设计学习资源，涵盖了HTML, CSS, JavaScript, PHP, SQL等各种主流技术。它拥有简洁易懂的教程，以及大量的示例代码，可以帮助您快速理解并掌握技能。我强烈推荐这个网站给所有对网页开发和设计感兴趣的人，无论您是初学者还是专业人员。"

MDN 官方教程：

地址：https://developer.mozilla.org/zh-CN/

"MDN是一个非常强大的Web开发学习资源，提供了全面而详细的Web技术文档，包括HTML, CSS, JavaScript, API等。

作为一个开源社区，MDN不仅拥有丰富的教程和代码示例，还有专业的开发人员参与编写和维护，保证了其内容的高质量和时效性。我强烈推荐这个网站给所有对Web开发感兴趣的人，无论您是初学者还是专业人员。"

FreeCodeCamp ：

地址：https://www.freecodecamp.org/

FreeCodeCamp 是一个免费的在线编程学习平台，提供了大量的编程课程和实践项目。

以下是一段推荐语："如果你想提高你的编程技能，我强烈推荐 FreeCodeCamp。

这个平台拥有丰富的课程和实践项目，帮助你不断提高你的技能，并且完全免费！赶快去试试吧！"

菜鸟教程：

地址：菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)

菜鸟教程是一个在线技术学习网站，提供了大量的免费教程和文章，覆盖了多种技术领域，包括编程语言、数据库、Web 开发等。

如果你想学习技术，我强烈推荐菜鸟教程。这个网站拥有大量免费的教程和文章，让你可以轻松学习到多种技术领域的知识，并且清晰易懂！赶快去试试吧！

HTML.com ：

地址：http://HTML.com

一个全面的 HTML 学习网站，提供了从基础到高级的教程。

如果你想学习 HTML，那么 http://HTML.com 是你不可错过的选择。这个平台拥有详细易懂的教程，帮助你从零开始学习 HTML。而且，所有内容都是免费的！快去试试吧！

Codecademy ：

地址：https://www.codecademy.com/

一个在线编程学习平台，提供了包括 HTML 在内的多种课程。

如果你想提高你的编程技能，Codecademy 是一个不错的选择。这个平台提供了丰富的课程和实践项目，帮助你快速掌握编程知识，并且有很多不同的语言可以选择学习。赶快去试试吧！

CSS免费自学网站

You-need-to-know-css：CSS的各种效果实现（尤其是动画效果）

You-need-to-know-css 是一个专注于 CSS 的学习平台，涵盖了 CSS 的所有基本概念和高级技巧。

如果你想深入学习 CSS，那么 You-need-to-know-css 就是你的不二选择。这个平台详细地介绍了 CSS 的所有核心知识，让你从入门到精通，不断提高你的技能。我强烈推荐你试试！

CSS Inspiration: 在这里找到写 CSS 的灵感

CSS Inspiration 是一个关于 CSS 设计的灵感网站，提供了大量的优秀的网页设计作品供用户参考。

如果你正在寻找网页设计灵感，我强烈推荐 CSS Inspiration。这个网站收集了大量优秀的网页设计作品，帮助你获得设计灵感，并且免费！赶快去试试吧！"

CSS 常用样式: 总结一些常用的 CSS 样式

CSS Tricks 是一个关于 CSS 技术的专业博客，提供了大量的技术文章、教程和代码示例。

如果你对 CSS 技术有兴趣，我强烈推荐 CSS Tricks。这个博客拥有丰富的技术文章和代码示例，帮助你深入了解 CSS 技术，并快速提高你的技能。赶快去试试吧！

Animate.css 开箱即用的跨浏览器 CSS 动画效果

Animate.css 是一个 CSS 动画库，提供了大量现成的动画效果，可以让你轻松为网页增添动态效果。

如果你想让你的网页具有更好的交互性，我强烈推荐使用 Animate.css。这个 CSS 动画库提供了大量现成的动画效果，让你轻松为网页增添动态效果，而且使用非常简单！赶快去试试吧！

Animista： 按需定制 CSS 动画效果

Animista 是一个在线动画生成工具，可以轻松创建各种 CSS 动画。

如果你想在网页设计中添加一些生动的动画效果，我强烈推荐 Animista。这个工具易于使用，功能强大，可以让你轻松创建各种精美的 CSS 动画。尝试一下，你一定不会失望的！

SpinKit ：汇集了实现各种加载效果的 CSS 代码片段

SpinKit 是一个免费的加载动画生成工具，提供了各种现代化的加载动画效果。

如果你在开发网站或应用程序，我强烈推荐 SpinKit。这个工具可以帮助你快速生成各种现代化的加载动画，让你的项目更具吸引力，而且完全免费！一定要试试！

CSS Minifier ：在线 CSS 代码极简化/压缩工具

SS Minifier 是一个免费的在线工具，可以帮助您压缩和优化 CSS 代码。

如果你正在寻找一个简单而有效的方法来压缩和优化你的 CSS 代码，我强烈推荐 CSS Minifier。它是免费的，易于使用，可以大大提高你的网站的加载速度。赶快试试吧！

Sass 文档： Sass 是成熟、稳定、强大的 CSS 扩展语言

Sass 文档是一个提供 Sass CSS 预处理语言的官方文档网站。

如果你正在学习或使用 Sass，Sass 文档是你不可缺少的参考资源。这个网站提供了详尽的语法说明和实例，帮助你更好的理解和使用 Sass。我强烈推荐给所有 Sass 开发者！

Less： 一种将css赋予了动态语言特性的动态样式语言

Less 是一个 CSS 预处理语言，可以让你使用变量、函数和嵌套等高级功能来编写 CSS 代码。

如果你正在寻找一种更有效和易于维护的 CSS 开发方式，我强烈推荐 Less。它使用简单，可以大大提高你的工作效率，并且已经被广泛应用在各种项目中。一定要试试！

Stylus： 富有表现力、动态、健壮的CSS Stylus 是一个 CSS 预处理器，提供了丰富的功能和语法来扩展和优化 CSS。

如果你正在寻找一种更高效和强大的方式来编写 CSS，我强烈推荐使用 Stylus。它具有易于使用的语法和丰富的功能，帮助你更快地实现更复杂的样式。赶快试试吧！

JavaScript免费自学网站

• JavaScript 教程
• ES6 入门教程
• JavaScript 30 使用原生 JavaScript 在 30 天内完成 30 个项目
• Codewars 和其他人一起完成真实的代码挑战，提升你的技术
• JavaScript 教程 现代 JavaScript 教程
• 优秀的JS代码规范
• 开发的宝藏项目
• TypeScript 教程：https://github.com/xcatliu/typescript-tutorial
• JS 优质内容：http://www.echojs.com/
• JavaScript Weekly：http://javascriptweekly.com/

赠送学习网站推荐：

学习篇，主要是推荐给大家我是用最高频，也是最好用的视频课程，只有想不到，没有学不到的。毕竟程序员的一生，是学习的一生，是不停卷的一生；生命不息，学习不止。当然也有其他类似的视频课程网站，但是体验之后，发现都是B站的子集，跟中国大学MOOC正好互补。

1、B站 推荐指数：⭐⭐⭐⭐⭐

B站已经成了程序员白嫖的理想国，不仅汇集了大量的技术课程，还有各种小姐姐以舞为伴，学习类的时候，可以去看看别人家的女朋友，做到劳逸结合，学习效率倍增。

随便搜一下Java 都有大把的课程可以嫖。如果你觉得那么多不知道从何嫖起的话，那可以直接搜索黑马程序员或者博学谷，这是B站最灵心的课程。

2、中国大学MOOC 推荐指数：⭐⭐⭐⭐

有很多名校的课程，当然不止CS，如果你的学校不是太好的话，这是一个可以圆梦的地方。

好了，关于视频的学习这两个地方绝对够你了学习了

B站跟多的偏实用性，这些就是学了之后就能在工作中干活的。

中国大学MOOC更多是偏理论，篇底层的知识，比如计算机相关的基础，虽然很多时候工作室不用的，正所谓万丈高楼平地起，地基很重要，它能决定你走多远。

理论 + 实践让你的技术生涯走的更远。

如果你觉得还是有些内容满足不了你的话，就可以买对应的书去查漏补缺。

前端框架

Node

• Node.js 中文网

Node.js 中文网是一个专注于 Node.js 技术的社区网站，它提供了丰富的技术文档、教程和资源，帮助开发人员更好地理解和使用 Node.js。

如果你正在学习或使用 Node.js，我强烈建议你访问 Node.js 中文网，它将为你提供丰富的学习资源和社区支持。我认为这是一个不容错过的网站！

• Node入门

本书致力于教会你如何用Node.js来开发应用，过程中会传授你所有所需的“高级”JavaScript知识。本书绝不是一本“Hello World”的教程。

• Node.js 概述

Vue

• Vue官网

Vuejs的官网教程非常值得你从头读到尾。我总是会忍不住想去寻找视频教程，但是Vuejs的文档对于一开始来说的确是非常适合入门的长篇教程。

Vue中文官网是关于Vue.js框架的官方网站，它提供了丰富的文档、教程、指导和代码示例。如果你正在学习或使用Vue，那么这个网站一定是你最佳的资源。

我强烈推荐大家使用Vue中文官网，这是一个关于Vue.js的首选资源。无论你是初学者还是经验丰富的开发者，你都能在这里找到有用的信息和指导。加入我们，一起探索Vue的精妙之处吧！

• vuex官方文档

Vue Router是Vue.js框架的官方路由管理器，它可以帮助您在单页面应用程序中管理路由和导航。它提供了强大的功能，如动态路由匹配、嵌套路由、导航守卫等，可以让您轻松管理复杂的路由系统。

如果您使用Vue.js开发单页面应用程序，我强烈建议您使用Vue Router。这是Vue.js的官方路由管理器，可以帮助您轻松管理复杂的路由，让您的应用程序更加完美。

• vue官方资源汇总：https://github.com/vuejs/awesome-vue

React

• react中文文档
• react组件生命周期
• 阮一峰老师的解析

前端面试

面试八股文已是标配，那我们刷题的过程也是必不可少的一个重要环节了。学习不是目的，挣钱才是我们目标，想要挣钱就要面临跳槽，毕竟一切都要向“钱”看。

0、码蹄集 推荐指数：⭐⭐⭐⭐⭐

先看看这来头，就知道分量有多重了。

还有各种计算机大赛，这个先不说技术含量，单说这个经历，就能让你加分不少。最终要的可以趁机锻炼一下自己的技术。

1、LeetCode 推荐指数：⭐⭐⭐⭐⭐

力扣是一个为全球程序员提供 IT 技术职业化提升的平台，提供了完善的在线判题服务、学习工具、社区讨论及模拟面试功能，全方位打磨程序员职业所需的核心技能。

力扣为用户提供了多种多样的开发工具，适用于真实的日常技术开发和学习场景

2、牛客网 推荐指数：⭐⭐⭐⭐

一个联网求职、刷题学习交流的社区。

LeetCode和牛客结合食用，效果更加。

3、前端进阶之旅

基础篇 -->进阶篇 --> 高频篇 --> 手写篇 -->原理篇 --> 面经篇，一条龙服务。

基础篇：帮你梳理常见的前端基础面试题

进阶篇：提炼分析面试难点，助你快速理解

频篇：精心整理高频面试题型归类

手写篇：高频常见手写题

原理篇：面试题型原理解析

面经篇：大厂面经真题整理

4、前端进阶之道

15 万字面试资料 :内容涵盖计算机通识，前端等知识。完善你的知识体系，让你的面试如虎添翼！ React 原理解析: 打造全网最全最新 React 原理解析，让你成为团队中的 React 高手！

文章 : 针对前端的知识难点进行细致入微的讲解，让你的进阶之路不再崎岖！

• GitHub 上 100K+ Star 的前端面试开源项目汇

技术社区

工作篇， 主要是大家日常工作中解决bug需要经常百度，那肯定离不开CSDN了，强烈推荐大家在这些技术社区写博客。同学也可以经常看看别人的写的博客学习。

1、CSDN 推荐指数：⭐⭐⭐

作为国内最大的中文技术社区，也是我们学习的好地方，毕竟你写的bug可能也只有他能帮你解决，最重要的是免费。

唯一的缺点就是广告多点，但是即使这样也没办法，因为你的bug要靠它

2、博客园 推荐指数：⭐⭐⭐⭐⭐

比较老牌技术社区，博客质量比较高，比较佛系，除了丑点之外，其他都非常好

3、掘金 推荐指数：⭐⭐⭐⭐

掘金就不多说了，好的一批， 在人家的主场，还是要先拍个马屁的。

掘金去年被字节收购之后，发生了很大的变化，内容更加丰富全面，包含了前端后端各个方向的内容；同时内容的推荐机制也发生了较大的变化，猜测可能会借鉴抖音的推荐算法逻辑。

有了字节的加持，掘金应该是我比较看好的技术社区。

最近还有较大的更新，比如会员、成长等级等

最重要的是上线了很多学习资源，小册 + 字节内部技术干货，这个对你进字节是不是可以有些帮助了，自己悟去吧，（当然了，收费是免不了的）

4、思否 推荐指数：⭐⭐⭐

一直以来的感觉是半死不活的状态，但是就在今年思否也被有实力的大佬收购了，相信未来还是会有不错的发展。 包含博客、问答的技术社区。

5、开源中国 推荐指数：⭐⭐⭐

跟码云是一家，生态比较完善，貌似并没有那么主流的一个技术社区。

6、51CTO 推荐指数：⭐⭐

有点类似开源中国的感觉，没啥好介绍的，不过有一个特点非常重要，就是你的博客基本都会被推荐。

好了，这几个博客应该是你的职业生涯中，使用频率最高的社区了。当然还有一些其他的博客，为什么没有推荐的，因为那些估计你这辈子也用不到。

也非常推荐大家在工作的时候，一定要写博客，多总结。在以上技术平台多些博客，慢慢积累自己影响力。

说不好某一天，你的博客被某个大佬看见了，就给挖走了呢，哈哈哈~~~

如果你写博客，你一定会遇到这样一个问题，我在掘金写了一篇文章，想要发到其他的平台每次都有复制粘贴，还经常遇到格式不匹配、图片复制不过去等各种问题。可真是头大呀

接下来就给你介绍一个非常王炸的工具，只要把你写的文章编辑一次，就可以导出分发。

专门为我们技术人开发的神奇OpenWrite。




目前已经支持主流的技术内容平台，包括：本站、CSDN、博客园、思否、开源中国、稀土掘金、慕课手记、微信公众号（仅支持复制黏贴）、51CTO。

地址这里：https://openwrite.cn/

博客团队

• 腾讯AlloyTeam：http://www.alloyteam.com/
• 腾讯社交用户体验ISUX：https://isux.tencent.com/
• 淘宝FED | 淘宝前端团队：http://taobaofed.org/
• 阿里巴巴国际UED：http://www.aliued.com/
• 京东 | 凹凸实验室：https://aotu.io/
• 饿了么前端:https://zhuanlan.zhihu.com/ElemeFE
• 百度前端研发部FEX：http://fex.baidu.com/
• 360 | 奇舞团：https://75team.com/
• 美团技术团队: https://tech.meituan.com/

工具篇

构建工具

• NPM：https://www.npmjs.com/
• Yarn：https://yarnpkg.com/zh-Hans/
• Webpack：https://webpack.js.org/
• Gulp：https://www.gulpjs.com.cn/
• Babel：https://babeljs.io/
• ESLint：https://cn.eslint.org/ 可组装的JavaScript和JSX检查工具。
• PostCSS：https://www.postcss.com.cn/ 用 JavaScript 工具和插件转换 CSS 代码的工具

部署工具

• GitHub Pages GitHub 提供的免费静态网站托管服务
• Netlify 30 秒内部署你的网站
• Vercel 快速部署你的网站
• Surge 只需一个命令就可以发布你的网站
• Heroku 在云端构建、运行你的应用

站点搭建工具

• Hexo：https://hexo.io/zh-cn/
• VuePress：https://www.vuepress.cn/
• GitBook：https://www.gitbook.com/

调试抓包

• whistle：https://wproxy.org/whistle/ 代理抓包工具，很好很强大。
• Fiddler：https://www.telerik.com/fiddler 代理抓包工具。
• Easy Mock：https://www.easy-mock.com

开发工具

• VS Code：https://code.visualstudio.com/
• Sublime Text：https://www.sublimetext.com/
• WebStorm：https://www.jetbrains.com/webstorm/
• Atom：https://atom.io/

在线工具

• CodePen - https://codepen.io/ 在线代码测试工具
• Can I use - https://caniuse.com/ Web前端兼容性列表
• TinyPNG - https://tinypng.com/ PNG/JPG 图片在线压缩利器
• CNZZ站点统计 - https://www.umeng.com/ 国内常用的站点统计工具

设计工具

• 墨刀：原型设计工具。网址：https://modao.cc/
• 蓝湖：一款产品文档和设计图的在线协作平台。网址：https://lanhuapp.com
• PxCook（像素大厨）：高效易用的自动标注工具。软件下载链接：https://www.fancynode.com.cn/pxcook

其他

• 单元测试：https://github.com/goldbergyoni/javascript-testing-best-practices
• web.dev 评测网站性能（基于 Lighthouse）
• Shape Divider 定制各种形状的网站分区 SVG 的工具
• GTmetrix 网页性能分析工具
• Can I Use 前端技术的浏览器支持情况
• Carbon 代码转图片工具
• Wappalyzer 检测某个网站使用的技术栈

其他优质文章 ：

前端行业发展：

• Web 前端分为哪几个大方向，工资待遇如何，辛苦吗？
• 找前端工作会不会很难？
• 现在web前端的工资怎样？
• 前端开发就业情况如何？

前端工作内容：

• 前端工程师主要工作内容是什么？
• 前端开发是做什么的？工作职责有哪些？

前端学习路线：

• 怎么学习前端开发？求推荐学习路线？

面试相关：

• 一个优秀的前端工程师简历应该是怎样的？
• 关于前端Vue框架的面试题，面试官可能会问到哪些？
• 【一定要收藏】32000字的前端面试题总结！！！
• web前端简历个人技能该怎么写?
• 前端简历中项目描述怎么写能够更加的优雅？
• 面试前端工程师简历应该怎么写才容易通过？
• 自学 web 前端人怎么找工作？
• 自学前端简历怎么写啊？

HTML教程：

• HTML5入门教程（含新特性），从入门到精通
• HTML图文教程（表单域/文本框与密码框/单选按钮与复选框）
• HTML图文教程（选按钮与复选框/input标签/提交按钮与重置按钮）
• HTML图文教程（通按钮/文件域/label/下拉表单）
• HTML零基础入门教程， 零基础学习HTML网页制作（HTML基本结构）
• HTML零基础入门教程， 零基础学习HTML网页制作（HTML 标签）

JavaScript教程：

• JavaScript 是什么？
• JavaScript基础入门教程（引入方式/注释/变量/常量/数据类型/类型转换）
• JavaScript基础入门教程（引入方式、注释、变量、数据类型、类型转换）
• JavaScript基础入门教程（for循环/数组）
• JavaScript基础入门教程（函数/返回值/作用域）

VUE图文教程推荐：

• Vue基础入门教程(vue-cli+vue指令)
• Vue基础入门教程(vue指令大全)
• Vue基础入门教程(vue组件化开发)
• 最全的Vuex学习教程(Vuex基础、模块化、案例)

Koa2教程：

• Koa2框架是什么？Koa框架教程快速入门Koa中间件
• Koa2框架路由应用，Koa2前景、Koa2中间件
• Koa2异常处理

其他：

• 13 个有趣且实用的 CSS 框架 / 组件
• 有哪些好的前端社区？

如果对你有帮助的话，点个赞收个藏，给作者一个鼓励。也方便你下次能够快速查找。最后，希望喜欢学习的你们，坚持下去，做一个有知识的前端人，加油~

求赞求关注=。=，据说点赞的人会变帅=。=