为大家整理了25个前端相关的学习网站和一些靠谱的小工具，包括一些小游戏、教程、社区网站和博客，以及一些资源网站，希望对大家有所帮助！CSS相关1.CSSBattle-OnlineCSSCompetitionhttps://cssbattle.devOnlineCSSCompetition，一个非常有趣的竞技类游戏，一共12个关卡，你需要使用HTML和CSS100%还原它给出的页面，然后最小化代码，也可以查看全球排行榜查看解法。2.LearnCSSlayout-learnCSSlayouthttp://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-CSSTipshttps://css-tricks.com本站不断更新一些关于CSStips的优秀教程和技巧，文章每天更新。6.Neumorphism-AchievingNewMimeticEffecthttps://neumorphism.io可以轻松实现新的变形效果，不仅可以修改颜色或填充颜色值，还可以修改大小、半径、距离、强度等参数，模糊效果和形状，同时提供了CSS代码，可以直接复制。7.uiGradients-ShareGradientshttps://uigradients.com是一个提供渐变效果的网站。里面有近百种渐变配色方案。可以根据自己的风格进行选择搭配，可以直接获取渐变色对应的CSS代码。JS相关8.JavaScript秘密花园https://bonsaiden.github.io/JavaScript-Garden/zh/一个不断更新的JavaScript语法文档，主要是关于如何避免一些常见错误和发现难以发现的bug，更多在-深入了解JavaScript的语言特性。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格式，素材大小不一尺寸有512*512、256*256、128*128、64*64、32*32、16*16等，非常适合前端设计师收藏和储备。23.tableconvert-在线表格编辑器https://tableconvert.com一款功能强大的在线表格编辑器，支持Excel、Markdown、JSON、CSV、HTML等格式相互转换。当您需要在不变形的情况下转换表格时，请尝试使用此工具。24.Feathericons-MinimalistICONIconSethttps://feathericons.com是一个免费开源的简洁漂亮的ICON图标合集，主要设计用于应用程序、媒体控制、位置、天气、箭头、标志等。开发时使用移动应用程序，图标格式为SVG。25.HTML5+CSS3免费模板https://html5up.net/提供了大量的HTML5模板，用户可以自行分享和修改模板。本文推荐的网站总：CSSbattle: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/JavaScript-Garden/zh/JSTips：https://www.jstips.coJSweekly：https://javascriptweekly.comCDNJS：https://cdnjs.com/libraries美丽开放：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/
