Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/noahbuscher/Inspire

Collection of frontend dev and web design links :bulb:
https://github.com/noahbuscher/Inspire

List: Inspire

awesome awesome-list list

Last synced: 20 days ago
JSON representation

Collection of frontend dev and web design links :bulb:

Awesome Lists containing this project

README 

        
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 sites of various styles.

* [CodeMyUI](https://codemyui.com/) - List of code snippets for fancy CSS/JS that make an awesome UI.

* [CodePen](http://codepen.io/) - Central repository of user submitted code concepts/snippets. Great for experiments.

* [Codrops](https://tympanus.net/codrops/) - Web design/development blog that publishes articles/tutorials about the latest web trends.

* [CodyHouse](https://codyhouse.co/) - Tutorials and showcase of 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, 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

  * [Google Fonts](https://www.google.com/fonts) - Tons of free, easy to use webfonts.

* Frameworks

  * [Bootstrap](http://getbootstrap.com) - Very popular framework for building modern websites and web apps.

    * [Bootswatch](http://bootswatch.com) - A list of free themes for Bootstrap.

* Icons

  * [Icon Scout](https://iconscout.com) - Get high-quality Icons, Illustrations and Stock photos at one place.

  * [Iconmonstr](http://iconmonstr.com) - A collection of free, simple icons.

  * [Ionicons](http://ionicons.com) - Another great collection of free icons.

* Images

  * [AllTheFreeStock](http://allthefreestock.com/) - All the Free stock mmages, videos, sounds and 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 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, zen way to work with others in the cloud.

* [Gist](https://gist.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.com/) - A cheap and quality VPS hosting company.

* [Firebase](https://www.firebase.com) - A real-time front-end database for your sites.

* [Hasura](https://hasura.io) - Platform to build and deploy app backends fast.

* [Heroku](https://www.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 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 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.



:heart: