<div class="github-widget" data-repo="NoahBuscher/Inspire"></div>
Inspire [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
===

在任何 Web 项目中设计和构建现代前端都是一个漫长而艰巨的过程. 这里有一组链接可以帮助您. 享受！

## Concept
##### These sites are good to get a general idea of possible layouts and style paths to take.

* [Awwwards](http://www.awwwards.com/) - 更棒的各种风格的网站.
* [CodeMyUI](https://codemyui.com/) - 制作精美 UI 的精美 CSS/JS 代码片段列表.
* [CodePen](http://codepen.io/)  - 用户提交的代码概念/片段的中央存储库. 非常适合实验.
* [Codrops](https://tympanus.net/codrops/) - 发布有关最新网络趋势的文章/教程的网络设计/开发博客.
* [CodyHouse](https://codyhouse.co/) - 很棒的 UI 元素的教程和展示.
* [CSS Winner](http://www.csswinner.com/) - 伟大网站的评论列表.
* [Designer News](https://www.designernews.co/) - 来自网络的最佳设计/开发链接.
* [Dribbble](https://dribbble.com/) - 来自一群才华横溢的人的图标、涂鸦、网站等快照.
* [Httpster](http://httpster.net/) - 精选的 Internet 最佳站点列表.
* [Landings](https://landings.dev/) - 根据您的喜好为您的设计灵感寻找最佳着陆页.
* [OnePageLove](https://onepagelove.com/) - 对一页和一般网站设计有很大影响.
* [SaaS Pages](https://saaspages.xyz) - 专为您带来灵感而制作的Netlify页面的检查.
* [Siiimple](https://siiimple.com/) - 另一个站点列表，但更简单.
* [SiteInspire](http://www.siteinspire.com/) - 得到启发.
* [TheBestDesigns](https://www.thebestdesigns.com/) - 从网络上挑选的网站的一般列表.

## Creation
##### These sites are good for building a basic framework for the site.

* 颜色
  * [ColorsWall](https://colorswall.com/) - 存放调色板的地方.
  * [Coolors](https://coolors.co/) - 超快速配色方案生成器.
  * [Kuler](https://color.adobe.com/) - 轻松创建或查看您网站的自定义色样.
  * [uiGradients](https://uigradients.com/) - 华丽的渐变发生器.
  * [Spectral](http://jxnblk.com/Spectral/) - 最小色样创建.
*字体
  * [Google Fonts](https://www.google.com/fonts) - 大量免费、易于使用的网络字体.
* 构架
  * [Bootstrap](http://getbootstrap.com) - 用于构建现代网站和网络应用程序的非常流行的框架.
    * [Bootswatch](http://bootswatch.com) - Bootstrap 的免费主题列表.
* 图标
  * [Icon Scout](https://iconscout.com) - 在一个地方获取高质量的图标、插图和库存照片.
  * [Iconmonstr](http://iconmonstr.com) - 一系列免费、简单的图标.
  * [Ionicons](http://ionicons.com) - 另一个很棒的免费图标集合.
* 图片
  * [AllTheFreeStock](http://allthefreestock.com/) - 所有免费图片、视频、声音和图标都集中在一个位置.
  * [TheStocks.im](http://thestocks.im) - 很棒的库存照片网站的集合.
  * [Unsplash](https://unsplash.com) - 免费、高质量的库存照片.
* 资源
  * [CSS3 Animation Cheat Sheet](http://www.justinaguilar.com/animations/) - 一组 CSS3 动画片段.
  * [MDN](https://developer.mozilla.org) - HTML、CSS、JS 等文档
  * [User Inter Faces](http://uifaces.com) - 获取用户图像的 ipsum 图像.
  * [YMNNJQ](http://youmightnotneedjquery.com)  - 查看自然 JS 中的 jQuery 函数. 没有图书馆.

## Tools
##### Every painter needs a brush. Well... Most do.

* 设计工具
  * [Figma](https://figma.com) - 基于网络的矢量图形编辑器
  * [Sketch](https://sketchapp.com) [仅限 macOS] - 专业的矢量图形编辑器
* 集成开发环境
  * [DevSession](https://devsession.js.org/) - 从本地目录打开协作在线 IDE.
* [FileZilla](https://filezilla-project.org) - 对于那些害怕终端中的 FTP 的人
* [Hyper](https://hyper.is) - 美观、可扩展的命令行界面
* [Taskade](https://www.taskade.com/) [仅限 macOS] - 创建漂亮的任务列表和大纲.
*文本编辑器
  * [Atom](https://atom.io) - 面向 21 世纪的可破解文本编辑器.
  * [Brackets](http://brackets.io/) - 具有实时预览功能的现代开源编辑器.
  * [Nova](https://nova.app) [仅限 macOS] - 华丽的原生文本编辑器.
  * [Sublime Text](https://www.sublimetext.com) - 一个非常流行的开发者文本编辑器.
    * 主题
      * [Flatron](https://github.com/noahbuscher/Flatron) - 它是扁平的，紫色的，非常性感.
      * [Predawn](https://github.com/jamiewilson/predawn) - 华丽的深色界面和语法主题.
  * [VSCode](https://code.visualstudio.com/) - 免费文本编辑器
* [WinSCP](http://winscp.net) - 将文件上传到 MEAN 堆栈或 VPS 服务器.

## Collaborate
##### Working with a team? These links are for you.

* [Cloud9](https://c9.io) - 在云中与他人合作的一种很棒的禅宗方式.
* [Gist](https://gist.github.com)  - 快速与他人共享代码和文本. 就像一个迷你存储库.
* [Invoice Ninja](https://www.invoiceninja.com) - 开源发票平台.
* [Red Pen](https://redpen.io) - 分享您的设计并无缝获得反馈.
* [Scratchpad](http://scratchpad.io) - 用于编码和预览网站的简单 RTC 工具.

## Backends
##### Every awesome web app needs an awesome backend.

* [Auth0](https://auth0.com/) - 身份验证，为您完成.
* [DigitalOcean](https://www.digitalocean.com/) - 一家物美价廉的 VPS 托管公司.
* [Firebase](https://www.firebase.com) - 网站的实时前端数据库.
* [Hasura](https://hasura.io) - 快速构建和部署应用程序后端的平台.
* [Heroku](https://www.heroku.com)  - 云应用平台； 非常容易扩展.

## Testing
##### Before you launch, these are good tools to make sure your site is ready for stardom.

* [Browserling](https://www.browserling.com/) - 跨浏览器测试您的网站.
* [Checkbot](https://www.checkbot.io) - 测试您网站的浏览器扩展遵循 50 多个 SEO、速度和安全最佳实践.
* [CodePen](http://codepen.io) - 浏览器中的免费网络编辑器.
* [Hurl.it](https://www.hurl.it/) - 在浏览器中发出 HTTP 请求.
* [Localtunnel](http://localtunnel.me) - 向世界开放本地主机端口.
* [Placehold](http://placehold.it) - 生成任意大小的自定义占位符图像.
* [Postman](https://www.getpostman.com/) - 用于发出 HTTP 请求、生成模拟服务器和制作 API 文档的工具.
* [WooRank](https://www.woorank.com/)  - 用于 SEO 元素、W3 验证和许多其他变量的审查工具. 免费基础服务.
* [Yslow](http://yslow.org) - 用于分析和查找网站加载缓慢的多种原因的修复工具.

## Good Reads
##### Need something to read in your spare time?

* [1stWebDesign](http://www.1stwebdesigner.com/blog/) - 一个关于 Web 开发和设计的优秀、简单的博客.
* [A List Apart](http://alistapart.com) - 客座博主和关于从编码到商业实践的主题的完整书籍.
* [Codrops](http://tympanus.net/codrops/) - 为现代网络开发人员和设计师设计的大量设计技巧.
* [CSS-Tricks](https://css-tricks.com/) - 关于与 CSS 相关的任何事物的精彩博客
* [GoodUI](http://goodui.org) - 这绝对不错.
* [Insert HTML](http://www.inserthtml.com) - 涵盖 Web 开发人员当前和即将推出的技巧和技术的博客.
* [Mentor](http://www.mentor.so/) - 从其他设计师和开发人员那里获得随机建议.
* [Smashing Magazine](http://www.smashingmagazine.com) - 一本关于所有数字设计的杂志.

## License

[![CC0](http://i.creativecommons.org/p/zero/1.0/88x31.png)](http://creativecommons.org/publicdomain/zero/1.0/)

在法律允许的范围内， [Noah Buscher](http://noahbuscher.com) 已放弃该作品的所有版权和相关或邻接权.

<div align="center">：心：</div>
