Skip to content

Inspire Awesome

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

Concept

These sites are good to get a general idea of possible layouts and style paths to take.
  • Awwwards - 更棒的各种风格的网站.
  • CodeMyUI - 制作精美 UI 的精美 CSS/JS 代码片段列表.
  • CodePen - 用户提交的代码概念/片段的中央存储库. 非常适合实验.
  • Codrops - 发布有关最新网络趋势的文章/教程的网络设计/开发博客.
  • CodyHouse - 很棒的 UI 元素的教程和展示.
  • CSS Winner - 伟大网站的评论列表.
  • Designer News - 来自网络的最佳设计/开发链接.
  • Dribbble - 来自一群才华横溢的人的图标、涂鸦、网站等快照.
  • Httpster - 精选的 Internet 最佳站点列表.
  • Landings - 根据您的喜好为您的设计灵感寻找最佳着陆页.
  • OnePageLove - 对一页和一般网站设计有很大影响.
  • SaaS Pages - 专为您带来灵感而制作的Netlify页面的检查.
  • Siiimple - 另一个站点列表，但更简单.
  • SiteInspire - 得到启发.
  • TheBestDesigns - 从网络上挑选的网站的一般列表.

Creation

These sites are good for building a basic framework for the site.
  • 颜色
  • ColorsWall - 存放调色板的地方.
  • Coolors - 超快速配色方案生成器.
  • Kuler - 轻松创建或查看您网站的自定义色样.
  • uiGradients - 华丽的渐变发生器.
  • Spectral - 最小色样创建. *字体
  • Google Fonts - 大量免费、易于使用的网络字体.
  • 构架
  • Bootstrap - 用于构建现代网站和网络应用程序的非常流行的框架.
  • 图标
  • Icon Scout - 在一个地方获取高质量的图标、插图和库存照片.
  • Iconmonstr - 一系列免费、简单的图标.
  • Ionicons - 另一个很棒的免费图标集合.
  • 图片
  • AllTheFreeStock - 所有免费图片、视频、声音和图标都集中在一个位置.
  • TheStocks.im - 很棒的库存照片网站的集合.
  • Unsplash - 免费、高质量的库存照片.
  • 资源
  • CSS3 Animation Cheat Sheet - 一组 CSS3 动画片段.
  • MDN - HTML、CSS、JS 等文档
  • User Inter Faces - 获取用户图像的 ipsum 图像.
  • YMNNJQ - 查看自然 JS 中的 jQuery 函数. 没有图书馆.

Tools

Every painter needs a brush. Well... Most do.
  • 设计工具
  • Figma - 基于网络的矢量图形编辑器
  • Sketch [仅限 macOS] - 专业的矢量图形编辑器
  • 集成开发环境
  • DevSession - 从本地目录打开协作在线 IDE.
  • FileZilla - 对于那些害怕终端中的 FTP 的人
  • Hyper - 美观、可扩展的命令行界面
  • Taskade [仅限 macOS] - 创建漂亮的任务列表和大纲. *文本编辑器
  • Atom - 面向 21 世纪的可破解文本编辑器.
  • Brackets - 具有实时预览功能的现代开源编辑器.
  • Nova [仅限 macOS] - 华丽的原生文本编辑器.
  • Sublime Text - 一个非常流行的开发者文本编辑器.
    • 主题
    • Flatron - 它是扁平的，紫色的，非常性感.
    • Predawn - 华丽的深色界面和语法主题.
  • VSCode - 免费文本编辑器
  • WinSCP - 将文件上传到 MEAN 堆栈或 VPS 服务器.

Collaborate

  • Cloud9 - 在云中与他人合作的一种很棒的禅宗方式.
  • Gist - 快速与他人共享代码和文本. 就像一个迷你存储库.
  • Invoice Ninja - 开源发票平台.
  • Red Pen - 分享您的设计并无缝获得反馈.
  • Scratchpad - 用于编码和预览网站的简单 RTC 工具.

Backends

Every awesome web app needs an awesome backend.
  • Auth0 - 身份验证，为您完成.
  • DigitalOcean - 一家物美价廉的 VPS 托管公司.
  • Firebase - 网站的实时前端数据库.
  • Hasura - 快速构建和部署应用程序后端的平台.
  • Heroku - 云应用平台； 非常容易扩展.

Testing

Before you launch, these are good tools to make sure your site is ready for stardom.
  • Browserling - 跨浏览器测试您的网站.
  • Checkbot - 测试您网站的浏览器扩展遵循 50 多个 SEO、速度和安全最佳实践.
  • CodePen - 浏览器中的免费网络编辑器.
  • Hurl.it - 在浏览器中发出 HTTP 请求.
  • Localtunnel - 向世界开放本地主机端口.
  • Placehold - 生成任意大小的自定义占位符图像.
  • Postman - 用于发出 HTTP 请求、生成模拟服务器和制作 API 文档的工具.
  • WooRank - 用于 SEO 元素、W3 验证和许多其他变量的审查工具. 免费基础服务.
  • Yslow - 用于分析和查找网站加载缓慢的多种原因的修复工具.

Good Reads

Need something to read in your spare time?
  • 1stWebDesign - 一个关于 Web 开发和设计的优秀、简单的博客.
  • A List Apart - 客座博主和关于从编码到商业实践的主题的完整书籍.
  • Codrops - 为现代网络开发人员和设计师设计的大量设计技巧.
  • CSS-Tricks - 关于与 CSS 相关的任何事物的精彩博客
  • GoodUI - 这绝对不错.
  • Insert HTML - 涵盖 Web 开发人员当前和即将推出的技巧和技术的博客.
  • Mentor - 从其他设计师和开发人员那里获得随机建议.
  • Smashing Magazine - 一本关于所有数字设计的杂志.

License

CC0

在法律允许的范围内， Noah Buscher 已放弃该作品的所有版权和相关或邻接权.

：心：