payne-net / inspire

Collection of web design & dev links

Inspire

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

Concept

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

* [TheBestDesigns](https://www.thebestdesigns.com/) - General list of hand picked sites from across the web. * [Awwwards](http://www.awwwards.com/) - More awesome sites of various styles. * [Dribbble](https://dribbble.com/) - Snaps of icons, doodles, sites, and more from a talented group of people. * [MinimalSites](http://www.minimalsites.com/) - Another list of sites, but on the much simpler side. * [Httpster](http://httpster.net/) - A curated list of the best sites around the Internet. * [siteInspire](http://www.siteinspire.com/) - Get inspired. * [Designer News](https://news.layervault.com/) - The best design / development links from the 'net. * [CSS Winner](http://www.csswinner.com/) - Reviewed list of great websites. * [OnePageLove](https://onepagelove.com/) - Great influence for one page and general website design. * [CodeMyUI](http://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. * [CodyHouse](https://codyhouse.co/) - Tutorials and showcase of awesome UI elements. * [CSS3 Cheat Sheet](http://www.justinaguilar.com/animations/#) - CSS3 Cheat Sheet

Creation

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

* Color * [ColorPicker](http://www.colorpicker.com) - Simple yet affective. The name says it all. * [Kuler](https://color.adobe.com/) - Easily create or view a custom color swatch for your site. * [Spectral](http://jxnblk.com/Spectral/) - Minimal color swatch creation. * [Unsemantic](http://unsemantic.com) - Provides a good grid framework for small to large projects. * [MDN](https://developer.mozilla.org) - Documentation for HTML, CSS, JS, etc. * [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. * [Iconmonstr](http://iconmonstr.com) - A collection of free, simple icons. * [Ionicons](http://ionicons.com) - Another great collection of free icons. * [Subtle Patterns](http://subtlepatterns.com) - A massive archive of free backgrounds for your projects. * [Google Fonts](https://www.google.com/fonts) - Tons of free, easy to use webfonts. * [Text to ASCII](http://patorjk.com/software/taag/#p=display&f=Graffiti&t=Type%20Something%20) - Add some sexy Easter eggs in your source code. * [CSS3 Animation Cheat Sheet](http://www.justinaguilar.com/animations/) - A collection of CSS3 animation snippets. * [Flat UI](http://designmodo.github.io/Flat-UI/) - A superb HTML and CSS framework for flat design. It's the juice. * [CSS2Stylus](http://css2stylus.com) - Convert your CSS to Stylus. * [YMNNJQ](http://youmightnotneedjquery.com) - See jQuery functions in natural JS. No libraries. * [User Inter Faces](http://uifaces.com) - Get ipsum images for user images. * 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. * [Albumarium](http://albumarium.com) - A large collection of free stock photos.

Tools

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

* [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. * [Atom](https://atom.io) - A hackable text editor for the 21st century. * [FileZilla](https://filezilla-project.org) - For those who fear FTP in the terminal. * [WinSCP](http://winscp.net) - Upload files to a MEAN stack or VPS server. * [Sketch](http://www.sketchapp.com/) [OS X only] - A professional vector graphics app.

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. * [Scratchpad.IO](http://scratchpad.io) - A simple, RTC tool for coding and previewing websites. * [Red Pen](https://redpen.io) - Share your design and get feedback seamlessly. * [Invoice Ninja](https://www.invoiceninja.com) - Open source invoicing platform.

Backends

Every awesome web app needs an awesome backend.

* [Firebase](https://www.firebase.com) - A real-time front-end database for your sites. * [DigitalOcean](https://www.digitalocean.com/) - A cheap and quality VPS hosting company. * [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.

* [Placehold](http://placehold.it) - Generate custom placeholder images of any size. * [Browserling](https://www.browserling.com/) - Cross-browser test your website. * [CodePen](http://codepen.io) - A free web editor in your browser. * [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. * [Hurl.it](https://www.hurl.it/) - Make HTTP requests in the browser. * [Localtunnel](http://localtunnel.me) - Open localhost ports to the world. * [Postman](https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en) - A Chrome extension to make HTTP requests.

Good Reads

Need something to read in your spare time?

* [Smashing Magazine](http://www.smashingmagazine.com) - A magazine for all things digital design. * [CSS-Tricks](https://css-tricks.com/) - Awesome blog on anything and everything related to CSS. * [Codrops](http://tympanus.net/codrops/) - Great collection of design techniques for modern web developmers and designers. * [Insert HTML](http://www.inserthtml.com) - A blog covering current and upcoming techniques and technologies for web developers. * [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. * [GoodUI](http://goodui.org) - It's definitely not bad. * [Mentor](http://www.mentor.so/) - Get random advice from other designers and developers.

License

To the extent possible under law, Noah Buscher has waived all copyright and related or neighboring rights to this work.

❤️