行将开播：4月29日，民生银行郭庆谈商业银行金融科技赋能的探求与实际

给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具，包括一些小游戏、教程、社区网站和博客，以及一些资源网站，希望可以协助到大家!

CSS 相关

1. CSS Battle - 在线比拼 CSS

https://cssbattle.dev

在线比拼 CSS ，一个挺幽默的竞争性游戏，一共有12个级别，需求你用 HTML和 CSS 100%恢复它给出的页面，然后再尽量增加代码，你也可以查看全球的排行榜，看处置方案。

2. Learn CSS layout - 学习 CSS 规划

在线CSS规划学习，它会一步一步引导初学者学习 CSS 基础知识，在实际中协助初学者掌握好 CSS 的规划知识，改善初学者对 CSS 的编写习气和正确办法。

3. Flexbox Froggy - 学习 Flex 规划的小游戏

一个引导式的学习 Flex 规划的游戏，用 flex 规划让青蛙跳到荷叶上就算完成，游戏外面简直包含了一切常用的属性，这样学习起来很幽默嘞，笼统好记忆，谁要是 Flex 规划还不熟的话，在这多练练。

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

https://enjoycss.com

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

5. CSS-Tricks - CSS 技巧

https://css-tricks.com

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

6. Neumorphism-完成新拟态效果

https://neumorphism.io

可以轻松完成新拟态效果，不只可以修正颜色或填写色值，也可以修正尺寸、半径、距离、强度、模糊效果以及外形等参数，同时提供了CSS代码可以直接Copy。

7. uiGradients - 分享突变色

https://uigradients.com

提供突变色效果的站点，外面接近上百种突变配色方案，可依据本人作风来选择搭配，能直接取得对应突变配色的 CSS 代码。

JS 相关

8. JavaScript 秘密花园

https://bonsaiden.github.io/JavaScript-Garden/zh/

一个不断更新的JavaScript 的语法文档，主要会写如何去避免一些常见的错误，以及找到很难发现的 bug ，比较深化 JavaScript 的言语特性。

9. JS Tips - JS 技巧

https://www.jstips.co

每天一个 Javascript 小知识。

10. JSweekly - 技术周刊

https://javascriptweekly.com

专门解说 Javascript 的技术周刊。

11. CDNJS - JavaScript 材料库

https://cdnjs.com/libraries

CDNJS 为开发者提供最新的前端 Web 开发资源，无偿运用，无运用限制。你可以直接在本人的网页上援用这些 JS 文件。进入 CDNJS 网站后，搜索你想要的资源库，找到后点击项目前方的[ Copy Script Tag] ，然后贴上就可以用了。目前 CDNJS 在 Web 前端的 CDN 效劳中排名第二(第一名是 Google)，功用出色。

12. Beautiful Open - 开源 JS 库集合

https://beautifulopen.com

搜集各类出色设计的开源项目，大到CMS内容管理系统，小到常用的Javascript库，适宜网站开发的用户运用。

(责任编辑：admin)