Suggest edit — inspiration

Title

Name

Note

---
visibility: public
---

# Inspiration

**repo:** [NoahBuscher/Inspire](https://github.com/NoahBuscher/Inspire)  
**category:** [[front-end-development|Front-End Development]]
**related:** [[design-principles|Design Principles]]

---

Inspire [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
===

Designing and building a modern frontend in any web project can be a long and arduous process. Here's a collection of links to help you. Enjoy!

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

* [Awwwards](http://www.awwwards.com/) - More [awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) sites of various styles.
* [CodeMyUI](https://codemyui.com/) - List of code snippets for fancy CSS/JS that make an [awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) UI.
* [CodePen](http://codepen.io/) - Central repository of user submitted code concepts/snippets. Great for experiments.
* [Codrops](https://tympanus.net/codrops/) - [Web design](/@harrisonqian/awesome/wiki/miscellaneous/web-design)/development blog that publishes articles/[tutorials](/@harrisonqian/awesome/wiki/computer-science/tutorials) about the latest web trends.
* [CodyHouse](https://codyhouse.co/) - [Tutorials](/@harrisonqian/awesome/wiki/computer-science/tutorials) and showcase of [awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) UI elements.
* [CSS Winner](http://www.csswinner.com/) - Reviewed list of great websites.
* [Designer News](https://www.designernews.co/) - The best design / development links from the 'net.
* [Dribbble](https://dribbble.com/) - Snaps of [icons](/@harrisonqian/awesome/wiki/media/icons), doodles, sites, and more from a talented group of people.
* [Httpster](http://httpster.net/) - A curated list of the best sites around the Internet.
* [Landings](https://landings.dev/) - Find the best landing pages for your design inspiration based on your preference.
* [OnePageLove](https://onepagelove.com/) - Great influence for one page and general website design.
* [SaaS Pages](https://saaspages.xyz) - An inspection of Netlify's page made especially to bring you inspiration.
* [Siiimple](https://siiimple.com/) - Another list of sites, but on the much simpler side.
* [SiteInspire](http://www.siteinspire.com/) - Get inspired.
* [TheBestDesigns](https://www.thebestdesigns.com/) - General list of hand picked sites from across the web.

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

* Colors 🎨
  * [ColorsWall](https://colorswall.com/) - Place to store your color palettes.
  * [Coolors](https://coolors.co/) - Super fast color scheme generator.
  * [Kuler](https://color.adobe.com/) - Easily create or view a custom color swatch for your site.
  * [uiGradients](https://uigradients.com/) - Gorgous gradient generator.
  * [Spectral](http://jxnblk.com/Spectral/) - Minimal color swatch creation.
* [Fonts](/@harrisonqian/awesome/wiki/media/fonts)
  * [Google Fonts](https://www.google.com/fonts) - Tons of free, easy to use webfonts.
* [Frameworks](/@harrisonqian/awesome/wiki/front-end-development/frameworks)
  * [Bootstrap](http://getbootstrap.com) - Very popular framework for building modern websites and web [apps](/@harrisonqian/awesome/wiki/platforms/apps).
    * [Bootswatch](http://bootswatch.com) - A list of free themes for Bootstrap.
* [Icons](/@harrisonqian/awesome/wiki/media/icons)
  * [Icon Scout](https://iconscout.com) - Get high-quality [Icons](/@harrisonqian/awesome/wiki/media/icons), Illustrations and Stock photos at one place.
  * [Iconmonstr](http://iconmonstr.com) - A collection of free, simple [icons](/@harrisonqian/awesome/wiki/media/icons).
  * [Ionicons](http://ionicons.com) - Another great collection of free [icons](/@harrisonqian/awesome/wiki/media/icons).
* Images
  * [AllTheFreeStock](http://allthefreestock.com/) - All the Free stock mmages, videos, sounds and [icons](/@harrisonqian/awesome/wiki/media/icons) in one location.
  * [TheStocks.im](http://thestocks.im) - A collection of great stock photo websites.
  * [Unsplash](https://unsplash.com) - Free, high quality stock photos.
* Resources
  * [CSS3 Animation Cheat Sheet](http://www.justinaguilar.com/animations/) - A collection of CSS3 animation snippets.
  * [MDN](https://developer.mozilla.org) - Documentation for HTML, CSS, JS, etc
  * [User Inter Faces](http://uifaces.com) - Get ipsum images for user images.
  * [YMNNJQ](http://youmightnotneedjquery.com) - See [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) functions in natural JS. No libraries.

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

* Design Tools
  * [Figma](https://figma.com) - Web-based vector graphics editor
  * [Sketch](https://sketchapp.com) [macOS only] - A professional vector graphics editor
* IDEs
  * [DevSession](https://devsession.js.org/) - Open a collaborative online IDE from a local directory.
* [FileZilla](https://filezilla-project.org) - For those who fear FTP in the terminal
* [Hyper](https://hyper.is) - Beautiful, extensible command-line interface
* [Taskade](https://www.taskade.com/) [macOS only] - Create beautiful task lists and outlines.
* Text Editors
  * [Atom](https://atom.io) - A hackable text editor for the 21st century.
  * [Brackets](http://brackets.io/) - Modern, open source editor with live preview.
  * [Nova](https://nova.app) [macOS only] - Gorgeous, native text editor.
  * [Sublime Text](https://www.sublimetext.com) - A very popular text editor for developers.
    * Themes
      * [Flatron](https://github.com/noahbuscher/Flatron) - It's flat, purple, and hella sexy.
      * [Predawn](https://github.com/jamiewilson/predawn) - Gorgeous dark interface and syntax theme.
  * [VSCode](https://code.visualstudio.com/) - Free text editor
* [WinSCP](http://winscp.net) - Upload files to a MEAN stack or VPS server.

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

* [Cloud9](https://c9.io) - An [awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome), zen way to work with others in the cloud.
* [Gist](https://gist.[github](/@harrisonqian/awesome/wiki/development-environment/github).com) - Share code and text with others fast. Like a mini repository.
* [Invoice Ninja](https://www.invoiceninja.com) - Open source invoicing platform.
* [Red Pen](https://redpen.io) - Share your design and get feedback seamlessly.
* [Scratchpad](http://scratchpad.io) - A simple, RTC tool for coding and previewing websites.

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

* [Auth0](https://auth0.com/) - Authentication, done for you.
* [DigitalOcean](https://www.[digitalocean](/@harrisonqian/awesome/wiki/platforms/digitalocean).com/) - A cheap and quality VPS hosting company.
* [Firebase](https://www.[firebase](/@harrisonqian/awesome/wiki/platforms/firebase).com) - A real-time front-end [database](/@harrisonqian/awesome/wiki/databases/database) for your sites.
* [Hasura](https://hasura.io) - Platform to build and deploy app backends fast.
* [Heroku](https://www.[heroku](/@harrisonqian/awesome/wiki/platforms/heroku).com) - Cloud application platform; very easy to scale.

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

* [Browserling](https://www.browserling.com/) - Cross-browser test your website.
* [Checkbot](https://www.checkbot.io) - Browser extension that tests your website follows 50+ SEO, speed and [security](/@harrisonqian/awesome/wiki/security/security) best practices.
* [CodePen](http://codepen.io) - A free web editor in your browser.
* [Hurl.it](https://www.hurl.it/) - Make HTTP requests in the browser.
* [Localtunnel](http://localtunnel.me) - Open localhost ports to the world.
* [Placehold](http://placehold.it) - Generate custom placeholder images of any size.
* [Postman](https://www.getpostman.com/) - A tool to make HTTP requests, generate mock servers and make API documentation.
* [WooRank](https://www.woorank.com/) - A review tool for SEO elements, W3 validation, and numerous other variables. Free basic service.
* [Yslow](http://yslow.org) - Tool for analyzing and finding fixes for multiple causes of slow site loading.

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

* [1stWebDesign](http://www.1stwebdesigner.com/blog/) - A good, simple blog on web development and design.
* [A List Apart](http://alistapart.com) - Guest bloggers and full books on topics from coding to business practices.
* [Codrops](http://tympanus.net/codrops/) - Great collection of design techniques for modern web developmers and designers.
* [CSS-Tricks](https://css-tricks.com/) - [Awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) blog on anything and everything related to CSS
* [GoodUI](http://goodui.org) - It's definitely not bad.
* [Insert HTML](http://www.inserthtml.com) - A blog covering current and upcoming techniques and technologies for web developers.
* [Mentor](http://www.mentor.so/) - Get random advice from other designers and developers.
* [Smashing Magazine](http://www.smashingmagazine.com) - A magazine for all things digital design.

## License

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

To the extent possible under law, [Noah Buscher](http://noahbuscher.com) has waived all copyright and related or neighboring rights to this work.

<div align="center">:heart:</div>