网页css js 抓取助手(25个前端相关的学习网站和一些靠谱的小工具)

　　网页css js 抓取助手(25个前端相关的学习网站和一些靠谱的小工具)

　　本文整理了25个前端相关学习网站和一些靠谱的小工具，包括一些小游戏、教程、社区网站和博客，还有一些资源网站，希望对大家有所帮助，下面就和千峰广州小编一起来看看吧！

　　CSS相关

　　1、CSS 之战 - 在线竞争 CSS

　　cssbattle.dev

　　CSS线上竞技，很有趣的竞技游戏，一共12关，需要用HTML和CSS来100%还原它给的页面，然后尽量减少代码，还可以查看全球排行榜，看解决方案。

　　

　　2、学习 CSS 布局 - 学习 CSS 布局

　　在线CSS布局学习，将引导初学者逐步学习CSS基础知识，帮助初学者在实践中掌握CSS布局知识，提高初学者的CSS书写习惯和正确方法。

　　

　　3、Flexbox Froggy - 一个学习 Flex 布局的小游戏

　　一款引导式学习flex布局游戏，使用flex布局让青蛙在荷叶上跳跃甚至完成，游戏收录了几乎所有常用的属性，所以学起来很有趣，形象好记，谁要flex 布局如果你熟悉的话，在这里多练习一下。

　　

　　4、EnjoyCSS-在线 CSS 代码可视化工具

　　CSS3代码生成工具在线版，基于可视化操作，可以在非编码环境下快速调整网页效果和图形样式。这就像在本地使用 PS 或 AI 软件一样。

　　

　　5、CSS 技巧 - CSS 技巧

　　这个网站 每天都会不断更新一些优秀的教程和CSS 技巧的技巧文章。

　　

　　6、新拟态——实现新拟态效果

　　神经拟态.io

　　可以轻松实现新的模仿效果。不仅可以修改颜色或填充颜色值，还可以修改大小、半径、距离、强度、模糊效果、形状等参数。同时可以直接复制CSS代码。

　　

　　7、uiGradients - 共享渐变

　　提供渐变色效果的网站有近百种渐变色方案。可以根据自己的风格选择搭配，直接获取渐变色对应的CSS代码即可。

　　

　　JS相关

　　8、JavaScript 秘密花园

　　一直在更新的 JavaScript 语法文档。它主要写如何避免一些常见的错误，发现难以发现的错误，并深入了解 JavaScript 的语言特性。

　　

　　9、JS 技巧 - JS 技巧

　　jstips.co

　　每天一点点的Javascript知识。

　　

　　10、JSweekly - 科技周刊

　　专注于 Javascript 的技术周刊。

　　

　　11、CDNJS - JavaScript 库

　　/图书馆

　　CDNJS为开发者提供最新的前端web开发资源，免费使用，没有使用限制。您可以在自己的网页上直接引用这些 JS 文件。进入CDNJS网站后，搜索你要的资源库，找到，点击项目后面的【复制脚本标签】，粘贴即可使用。目前CDNJS在Web前端CDN服务中排名第二（第一是谷歌），性能优异。

　　

　　12、美丽开放——开源JS库合集

　　采集各类优秀设计的开源项目，从cms内容管理系统到小型常用Javascript库，适合网站开发的用户使用。

　　

　　13、JavaScript Fun - 代码库合集

　　最流行的 JavaScript 代码库集合，显示流行排名，开发者可以轻松找到最新的代码插件、工具和博客。

　　

　　社区和博客

　　14、Stack Overflow - 程序员问答网络

　　全球IT界最火爆的技术问答网站，一个解决bug的社区，号称“100,000whys of programming”。

　　

　　15、掘金-优质技术社区

　　绝进.im

　　掘金技术社区是一个优质的技术分享社区，由技术专家和极客编辑筛选的优质干货。这些技术 文章 包括 Android、iOS、前端和后端资源。

　　

　　16、Codrops - 网页设计开发博客

　　发布技术文章和网络教程，提供经验，少踩坑，资源丰富。许多优秀的技术都来自这里。

　　

　　在线IDE

　　17、代码笔

　　码笔.io

　　一个网站前端设计开发平台，一个网站前端代码工具，有各种效果的案例特效（炫技），你可以开发自己的前端设计基于他们的演示。

　　

　　18、代码沙盒

　　码沙盒.io

　　顾名思义，CodeSandBox 网站 提供了一个在线开发环境的“沙盒”。React、Vue、Angular等主流框架开箱即用，实时编译预览，非常方便。

　　

　　19、JS 斌

　　另一个轻量级的在线编辑器网站，界面简洁干净，如果临时想调试简单的HTML或者JS代码，可以在这里试试。

　　

　　资源类

　　20、ICONSVG - 在线定制设计SVG图标素材

　　图标vg.xyz

　　是一款在线定制设计的SVG图标素材网站，帮助前端设计师找到想要的图标素材。这些图标素材是常用的图标。可以点击官方提供的素材进行二次设计，也可以导出设计好的图标。

　　

　　21、OpenMoji - 免费表情符号库

　　提供带有源代码的表情符号库，可以免费下载使用。

　　

　　22、分享图标 - 免费矢量素材库

　　一个提供超过250,000种ICON矢量图素材，120多个类别的网站，所有素材均以PNG和SVG格式提供，素材大小不一，包括512*512、256*256、 128*128、64*64、32*32、16*16等，非常适合前端设计师采集和储备。

　　

　　23、tableconvert - 在线表格编辑器

　　一个强大的在线表格编辑器，支持Excel、Markdown、JSON、CSV、HTML等格式的相互转换。当您需要转换表格，但无法使其变形时，请尝试使用此工具。

　　

　　24、Feathericons - 极简ICON图标集

　　一个免费开源的简单漂亮的ICON图标集合，主要针对应用系统、媒体控制、位置、天气、箭头、标志等设计，可用于移动应用开发。图标格式为 SVG。

　　

　　25、HTML5 + CSS 3 免费模板

　　/

　　提供大量HTML5模板，用户可以自己分享和修改模板。