超前端相关的学习网站和一些靠谱的小工具

news2024/12/25 14:19:01

CSS相关

1. CSS Battle - 在线比拼 CSS

https://cssbattle.dev

在线比拼 CSS ,一个挺有趣的竞争性游戏,一共有12个级别,需要你用 HTML和 CSS 100%还原它给出的页面,然后再尽量减少代码,你也可以查看全球的排行榜,看解决方案。
在这里插入图片描述

2. Learn CSS layout - 学习 CSS 布局

http://learnlayout.com

在线CSS布局学习,它会一步一步引导初学者学习 CSS 基础知识,在实践中帮助初学者掌握好 CSS 的布局知识,改善初学者对 CSS 的编写习惯和正确方法。

在这里插入图片描述

3. Flexbox Froggy - 学习 Flex 布局的小游戏

http://flexboxfroggy.com

一个引导式的学习 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 相关

1. JavaScript 秘密花园

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

一个一直更新的JavaScript 的语法文档,主要会写如何去避免一些常见的错误,以及找到很难发现的 bug ,比较深入 JavaScript 的语言特性。
在这里插入图片描述

2. JS Tips - JS 技巧

https://www.jstips.co

每天一个 Javascript 小知识。
在这里插入图片描述

3. JSweekly - 技术周刊

https://javascriptweekly.com

专门讲解 Javascript 的技术周刊。

在这里插入图片描述

4. CDNJS - JavaScript 资料库

https://cdnjs.com/libraries

CDNJS 为开发者提供最新的前端 Web 开发资源,免费使用,无使用限制。你可以直接在自己的网页上引用这些 JS 文件。进入 CDNJS 网站后,搜索你想要的资源库,找到后点击项目后方的[ Copy Script Tag] ,然后贴上就可以用了。目前 CDNJS 在 Web 前端的 CDN 服务中排名第二(第一名是 Google),性能出色。
在这里插入图片描述

5. Beautiful Open - 开源 JS 库集合

https://beautifulopen.com

收集各类卓越设计的开源项目,大到CMS内容管理系统,小到常用的Javascript库,适合网站开发的用户使用。

在这里插入图片描述

6. JavaScript Fun - 代码库集合

https://www.javascript.fun

一个集合当下最流行的 JavaScript 代码库,显示流行排行,开发者可以轻松的找到想要最新的代码插件、工具和博客。

在这里插入图片描述

社区和博客

1. Stack Overflow - 编程人员问答网

https://stackoverflow.com

全球IT界最受欢迎的技术问答网站之一,一个解决 bug 的社区,称为“ 编程界的十万个为什么 ”。
在这里插入图片描述

2. 掘金 - 高质量技术社区

https://juejin.im

掘金技术社区是质量很高的技术分享社区,技术大牛和极客们共同编辑筛选的优质干货,这些技术文章包括Android、iOS、前端、后端资源。

在这里插入图片描述

3. Codrops - 网页设计开发博客

https://tympanus.net

发表技术文章和网页教程,提供经验,少踩坑,资源丰富很丰富,很多优秀的技术都是从这里来的。

在这里插入图片描述

在线 IDE

1. CodePen

https://codepen.io

一个网站前端设计开发平台,针对网站前端代码的一个工具,上面有各种效果的案例特效(炫技),可以在他们的 demo 基础上开发自己的前端设计。
在这里插入图片描述

2. CodeSandBox

https://codesandbox.io

站如其名,CodeSandBox 网站提供一个在线开发环境的“沙盒”,主流的框架如 React、Vue、Angular 等,都可即开即用、实时编译预览,非常方便。
在这里插入图片描述

3. JS Bin

https://jsbin.com

另一个轻量级在线编辑器网站,界面简洁干净,临时想调试简单的 HTML 或 JS 代码可以考虑去这里试一试。
在这里插入图片描述

资源类

1. ICONSVG - 在线自定义设计SVG图标素材

https://iconsvg.xyz

是一个在线可自定义设计SVG图标素材的网站,帮助前端设计师找到想要的图标素材,这些图标素材都是常用图标,可以点击官方提供的素材进行二次设计,同时也可以把设计好的图标导出。
在这里插入图片描述

2. OpenMoji - 免费表情符号库

https://www.openmoji.org

提供源代码的表情符号库,可免费下载使用。
在这里插入图片描述

3. Share Icon - 免费矢量素材图库

https://www.shareicon.net

提供超过25万中ICON矢量图片素材的站点,120多种分类,所有的素材都提供PNG、SVG格式,素材有多种尺寸尺寸包括 512512、256256、128128、6464、3232、1616等,非常适合前端设计师收藏备用。
在这里插入图片描述

4. tableconvert - 在线表格编辑器

https://tableconvert.com

一个功能强大的在线表格编辑器,支持Excel、Markdown、JSON、CSV、HTML等格式的相互转换。当需要转换表格,又不能让它变形,不妨试试这款工具。
在这里插入图片描述

5. Feathericons - 极简 ICON 图标集

https://feathericons.com

一个免费开源的简单而美丽的ICON图标集合,主要设计的使用范畴为应用系统、媒体控制、位置、天气、箭头、徽标等,可在移动端应用开发的时候使用,图标格式为SVG。

在这里插入图片描述

6. HTML5 + CSS 3 免费模版

https://html5up.net/

提供大量的HTML5模版,用户可以自己分享和修改模版。
在这里插入图片描述

本文推荐的网站汇总:

CSS battle : https://cssbattle.dev

Learn CSS layout:http://learnlayout.com

Flexbox Froggy:http://flexboxfroggy.com

EnjoyCSS:https://enjoycss.com

CSS-Tricks :https://css-tricks.com

Neumorphism:https://neumorphism.io

uiGradients:https://uigradients.com

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

JS Tips:https://www.jstips.co

JSweekly:https://javascriptweekly.com

CDNJS:https://cdnjs.com/libraries

Beautiful Open :https://beautifulopen.com

JavaScript Fun:https://www.javascript.fun

Stack Overflow:https://stackoverflow.com

掘金:https://juejin.im

Codrops:https://tympanus.net

CodePen:https://codepen.io

CodeSandBox:https://codesandbox.io

JS Bin:https://jsbin.com

ICONSVG:https://iconsvg.xyz

OpenMoji:https://www.openmoji.org

Share Icon :https://www.shareicon.net

tableconvert :https://tableconvert.com

Feathericons:https://feathericons.com

HTML5UP :https://html5up.net/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/836616.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

初级职称评审流程是什么?如何才能评初级职称呢?

职称主要代表社会地位,有高职称的人享有较高的社会经济和福利待遇,与实际技能未必有直接关联。 初级职称评审流程:初级职称评审需要以企业名义参加评审才可以,提交资料到人社局,人社局核实资料和基本情况,确…

[Qt]FrameLessWindow实现调整大小、移动弹窗并具有Aero效果

说明 我们知道QWidget等设置了this->setWindowFlags(Qt::FramelessWindowHint);后无法移动和调整大小,但实际项目中是需要窗口能够调整大小的。所以以实现FrameLess弹窗调整大小及移动弹窗需求,并且在Windows 10上有Aero效果。 先看一下效果&#xf…

光环云入选“算力服务方阵”成员单位,共筑算力新生态,赋能数字经济发展

7月26日,由中国信息通信研究院、中国通信标准化协会联合主办的“2023第十届可信云大会”在北京举办。会上,光环云正式入选国内首个算力服务研究组织——算力服务方阵,携手方阵成员共筑算力新生态,赋能数字经济发展。 算力服务方阵…

日撸java_day56-57

文章目录 day56-57kMeans 聚类代码运行截图 day56-57kMeans 聚类 1.kMeans 聚类需要中心点收敛时结束. 2.数据集为 iris, 所以最后一个属性没使用. 如果对于没有决策属性的数据集, 需要进行相应修改. 3.数据没有归一化. 4.getRandomIndices() 和 knn 的完全相同, 拷贝过来. 本…

markdown语法速记

markdown语法速记 这里只记录兼容性强的语法格式: [markdown官方文档]https://markdown.com.cn 标题 #号后跟一个空格如:“# title_level_1” 代表一级标题,两个#号代表二级标题,以此类推;最小为6级标题换行 直接…

两数相加 II

给你两个 非空 链表来代表两个非负整数。数字最高位位于链表开始位置。它们的每个节点只存储一位数字。将这两数相加会返回一个新的链表。 你可以假设除了数字 0 之外,这两个数字都不会以零开头。 示例1: 输入:l1 [7,2,4,3], l2 [5,6,4] 输…

【ASP.NET MVC】使用动软(五)(13)

一、问题 前文完成的用户登录后的首页如下: 后续账单管理、人员管理等功能页面都有相同的头部,左边和下边,唯一不同的右边内容部分,所以要解决重复设计的问题。 二、解决方法——使用布局页 在Views上右键添加新建项&#xff…

鸿蒙4.0发布会说了啥?关注个性与效率,小艺智能程度令人惊艳

鸿蒙4.0系统的发布会已经结束,整个发布会看下来,给我最深刻的印象就是——鸿蒙4.0是一个让手机更接近个人终端的系统。但选择系统难免掺杂个人喜好和偏见,因此本文我只会从鸿蒙4.0那些让我感到惊喜的功能入手介绍,不对系统进行评价…

【深度学习Week4】MobileNet_ShuffleNet

报错:unsafe legacy renegotiation disabled 解决方案: 尝试了更换cryptography36.0.2版本,以及更换下载链接的方法,都不行,最后采用了手动下载mat文件并上传到colab的方法 高光谱图像分类数据集简介Indian Pines&…

免疫疗法勘察兵——DC细胞

DC细胞又叫树状细胞或者树突细胞,1869年由保罗兰格尔翰斯发现,一开始被误以为是神经细胞的一种,直到1973年皮肤科医师Inga Silberberg发现了他的免疫功能,同年,被拉尔夫斯坦曼和赞威尔A科恩两人正式命名为“dendritic…

《凤凰架构》第一章——演进中的部分

前言 刚开始决定弄懂文中所提到的所有东西,就像我写ByteByteGo呢几篇文章一样,把每一句话都弄懂。但是对于《凤凰架构》来说,这有点太费时间了,并且没有必要,有些东西可能永远都不会用到,但文章为了全面的…

【基础类】—CSS盒模型的全面认识

一、基本概念:标准IE模型 盒模型:margin border padding content 标准模型:将元素的宽度和高度仅计算为内容区域的尺寸(content-box,默认) 当CSS盒模型为 标准盒模型 (box-sizing: conten…

【安全测试】安全测试威胁建模设计方法STRIDE

目录 背景 TM(ThreatModeling) 实践 具体流程 资料获取方法 背景 目前安全测试一般都存在如下问题: 安全测试人员不懂业务,业务测试人员不懂安全,安全测试设计出现遗漏是无法避免的安全测试点繁多复杂,单点分析会导致风险暴…

商城-学习整理-基础-商品服务API-品牌管理(六)

目录 一、使用逆向工程生成前后端代码1、新增品牌管理菜单2、使用生成的前端代码 二、优化逆向生成的品牌管理页面1、显示状态开关优化2、品牌上传优化(使用阿里云存储)1)阿里云对象存储-普通上传方式2)阿里云对象存储-服务端签名…

paddlenlp:社交网络中多模态虚假媒体内容核查(代码篇)

初赛之baseline解读篇 一、模型框架图1、框架解读2、评价指标解读 二、代码功能1、数据集加载2、模型定义3、模型训练4、模型预测 三、写在最后 一、模型框架图 1、框架解读 第一列是输入,一部分是文本(需核查文本、文本证据材料)&#xff…

ExtJs 7.7.0 下载方法与去除trial水印

背景 最近发现Sencha ExtJs发布了ExtJs7.7.0版本,立刻下载了SDK包,许多朋友不知如何下载,如何去除右上角的trial水印。本文讲下相关下载技巧与方法。 下载SDK 首先需要申请试用,申请地址如下,需要注意可能需要梯子&…

好烦!快让ChatGPT停止道歉!SD创作宣传图的超细教程;教你在PH冷启动薅流量;CSDN举办AI应用创新大赛 | ShowMeAI日报

👀日报&周刊合集 | 🎡生产力工具与行业应用大全 | 🧡 点赞关注评论拜托啦! 🤖 Stable Diffusion 图生图入门,一份详细的思维导图 🤖 DeeCamp X CSDN 举办AI应用创新大赛,万元奖金…

【C++】继承的基本特性(定义,赋值转换,友元,静态成员,虚拟继承,默认成员函数,作用域)

文章目录 一、继承的定义1.定义格式2.继承基类成员访问方式的变化 二、基类和派生类对象赋值转换三、继承的作用域1. 在继承体系中基类和派生类都有独立的作用域。2.子类和父类中有同名成员3.成员函数的隐藏4.注意在实际中在继承体系里面最好不要定义同名的成员。 四、派生类的…

【C语言学习】整数类型表达数的范围

一、整数类型表达数的范围 1.char类型 char 是1个字节 ,即00000000 ~ 11111111,一般情况默认是有符号char(signed char) ,此时char所能表达的数就是 -128 ~ 127,即 -2 ^ n-1 ~ (2 ^ n-1)-1 ,其中n是位数或比特位(1字节8位8比特&…

OPENCV C++(四)形态学操作+连通域统计

形态学操作 先得到一个卷积核 Mat kernel getStructuringElement(MORPH_RECT,Size(5,5)); 第一个是形状 第二个是卷积核大小 依次为腐蚀 膨胀 开运算 闭运算 Mat erodemat,dilatemat,openmat,closemat;morphologyEx(result1, erodemat, MORPH_ERODE, kernel);morphologyEx…