我们整理了25 个前端学习网站和值得信赖的小工具的列表，包括迷你游戏、教程、社区网站、博客和资源网站。我们期待着帮助您。
CSS相关
1. CSS Battle – 在线CSS大赛
https://cssbattle.dev
在线CSS竞赛是一款非常有趣的竞技游戏，共有12个关卡。页面应该使用HTML 和CSS 100% 恢复，并使用尽可能少的代码。您还可以查看全球排名。检查解决方案。
2.学习CSS布局- 学习CSS布局
http://learnlayout.com
在线CSS布局学习将引导初学者一步一步学习CSS的基础知识，帮助初学者真正掌握CSS布局知识，提高初学者的书写习惯和CSS的正确方式。
3. Flexbox Froggy – 学习Flex 布局的游戏
http://flexboxfroggy.com
学习Flex 布局的引导游戏。它采用Flex布局，包含几乎所有常用的属性。即使您不了解Flex，也很容易学习。如果您熟悉布局，请在这里多练习一下。
4.EnjoyCSS-在线CSS代码可视化工具
https://enjoycss.com
在线版CSS3代码生成器基于视觉，让您在免编码的环境中快速调整网页效果和图形样式。和本地使用PS或者AI软件是一样的。
5. CSS-Tricks – CSS 技巧
https://css-tricks.com
这个网站不断更新有关CSS 技术的精彩教程和技术，并且文章每天都会更新。
6. Neumorphism——实现新形态效果
https://neumorphism.io
轻松实现新的模仿效果。您不仅可以更改颜色或填充颜色值，还可以同时更改大小、半径、距离、强度、模糊效果、形状等参数。提供了CSS 代码，因此您可以直接复制它。
7. uiGradients – 共享渐变颜色
https://uigradients.com
该网站提供渐变颜色效果，您可以选择并混合以适合您自己的风格。您还可以直接获取渐变配色方案对应的CSS代码。
JS相关
8.JavaScript秘密花园
https://bonsaiden.github.io/JavaScript-Garden/ja/
不断更新JavaScript 语法文档。它重点介绍如何避免常见错误和发现难以发现的错误，并提供有关JavaScript 语言功能的更多信息。
9. JS技巧——JS技巧
https://www.jstips.co
每天一点点Javascript知识。
10. JSweekly-科技周刊
https://javascriptweekly.com
一本专门讲解Javascript 的技术周刊。
11. CDNJS – JavaScript 数据库
https://cdnjs.com/libraries
CDNJS为开发者提供免费使用、无使用限制的现代前端Web开发资源。您可以直接在网页上引用这些JS 文件。进入CDNJS网站后，搜索并找到您需要的资源库，然后单击项目后面的“复制脚本标签”并粘贴以使用它。目前，CDNJS在Web前端CDN服务中排名第二（Google排名第一），表现出色。
12. Beautiful Open – 开源JS库集合
https://美丽开放网
从CMS 内容管理系统到流行的Javascript 库，我们为网站开发人员收集了各种精心设计的开源项目。
13. JavaScript趣事——代码库合集
https://www.javascript.fun
当今最流行的JavaScript 代码库的集合。流行度排名使开发人员可以轻松找到他们需要的最新代码插件、工具和博客。
社区和博客
14. Stack Overflow – 程序员问答网
https://stackoverflow.com
全球IT 行业最受欢迎的技术问答网站之一，也是被称为“编程世界的100,000 个为什么”的错误解决社区。
15. 掘金——优质技术社区
https://juejin.im
掘金技术社区是一个优质的技术分享社区。由技术专家和极客共同编辑和策划的高质量技术文章，包括Android、iOS、前端和后端资源。
16. Codrops 网页设计和开发博客
https://tympanus.net
发布技术文章和网络教程以提供经验并避免陷阱。很多伟大的技术都来自这里。
在线集成开发环境
17. 代码笔
https://codepen.io
网站前端设计开发平台，网站前端代码工具。您可以根据demo开发自己的前端设计。
18. 代码沙箱
https://codesandbox.io
顾名思义，CodeSandBox 网站提供了一个在线开发环境“沙箱”，React、Vue、Angular 等主流框架都可以开箱即用，并实时编译和预览。
19. JS 宾
https://jsbin.com
另一个轻量级在线编辑器网站，界面简单干净。如果您想临时调试一些简单的HTML 或JS 代码，请考虑在这里尝试一下。
资源
20. ICONSVG – 在线定制设计的SVG图标素材
https://iconsvg.xyz
这是一个可以自定义SVG图标素材的在线网站，以便前端设计师可以找到他们想要的图标素材。这些图标素材也可以通过点击官方提供的素材进行二次设计。导出图标。
21. OpenMoji 免费表情符号库
https://www.openmoji.org
提供带有源代码的表情符号库，可以免费下载和使用。
22.分享图标-免费矢量素材库
https://www.shareicon.net
该网站提供120 多个类别的250,000 多个图标矢量素材。所有素材均以PNG和SVG格式提供，包括512*512、256*256、128*128、64*64、32*32、16*16等，供前端设计师后期使用，非常适合收藏。
23. tableconvert – 在线表格编辑器
https://tableconvert.com
强大的在线表格编辑器，支持转换Excel、Markdown、JSON、CSV、HTML等格式。如果您需要转换表格而不扭曲它，您可能想尝试这个工具。
24. Feathericons – 极简ICON图标集
https://feathericons.com
免费开源的简单而美丽的ICON 图标集合。主要设计类别有应用系统、媒体控件、位置、天气、箭头、标志等。图标格式为SVG。
25. HTML5 + CSS 3 免费模板
https://html5up.net/
我们提供了大量的HTML5模板，用户可以共享或自行修改。
对于多年开发经验丰富的程序员的好处：从网页创建、网站开发、Web前端开发、HTML+CSS+JavaScript等基础知识开始。 jQuery、Ajax、node、Angular框架等移动小程序项目的实战工作【视频+工具+电子书+系统路线图】都总结了，有需要的小伙伴可以私信我说“前面请发送完。等待3秒，将地址送给所有对编程感兴趣的人。
本文推荐的网站总结：
CSS Battle : https://cssbattle.devLearnCSS 布局：http://learnlayout.comFlexbox Froggy：http://flexboxfroggy.comEnjoyCSS：https://enjoycss.comCSS-Tricks：https://css-tricks.comNeumorphism：https://neumorphism.iouiGradients：333 59ui grad ients.comJavaScript:https://bonsaiden.github.io/JavaScript-Garden /zh/JS技巧：https://www.jstips.coJSweekly：https://javascriptweekly.comCDNJS：https://cdnjs.com/librariesBeautiful开放：https://beautifulopen.comJavaScript乐趣：https://www.javascript.funStack溢出：https://stackoverflow.com掘金：https://ju ejin.imCodrops：3 3 9tympanus.net Codepen ：https://codepen.ioCodeSandBox：https://codesandbox.io JS Bin：https://jsbin.comICONSVG：https://iconsvg.xyzOpenMoji：https://www.openmoji.org共享图标：https://www.shareicon.nettableconvert：https://tableconvert.comFeathericons：33 359fe athericons.comHTML5UP：3 3359html5up.net/
本文和图片来自网络，不代表火豚游戏立场，如若侵权请联系我们删除：https://www.huotun.com/game/568268.html
