[实用]推荐一些非常棒的前端网站

news/2024/5/20 13:54:47/文章来源:https://blog.csdn.net/sinat_17775997/article/details/107460338

前言

有时候，提高效率的办法，比如收藏一些好用的网站。这么多年下来，收藏夹里面躺着一些好用的网站，来掘金的时候，收获了很多知识，这时候准备回馈点东西给你们。

❝

如果部分国外网站访问不了的，请自行解决。

❞

开发工具

平时学习前端时用到的一些辅助工具类网站

网址说明
www.typora.io个人最喜欢的Markdown写作工具，所见即所得。
mdnice.com使markdown语法更加美观。
unbug.github.io/codelf变量命名推荐（支持中文）。
www.docschina.org印记中文。
github.com/any86/any-r…正则表达式库，非常全，使用起来很方便。
xuanfengge.com/easeing/cea…css动画缓动函数预览及生成。
www.toptal.com/developers多张图片合成雪碧图，并生成对应css。
tool.lu整合常用的工具，包括正则表达式，进制转换等。
www.bootcdn.cn 或 cdn.baomitu.com国内的CDN库，速度快。
www.gitignore.io根据选择会去生成.gitignore文件。

github.com/any86/any-r… 正则表达式

使用起来很方便，如果你使用Vscode开发的话，去插件商店搜索any-rule，非常便利。

any-rule

any-rule

unbug.github.io/codelf 还在为命名而烦恼吗？它就能帮你解决，变量推荐的网站。

变量推荐

变量推荐

比如多张图片生成雪碧图，还有国内的CDN库，赶紧去试一试吧。

HTML CSS JS

常见的CSS动画库，炫酷的组件，各种好看UI组件，各种样式及动画在线生成。

网站说明
htmlarrows提供HMTL的特殊符号，只有你想不到的
cssdeck在线CSS前端代码Demo样式效果
codepen前端炫酷样式效果，各种loading效果，在线编程，Vue组件也特别多
Animista前端炫酷样式技能效果,各种各样的动画效果，提供在线的CSS代码
cubic-bezierCSS3贝塞尔曲线在线调试工具
three.jsJavaScript编辑3D模型，各种各样炫酷的效果以及Documentation值得你去了解
View UI一套基于 Vue.js 的高质量 UI 组件库
SnapsvgSVG动效的JS库,各种炫酷的效果。
Cool Backgrounds超酷的背景图片，渐变的色彩的图片背景都有，看起来很酷。

上面的网站，我们就选两个介绍一下。

「codepen」

一个在线编程的网站，不止如此，还能给你提供非常丰富的组件，炫酷的动画也会给你思想上很大的冲击力。

 

codepen

有时候，你想要的Vue组件上面说不定都有，比如你需要好看的loading UI的话，codepen都能给你一定的帮助。

「Animista」

我们直接看看这个网站可以减少我们哪些工作量吧。

Animista

Animista

有时候，你需要一个炫酷的入场动画，或者是炫酷的出场动画，这个网站就可以帮助你，直接给你生成相应的代码，减少了你的工作量。

编程题库

通过刷题和编程训练来提升编程思想

  • leetcode中文版

  • 剑指offer

  • Codewars

对于非Acmer而言，通过这个两个网站刷题来提高编程思想就好啦

「剑指offer」

我们拿这个剑指offer来说，里面的题目质量都是很高的，通过此网站的刷题，会让你的编程思想更有所提高，也帮助你早日拿大厂Offer🚀

剑指Offer

剑指Offer

上面的分类会有相应的题目练习，通过分类标签刷题，这样子效率会更高些。

检查测试

检测Web前端兼容性或者是网站性能测试

网址说明
Can I use 正如网站一样，我这个属性能在哪些浏览器兼容，一查便知。
Browser Sandbox各大平台浏览器兼容性在线测试
GTmetrix网站在线性能测试分析、优化建议
HttpWatch一款强大的网页HTTP数据分析软件
PageSpeedGoogle在线性能测试网站、优化建议
validatorW3C的HTML有效性验证
css-validatorW3C的CSS有效性验证

「Can I Use」

非常好用的网站，有时候，你不知道一个属性的兼容性，一查便知🚀

Can I use

Can I use

「PageSpeed」

这个网站可以帮你检测性能，给你提出一些优化建议，对于有个人博客的掘金小伙伴来说，很不错。

PageSpeed

PageSpeed

至于其他的网站，自行去探索一下。

视频教程

技术分享和教程视频。

网址说明
free-programming-books这个就不多说了，强烈推荐过的，免费的计算机编程类书籍，很多很全，不过都是英文的，有英语阅读习惯的人强烈推荐给你们。
可汗学院可汗学院是一种新型的教育方式，甚至颠覆了美国的教育方式，简单地说，就是世界上最牛的老师，给全世界想学习的人，创造的一个百科全书式的、全免费和网上智能跟踪的视频学习平台
IT大咖说国内技术大会分享录像为主。
慕课国内网站，免费课挺多，实战课付费，按课付费，价格偏贵。（其他如腾讯课堂，网易云课堂等都差不多一个路数）
UdacityUdacity 中文名叫做「优达学城」，是一个免费的自学编程的网站，不过目前也有一些收费课程。

free-programming-books

当然了，这里有中文版的，地址：free-programming-books-zh_CN.

GitHub上面154k,中文版的也有68k+,非常好的学习资源。

free-programming-books

free-programming-books

有些人喜欢看视频，觉得这样子更加清楚直观，所以很多人都更喜欢看视频，尤其是刚入门的时候。网上现在也有很多培训机构的课程视频，能找到了也可以看一看，但是进阶时建议多看些国外视频，拓宽下视野，顺便练下英语能力。

上面大部分网站的视频还是付费的，如果想看免费的视频其实可以看youtube，上面技术分享的视频也非常多，重点是都是免费的。

下面推荐几个youtube的技术账号，可以关注一下。

  • freeCodeCamp.org

  • Red Stapler

  • LearnCode.academy

  • Wes Bos

  • Coding Tech

问答论坛

开发中遇到问题，去这些地方就对了。

网站说明
知乎没什么说的，有了知乎应该没有人会再去用百度知道那垃圾东西了吧。
Segmentfault更专注技术问题。
Stack OverflowSegmentfault的外国原版，非常强大。
cnodejsnode社区
react-chinareact社区
掘金掘金是一个高质量产出的地方，当然了，很多的问题在这里也是可以寻求帮助并解决的。

「开源框架和库的问题，去github上找到项目查询issue通常都能找到解决方案。」

生成漂亮的代码图片

  • glorious.codes

  • codezen

  • codeimg

想要好看的代码片段怎么办，当然有办法了，上面三个网站都是不错的选择，我们来看其中的一个效果吧。

美化代码片段

美化代码片段

图库素材

  • 高质量免费版权的图库素材

  • 免费高清灵感图片

  • 免费高清摄影图库

  • 高清壁纸图片分享网站

对于图片的需求，日常肯定也是必不可少的，所以选中了其中几个高质量的。

高质量免费版权的图库素材 这个网站的素材也不错的

 

高质量图片

其他的素材网站也非常的不错，这里就不举例子了。

压缩工具

  • docsmall.com

  • img.top

  • 图片压缩squoosh

压缩工具

压缩工具

基本上图片，gif压缩这个网站都可以解决的，免费使用，效果也不错。

设计规范

  • iPhone各设备屏幕尺寸

  • 移动屏幕尺寸设计规范

  • 微信官方小程序UI样式库

  • 各大尺寸设备响应式屏幕效果显示

有时候，移动开发的话，会遇到许多涉及规范的问题，这个时候应该怎么办呢？可以通过上面的网站，去查找相应的设计规范，我们举个例子。

移动屏幕尺寸设计规范

设计规范

设计规范

其他的网站查询设计标准也是不错的，有兴趣的话，可以去折腾一下。

免费字体设计

www.fontspace.com

免费字体

免费字体

这个网站字体不错，我找了好久，都特别美观，而且都是免费下载的🤭

icon图标

  • 阿里图标库

  • 草莓图标库

  • 免费商用高质量图标素材

  • Flation-海量扁平化标准图标库

  • 精美简洁icon

  • easyicon-图标库

  • 系统平台风格和web图标库

  • 完全可定制和使用的矢量图标库

上面的图标库，绝对可以满足你日常开发的要求，这里就展示一下阿里图标库吧。

图标库

图标库

免费好用的PDF在线工具

PDF派

pdf阅读

pdf阅读

有了它，日常的学习开发遇到PDF都不带怂一下的。

抠图神器

  • removebg

  • 在线ps-uupoop

有时候老板给你一张图，要你去切图，你没有PS工具怎么办，不怂，我们有这个网站，直接解决我们日常学习开发遇到的困难，切图仔我也会。

在线PS切图

在线PS切图

简单又好用，效率🚀🚀🚀

颜色搭配

  • 中科院色谱的中国传统色

  • 在线快速配色生成工具

  • 每天更新一组简洁舒服的配色方案

  • MaterialDesign强大的在线配色

  • 通过网址获取分析网站配色

  • 炫酷多边形背景色块生成

  • 色彩搜索引擎

  • 流行的网格渐变背景免费下载

  • 上传并匹配提取图片风格的颜色

有时候， 你想搭配一套好看的配色怎么办呢？上面这些网站就可以解决你的大部分的问题。

中科院色谱的中国传统色

 

中科院色谱的中国传统色

你看看正如这个「中科院色谱的中国传统色」名字一样，里面的配色很好看，而且很容易获取到。

我们看看下面的配色网站：

每天更新一组简洁舒服的配色方案

每日一组配色网站

每日一组配色网站

也不知道为什么看了上面的配色，顿时赶紧自己又行了🤭

在线绘图

  • ProcessOn

  • draw.io

  • excalidraw

有没有思维导图绘制工具推荐，当然有了，上面三个工具就可以解决这个问题，不需要下载，在线编辑就行。

思维导图绘制

思维导图绘制

第三个思维导图绘制在线工具也不错，可以推荐给你们。

稳定免费图床

图壳

免费图床

免费图床

免费的图床难道不香吗，而且操作起来简单。

文件传输-网盘工具

  • cowtransfer.com

  • send-anywhere

有时候，想传文件怎么办呢，这时推荐给你们两个好用免费的网盘工具，免费速度快，操作简单。

奶牛快传

奶牛快传

设计素材

  • 简洁大气背景纹理

  • 免费高质量矢量图下载

  • 随机下拉背景纹理库

  • 矢量和CSS网页背景纹理配色生成

  • UI设计师100day

持续更新中

「❤️ 感谢大家」

如果你觉得这篇内容对你挺有有帮助的话：

  1. 点赞支持下吧，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）

  2. 整理一些网站，可能会遗漏一些网站，如果有更大其他优秀的学习网站的话，可以评论分享出来，最后也希望这些网站可以给大家带来帮助。

  3. 觉得不错的话，也可以看看往期文章：

    [干货👍]从详细操作js数组到浅析v8中array.js

    [1.2W字👍]写给女友的秘籍-浏览器工作原理（上）篇

    [1.1W字]写给女友的秘籍-浏览器工作原理（渲染流程）篇

    [建议👍]再来100道JS输出题酸爽继续（共1.8W字+巩固JS基础）

    [诚意满满✍]带你填一些JS容易出错的坑


作者：TianTianUP
链接：https://juejin.im/post/5f0dce476fb9a07e5b62d134
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

360浏览器收藏夹_你缺的不是收藏而是藏经阁——聊聊那些极好用的收藏夹整理插件/网站...

360浏览器收藏夹_你缺的不是收藏而是藏经阁——聊聊那些极好用的收藏夹整理插件/网站...

收藏是不少小伙伴的习惯，就我而言，收藏夹收藏的网址已经有535条，但我相信比我多的绝对是大有人在。虽然我们经常都会收藏，可是我们真的懂得收藏吗？或许，你缺的不是收藏而是一个懂你的藏经阁~~~第一步——从…
阅读更多...
sqlserver 每天一行_学 SQL Server 我最常逛的 5 个网站

sqlserver 每天一行_学 SQL Server 我最常逛的 5 个网站

点击蓝色“有关SQL”关注我哟加个“星标”，天天与10000人一起快乐成长很多读者加我微信，问的问题都很类似，“有没有好的书可以推荐”，“我是上班族，没有时间看书，有没有快速入门、进阶的视频推荐&#xff1…
阅读更多...
建网站怎么建mysql数据库_数据库的建立(mysql数据库怎么建表)

建网站怎么建mysql数据库_数据库的建立(mysql数据库怎么建表)

第一步：创建数据库使用CREATE DATABASE 语句；CREATE DATABASE 用于创建数据库；实例：希望创建一个名为"my_first_db"的数据库。create database my_first_db;执行语句后，你将会在左侧的mysql信息列表中&#…
阅读更多...
前端学习网站

前端学习网站

一、非技术类 1、V2EX：https://www.v2ex.com/ 程序员撕X大本营，很多业界热门撕X都是从这个论坛吵起来的，适合吃瓜 2、IT 公论：https://itgonglun.com/archive/2015/#e-2918 音频节目，已经停更几年了，但有…
阅读更多...
html蔚蓝网注册页面,如何在网站中添加手机短信验证码注册功能？

html蔚蓝网注册页面,如何在网站中添加手机短信验证码注册功能？

原标题：如何在网站中添加手机短信验证码注册功能？这个功能大家都非常熟悉了，就不废话了，直接入正题!下面以使用榛子云短信为例:1. 首先注册一个榛子云账号，注册地址: http://sms_developer.zhenzikj.com/zhenzisms_use…
阅读更多...
50 多个提高前端人效率的工具、网站和书籍整理

50 多个提高前端人效率的工具、网站和书籍整理

本文包含了在线编译，在线编辑、实用工具、可视化工具、各种前端电子书等50多个网站，快放到你的收藏夹吃灰吧 如果你看到最后了，记得给我一个免费的赞哦 在线编译（编辑）、playground JS 代码混淆 www.jsfuck.com/ 嗯…
阅读更多...
70+ 实用工具网站分享（建议收藏！）

70+ 实用工具网站分享（建议收藏！）

前言 大家好，我是HoMeTown，好的工具，可以帮助我们大幅提高编程效率，今天给大家分享一下我平时收集到的一些工具，目录已经分好了。 JavaScript JavaScript教程 通俗易懂的JavaScript教程 传送门 ES6教程 阮一峰大佬…
阅读更多...
大型互联网网站割接方案

大型互联网网站割接方案

某国内大型网站改版，线上运行中的网站是由A部门负责，改版工作和以后的维护工作由B部门负责，我担任B部门改版项目的负责人。 前期的架构设计中面临两点问题： 1. A部门和B部门的技术框架和架构设计是不一样，且改版…
阅读更多...
大型互联网网站的告警系统及策略

大型互联网网站的告警系统及策略

1. web服务进程的监控 监控web服务器上的web进程是否存活，内存，cpu,网卡数据上报到监控服务器 2. web服务依赖的业务逻辑服务的监控 Web服务调用业务逻辑服务成功和失败都上报到监控服务器，设置监控阀值，低于阀值告警…
阅读更多...
如何使用Zend Framework、Smarty、Ajax创建一流的网站

如何使用Zend Framework、Smarty、Ajax创建一流的网站

如何使用Zend Framework、Smarty、Ajax创建一流的网站“读完本书后，我发现自己对Web开发和MVC模式的理解都已经今非昔比……强烈推荐此书！”——Amazon.com“……一部极富启发性的PHP实战指导书，业界专家充分演示了如何使用Zend Framework、S…
阅读更多...
国内国际典型B2B、B2C网站

国内国际典型B2B、B2C网站

阅读更多...
Axure RP一键生成网站结构图

Axure RP一键生成网站结构图

转自：https://jingyan.baidu.com/article/67508eb4decbe59ccb1ce441.html 详见上面的百度百科。 需要补充的如下图。
阅读更多...
海洋工作室——网站建设专家：FTP服务与FTP软件基础知识

海洋工作室——网站建设专家：FTP服务与FTP软件基础知识

共享下载站，即我们所说的FTP服务器，FTP是英文File Transfer Protocol的缩写，中文意思是文件传输协议。用户通过FTP协议能够在两台联网的计算机之间相互传递文件，它是互联网上载递文件最主要的方法。FTP服务器是互联网上提供FTP 提…
阅读更多...
很好的网站

很好的网站

为什么80%的码农都做不了架构师？>>> 也来了几天了，发表下感慨 oschina.net是个从系统到内容都很不错的网站，非常感谢红薯大哥 转载于:https://my.oschina.net/jeecn/blog/9085
阅读更多...
SharePoint 2010新建站点不能登录解决方法

SharePoint 2010新建站点不能登录解决方法

SharePoint 2010新建站点不能登录解决方法 近期在使用SharePoint 2010，今天我在一台新服务器上（单服务器，无域环境），新建了一个SharePoint 2010的站点（先创建Web应用程序，再创建网站集&#xff…
阅读更多...
html调查问卷代码模板_从问卷调研到数据分析，只要这个网站就能搞定！

html调查问卷代码模板_从问卷调研到数据分析，只要这个网站就能搞定！

在平时的工作和学习中，我们难免会遇到需要用到问卷调研软件来制作调查问卷、报名表单、在线表单等功能来获取相关信息和数据。而说起问卷星，很多人对其的第一印象大概是它能来做调查问卷，但问卷星作为一个强大的问卷调研软件，所包…
阅读更多...
为了让该网站给你提供个人化信息_网站怎么优化才能在Google搜索引擎有排名

为了让该网站给你提供个人化信息_网站怎么优化才能在Google搜索引擎有排名

大家在做谷歌优化推广是不同与百度，360等搜索引擎的！谷歌搜索引擎是世界上最大的，因此它也是最难的，http://webmasterworld.com的创始人Brett Tabke，在2002年2月3号写了一起篇“十二个月内，仅仅依靠Google打…
阅读更多...
耐思尼克的“建站宝盒”怎么样呀？

耐思尼克的“建站宝盒”怎么样呀？

2019独角兽企业重金招聘Python工程师标准>>> 我在QQ新闻， http://tech.qq.com/a/20100325/000344.htm 和新浪新闻等都有看过他们的报道，好像很有名的。 “ 建站宝盒”是耐思尼克凭借多年企业上网和网站建设的服务经验，基于对数万中…
阅读更多...
json.parseobject空值不输出_Python干货宝典：数据丢失不可怕，能手Pandas来帮你

json.parseobject空值不输出_Python干货宝典：数据丢失不可怕，能手Pandas来帮你

当一个或多个项目或整个单元没有提供信息时，可能会出现丢失数据。在现实生活中，丢失数据是一个很大的问题，往往找半天还找不回来。在Pandas中，缺少的数据由两个值表示：None：None是Python单例对象&#xff0…
阅读更多...
ico网站标志显示不了(转自www.jqueryba.com)

ico网站标志显示不了(转自www.jqueryba.com)

2019独角兽企业重金招聘Python工程师标准>>> 依然奋斗在工作岗位上&#xff0c;加班伤不起 ╮(╯▽╰)╭ ico网站标志显示不了&#xff0c;好多时候是因为缓存 没有没有刷新 今天也试了几个 方法 这个感觉还行 一试就管用 <link rel”shortcut icon” href”http…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业