为大家整理了25个前端相关学习网站和一些靠谱的小工具，包括一些小游戏、教程、社区网站和博客，以及一些资源网站，希望它可以帮助每个人！CSS相关1.CSSBattle-在线比赛CSShttps://cssbattle.dev在线CSS比赛，一款非常有趣的竞技类游戏，共有12个关卡，你需要100%用HTML和CSS还原它给出的页面，以及然后尽量减少代码，也可以查看全球排行榜看看解决方案。2.学习CSS布局-学习CSS布局http://learnlayout.com在线CSS布局学习，将引导初学者循序渐进地学习CSS基础知识，帮助初学者在实践中掌握CSS布局知识，提高初学者对CSS布局的理解.CSS书写习惯和正确方法。3.FlexboxFroggy-一个学习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-AchievingNewMimicEffectshttps://neumorphism.io可以轻松实现新的拟态效果，不仅可以修改颜色或填充颜色值，还可以修改大小、半径、距离、强度等参数，模糊效果和形状，同时提供了CSS代码，可以直接复制。7.uiGradients-ShareGradientshttps://uigradients.com是一个提供渐变效果的站点。里面有近百种渐变配色方案。可以根据自己的风格进行选择搭配，可以直接获取渐变色对应的CSS代码。JS相关8.JavaScript秘密花园https://bonsaiden.github.io/J...一个不断更新的JavaScript语法文档，主要讲述如何避免一些常见的错误，以及发现难以发现的bug，比较DiveintoJavaScript的语言特征。9.JSTips-JSTipshttps://www.jstips.co每天一点Javascript知识。10.JSweekly-技术周刊https://javascriptweekly.com专门研究Javascript的技术周刊。11、CDNJS-JavaScript库https://cdnjs.com/librariesCDNJS为开发者提供最新的Web前端开发资源，免费使用，无限使用。你可以在自己的网页上直接引用这些JS文件。进入CDNJS网站后，搜索你要的资源库，找到，点击项目后面的【复制脚本标签】，然后粘贴即可使用。目前CDNJS在web前端的CDN服务中排名第二（第一是谷歌），性能优异。12.BeautifulOpen-开源JS库合集https://beautifulopen.com收集了各种设计优秀的开源项目，从CMS内容管理系统到常用的Javascript库，适合网站开发用户。13.JavaScriptFun-代码库合集https://www.javascript.fun汇集了当下最流行的JavaScript代码库，展示流行度排名，开发者可以轻松找到最新的代码插件、工具和他们想要的博客。社区和博客14.StackOverflow-程序员问答网https://stackoverflow.com全球IT行业最受欢迎的技术问答网站之一，一个解决bug的社区，名为“十万个为什么”编程世界”。15.掘金-优质技术社区https://juejin.im掘金技术社区是一个优质的技术分享社区，由技术达人和极客共同编辑筛选的优质干货，这些技术文章包括Android、iOS、前端和后端资源。16.Codrops-网页设计开发博客https://tympanus.net发布技术文章和网页教程，提供经验，坑少，资源丰富，很多优秀的技术都出自这里。在线IDE17，CodePenhttps://codepen.io是一个网站前端设计开发平台，网站前端代码的工具，上面有各种特效（炫技），可以自己开发前端设计基于他们的演示。18.CodeSandBoxhttps://codesandbox.io顾名思义，CodeSandBox网站提供了一个在线开发环境“沙箱”。React、Vue、Angular等主流框架，开箱即用，实时编译预览，非常方便。19.JSBinhttps://jsbin.com又一个轻量级的在线编辑网站，界面简洁干净。如果你想临时调试简单的HTML或JS代码，可以考虑去这里试一试。资源类20.ICONSVG-在线定制设计SVG图标素材https://iconsvg.xyz是一个可以定制设计SVG图标素材的在线网站，帮助前端设计师找到自己想要的图标素材。这些图标素材都是常用的图标，可以点击官方素材进行二次设计，也可以导出设计好的图标。21.OpenMoji——免费表情库https://www.openmoji.org提供源码表情库，可免费下载使用。22.ShareIcon-免费矢量素材库https://www.shareicon.net提供超过250,000个ICON矢量图素材站点，120多个类别，所有素材均提供PNG和SVG格式，素材有各种大小Sizes包括512512、256256、128128、6464、3232、1616等，非常适合前端设计师收藏和储备。23.tableconvert-在线表格编辑器https://tableconvert.com是一款功能强大的在线表格编辑器，支持Excel、Markdown、JSON、CSV、HTML等格式的相互转换。当您需要在不变形的情况下转换表格时，请尝试使用此工具。24.Feathericons-MinimalistICONIconSethttps://feathericons.com是一个免费开源的简洁漂亮的ICON图标合集，主要设计用于应用系统、媒体控制、位置、天气、箭头、标志等，可用开发手机应用时使用，图标格式为SVG。25.HTML5+CSS3免费模板https://html5up.net/提供了大量的HTML5模板，用户可以自行分享和修改模板。本文推荐的网站总：CSS之战：https://cssbattle.dev学习CSS布局：http://learnlayout.comFlexboxFroggy：http://flexboxfroggy.comEnjoyCSS：https://enjoycss.comCSS-Tricks：https://css-tricks.comNeumorphism：https://neumorphism.iouiGradients：https://uigradients.comJavaScript：https://bonsaiden.github.io/J...JSTips：https://www.jstips.coJSweekly：https://javascriptweekly.comCDNJS：https://cdnjs.com/librariesBeautifulOpen：https://beautifulopen.comJavaScriptFun：https://www.javascript.funStackOverflow：https://stackoverflow.com掘金：https://juejin.imCodrops：https://tympanus.netCodePen：https://codepen.ioCodeSandBox：https://codesandbox.ioJSBin：https://jsbin.comICONSVG：https://iconsvg.xyzOpenMoji：https:///www.openmoji.org分享图标：https://www.shareicon.nettableconvert：https://tableconvert.comFeathericons：https://feathericons.comHTML5UP：https://html5up.net/
