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