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

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

　　为大家整理了25个前端相关学习网站和一些靠谱的小工具，包括一些小游戏、教程、社区网站和博客，还有一些资源网站，希望你能帮助大家！

　　▍CSS相关

　　●1

　　CSSBattle-在线竞争 CSS

　　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

　　Neumorphism - 实现新的模拟效果

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

　　

　　●7

　　uiGradients - 共享渐变

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

　　

　　▍JS相关

　　●8

　　JavaScript 秘密花园

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

　　

　　●9

　　JSTips - JS 技巧

　　每天一点点的Javascript知识。

　　

　　●10

　　JSweekly - 科技周刊

　　专注于 Javascript 的技术周刊。

　　

　　●11

　　CDNJS - JavaScript 库

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

　　

　　●12

　　Beautiful Open - 开源 JS 库合集

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

　　

　　●13

　　JavaScript Fun - 代码库集合

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

　　

　　▍社区和博客

　　●14

　　Stack Overflow - 程序员问答网络

　　全球IT界最受欢迎的技术问答之一网站，一个解决bug的社区，号称“编程界的100,000个为什么”。

　　

　　●15

　　掘金 - 优质技术社区

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

　　

　　●16

　　Codrops - 网页设计开发博客

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

　　

　　▍在线IDE

　　●17

　　代码笔

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

　　

　　●18

　　代码沙盒

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

　　

　　●19

　　JSBin

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

　　

　　▍资源

　　● 20

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

　　是一款在线定制设计的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图标集合，主要针对应用系统、媒体控制、位置、天气、箭头、标志等设计，可用于移动应用开发。图标格式为 SVG。

　　

　　● 25

　　HTML5 + CSS 3 免费模板

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

　　

　　本文推荐的网站总结：

　　CSS战斗：

　　学习 CSS 布局：

　　Flexbox Froggy：

　　享受CSS：

　　CSS 技巧：

　　神经拟态：

　　ui渐变：

　　JavaScript：

　　JS 提示：

　　JS周刊：

　　CDNJS：

　　美丽的开放：

　　JavaScript 乐趣：

　　堆栈溢出：

　　掘金：

　　Codrops：

　　代码笔：

　　代码沙盒：

　　JS斌：

　　图标：

　　打开Moji：

　　分享图标：

　　表格转换：

　　羽毛图标：

　　HTML5UP：