前端开发实用的网站合集

空城皆是旧梦

于 2024-07-30 15:54:55 发布

阅读量661

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/qq_36012563/article/details/140764780

版权

一、技能提升篇

vueuse

它包含了各种用于处理常见任务的功能函数和组合式 API，如操作DOM、状态管理、副作用处理等。VueUse的使用使得Vue.js开发更加高效和便捷，适合想要进一步优化Vue.js应用程序的开发者使用。
网址：https://vueuse.org/
在这里插入图片描述

RxJs

RxJs是专注于响应式编程库RxJS的介绍和使用指南。网站提供了RxJS操作符、Observable的详细说明和示例，帮助开发者理解和利用响应式编程范式来简化异步和事件驱动的编程。适合希望学习RxJS的前端开发者和其他使用JavaScript的技术人员。

网址：https://cn.rx.js.org/
在这里插入图片描述

JavaScript.info

JavaScript.info是一个专注于现代JavaScript教程和文档的网站。它提供深入和易于理解的教程，涵盖从基础到高级的各个主题，包括语法、DOM操作、异步编程等。网站内容由专业的JavaScript开发者编写，适合初学者和有经验的开发者深入学习和提升技能。
网址：https://javascript.info/
在这里插入图片描述

Web安全学习

eb安全从基础到高级的文档和指南，旨在帮助开发人员和安全专家了解和实施Web应用程序的安全措施。涵盖了各种安全威胁、攻击技术和防御方法，包括跨站脚本（XSS）、SQL注入、CSRF等。适合想要提升Web应用程序安全性的开发者和安全从业人员参考学习。
网址：https://websec.readthedocs.io/zh/latest/index.html

在这里插入图片描述

二、UI篇

iconfont：阿里巴巴矢量图标库

千万矢量图标素材，内容丰富且精美，支持各种风格，只有你想不到的，没有你找不到的，而且支持下载不同格式的icon。
网址：https://www.iconfont.cn/
在这里插入图片描述

IconPark

拥有2600+基础图标，29种图标分类，丰富多彩的资源库免费使用
网址：https://iconpark.oceanengine.com/home
在这里插入图片描述

3dicons

为你的网站增添立体感图标是网站设计中的重要元素，而 3dicons 提供了丰富的 3D图标资源。无论是扁平化还是立体感的图标，你都能在这里找到。将这些图标融入你的网站，定能让你的网站焕发出新的活力！
网址：https://3dicons.co/
在这里插入图片描述

美叶

本网站是一个宝藏设计灵感网站。包含UI设计、应用墙、插画师、标志库、运营活动、图标icon、平面排版以及字体设计。发现美，学习美，创作美。

网址：https://www.meiye.art/

在这里插入图片描述

Undraw

免费 SVG 插图库如果你正在为找不到合适的插图而烦恼，Undraw 这个网站或许能帮到你。它提供了大量免费的 SVG插图，你可以随意选择并应用到你的网站或应用中，让你的作品更加生动有趣。
网址：https://undraw.co/illustrations
在这里插入图片描述

Error 404

打造个性化的错误页面当用户遇到 404 错误时，一个精心设计的错误页面能够为他们提供更好的用户体验。Error 404 网站提供了多种 404页面模板供你选择，让你能够轻松打造出符合自己风格的错误页面。
网址：https://error404.fun/
在这里插入图片描述

摹克

随时随地自主获取设计图的最新切图文件，一键下载全部切图压缩后体减小50%以上，自动换算不同平台尺寸，还可以自定义切图尺寸。样式代码，自动生成。

网址：https://www.mockplus.cn/idoc/developer
在这里插入图片描述

三、CSS篇

You-need-to-know-css

是一个专注于 CSS 的学习平台，涵盖了 CSS 的所有基本概念和高级技巧。可以更高效的学习并提升你的css技能。

网址：https://lhammer.cn/You-need-to-know-css/#/zh-cn/
在这里插入图片描述

CSS Tricks

总结一些常用的 CSS 样式，并记录一些 CSS 的新属性和一点奇技淫巧，提供了大量的技术文档、教程和代码示例。
网址：https://qishaoxuan.github.io/css_tricks/
在这里插入图片描述

Animate.css

是一个 CSS 动画库，提供了大量现成的动画效果，可以让你轻松为网页增添动态效果。
网址：https://animate.style/
在这里插入图片描述

CSS Scan

box-shadow 效果的灵感库box-shadow 是 CSS 中一个非常强大的属性，可以用来创建阴影效果，增加元素的立体感。CSS Scan 网站展示了大量 box-shadow 的实例，你可以在这里找到灵感，应用到自己的项目中。
网址：https://getcssscan.com/

在这里插入图片描述

CSS Filter

CSS 滤镜的无限可能CSS Filter 这个网站可以让你实时预览各种 CSS滤镜效果，包括模糊、亮度调整、颜色变换等。通过尝试不同的组合和调整参数，你可以创造出独特的视觉效果。
网址：https://www.cssfilters.co/
在这里插入图片描述

四、颜色篇

中国色

网址：https://www.zhongguose.com/#haibaohui

在这里插入图片描述

渐变色网站

Wbgradients 是一个在线调整渐变色的网站，可以根据你想要的调整效果，同时支持复制 CSS 代码，可以更好的与开发对接。
网址：https://webgradients.com/

在这里插入图片描述

波浪生成

创意分割线生成器在网页设计中，分割线可以用来划分不同区域，增强视觉效果。Shape Divider 是一个在线生成器，让你能够轻松创建出各种形状的分割线，并导出为 SVG 格式，方便你在项目中使用。

网址：https://www.shapedivider.app/

在这里插入图片描述

透明磨砂框

一个有趣的在线CSS玻璃风格工具，可以帮助开发者们在 UI 设计中快速应用 Glass Morphism 风格，并且提供了多种自定义选项和实时预览功能并支持将生成的css代码导出。
网址：https://glassgenerator.netlify.app/#

在这里插入图片描述

色卡组合

在这里插入图片描述

网址：https://www.colorion.co/

五、工具篇

查询网

提供各种各样的在线便捷工具。有常见计算、生活日常、格式化工具、编码/加密工具、转换工具等等诸多工具。
网址：https://www.ip138.com/

在这里插入图片描述

FreeCodeCamp

FreeCodeCamp 是一个免费的在线编程学习平台，提供了大量的编程课程和实践项目。它不仅仅是一个在线课程，更是一个充满活力的开发者社区，让你可以在实践中提升技能，并通过实际项目为非营利组织做贡献。
网址：https://www.freecodecamp.org/

在这里插入图片描述

Codecademy

一个在线编程学习平台，提供了包括 HTML 在内的、多种编程语言的基础入门到高级课程，包括网页开发、数据分析和全栈工程等。为任何想学习代码的人提供服务。
网址：https://www.codecademy.com/

CodePen

Codepen可以用来构建和部署网站，展示你的工作，同时也可以构建测试用例以学习和调试。并且能够从 180w + 的前端设计师和开发人员的优质作品里寻找灵感。
网址：https://codepen.io/

在这里插入图片描述

蛙蛙工具

一个免费便捷在线工具网站,提供语言工具、文本工具、转换工具、编码解码、站长工具等便利的在线工具服务,是你生活和工作学习的好帮手。
网址：https://www.iamwawa.cn/

在这里插入图片描述

书栈网

IT程序员互联网开源编程书籍阅读分享,囊括小程序、前端、后端、移动端、云计算、大数据、区块链、机器学习、人工智能和面试笔试等相关书籍。
网址：https://www.bookstack.cn/

在这里插入图片描述

码农之家

整理了计算机电子书和一些编程电子文档，可以免费下载，是你能够系统的入门一门课程或者提高一门编程语言技能的重要途径。
网址：https://www.xz577.com/

Carbon

是一个在线工具，将代码转为图片工具，很容易的为你的代码创建漂亮的图片。
网址：https://carbon.now.sh/
在这里插入图片描述

TinyPNG

TinyPNG 加速网站的访问并节约带宽。将 WebP、PNG 和 JPEG 图片压缩50-80%。同时保留PNG的透明度。帮助用户减小图像文件的尺寸,同时保持高质量的图像显示。
网址：https://tinypng.com/

六、性能篇

Can I Use

Can I Use是提供了各种Web技术在不同浏览器和平台上的兼容性信息。Can I Use的界面简洁明了，支持多种Web技术，例如HTML、CSS、JavaScript、SVG、WebGL等。用户可以在搜索框中输入要查询的Web技术名称，然后选择相应的版本和浏览器，即可查看该技术在不同浏览器和平台上的兼容性信息。Can I Use还提供了一些高级功能，例如趋势图、全球使用情况、版本历史等，可以帮助用户更好地了解Web技术的发展和使用情况。
网址：https://caniuse.com/