跳到主要内容

69个精彩的免费网络工具

免费网络工具:快速链接

01. HTML和CSS(本页)
02. JavaScript的
03. 设计
04. 动画
05. 测试和构建
06. 最好的休息

在许多职业中,解决问题和寻找提高工作效率的方法是首要任务。对于多次执行许多微任务的Web设计人员和前端开发人员来说尤其如此。我们使用通常用于构建免费和开源软件的开放式Web技术的事实意味着我们有太多的网页设计工具在我们的处置。

这也意味着有大量的工具可供选择,从脚本和插件到WordPress主题,浏览器扩展,本机应用程序,Web服务,库,框架,网站模板,图形包等等。

我们已经筛选了数百种可供选择的最佳工具 - 最好的部分是,所有这些都是免费的。使用右侧的boxout(或上面的下拉菜单)跳转到特定区域。

HTML和CSS工具

01. Ai2html

50 free web tools - ai2html

现在,您可以在Illustrator中进行设计并创建即时HTML和CSS

这是一个开源脚本,可以将您的Ilustrator文档转换为HTML和CSS,来自纽约时报的开发人员。对于在Adobe Illustrator中工作的设计人员来说,它看起来是一个非常强大和有用的工具。该脚本是一个JavaScript文件,您可以下载该文件并将其放入Illustrator安装的scripts文件夹中。

02. Autoprefixer

您还没有手工编写CSS供应商前缀,是吗?保持您的开发文件干净,让Autoprefixer(现在是一个PostCSS插件)为您的构建过程中的一部分工作。

03. 与Susy

基于Sass的布局工具包自推出以来一直稳步增长。它拥有强大的社区,并提供许多可定制的功能,以满足任何项目的需求。

04. 危急

内联CSS是良好性能的要求。 Addy Osmani的Critical可以作为Grunt插件使用,也可以和Filament Group一起使用LoadCSS脚本,它是提取和加载您的首要款式的绝佳选择。

05. 鞋带

Shoelace是一个易于使用的Bootstrap 3可视化网格构建器。其功能包括响应式媒体查询视图和功能齐全的预览。

06. DomFlags

50 free web tools - DomFlags

DomFlags可以更轻松地在DevTools中导航深层嵌套的HTML元素

Chrome扩展程序,可让您使用a标记DOM中的元素Domflags属性。打开DevTools时,将自动检查第一个标记元素,并可使用键盘快捷键浏览标志。这个工具可以很方便地处理难以导航的混乱DOM。

07. 萨斯林特

Sass Lint是Sass / SCSS代码的基于节点的代码质量工具,可作为Grunt或gulp插件使用。对于不太熟悉Sass最佳实践的初学者来说,Sass Lint特别棒。

08. SMACSS

SMACSS是CSS的可扩展和模块化架构。这里没有任何东西可以下载或安装,只是构建大大小小项目的一大堆想法。该网站包括一个免费的电子书供您下载,阅读和学习。

09. BEM

BEM是一种在整个行业中广泛使用的CSS方法。其命名约定的简单性有助于解决CSS中的特殊性问题 - 使用双下划线将元素限定为块名称,并使用双短划线进行修改。

10. 面向对象的CSS

OOCSS诞生于后端开发方法之外。核心原则是重用代码和不重复自己(DRY)编程,其结果更容易维护,项目中的CSS更小。

下一页:免费的JavaScript工具......



翻译字数超限