└── README.md /README.md: -------------------------------------------------------------------------------- 1 | Inspire [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 2 | === 3 | 4 | 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! 5 | 6 | ## Concept 7 | ##### These sites are good to get a general idea of possible layouts and style paths to take. 8 | 9 | * [Awwwards](http://www.awwwards.com/) - More awesome sites of various styles. 10 | * [CodeMyUI](https://codemyui.com/) - List of code snippets for fancy CSS/JS that make an awesome UI. 11 | * [CodePen](http://codepen.io/) - Central repository of user submitted code concepts/snippets. Great for experiments. 12 | * [Codrops](https://tympanus.net/codrops/) - Web design/development blog that publishes articles/tutorials about the latest web trends. 13 | * [CodyHouse](https://codyhouse.co/) - Tutorials and showcase of awesome UI elements. 14 | * [CSS Winner](http://www.csswinner.com/) - Reviewed list of great websites. 15 | * [Designer News](https://www.designernews.co/) - The best design / development links from the 'net. 16 | * [Dribbble](https://dribbble.com/) - Snaps of icons, doodles, sites, and more from a talented group of people. 17 | * [Httpster](http://httpster.net/) - A curated list of the best sites around the Internet. 18 | * [Landings](https://landings.dev/) - Find the best landing pages for your design inspiration based on your preference. 19 | * [OnePageLove](https://onepagelove.com/) - Great influence for one page and general website design. 20 | * [SaaS Pages](https://saaspages.xyz) - An inspection of Netlify's page made especially to bring you inspiration. 21 | * [Siiimple](https://siiimple.com/) - Another list of sites, but on the much simpler side. 22 | * [SiteInspire](http://www.siteinspire.com/) - Get inspired. 23 | * [TheBestDesigns](https://www.thebestdesigns.com/) - General list of hand picked sites from across the web. 24 | 25 | ## Creation 26 | ##### These sites are good for building a basic framework for the site. 27 | 28 | * Colors 🎨 29 | * [ColorsWall](https://colorswall.com/) - Place to store your color palettes. 30 | * [Coolors](https://coolors.co/) - Super fast color scheme generator. 31 | * [Kuler](https://color.adobe.com/) - Easily create or view a custom color swatch for your site. 32 | * [uiGradients](https://uigradients.com/) - Gorgous gradient generator. 33 | * [Spectral](http://jxnblk.com/Spectral/) - Minimal color swatch creation. 34 | * Fonts 35 | * [Google Fonts](https://www.google.com/fonts) - Tons of free, easy to use webfonts. 36 | * Frameworks 37 | * [Bootstrap](http://getbootstrap.com) - Very popular framework for building modern websites and web apps. 38 | * [Bootswatch](http://bootswatch.com) - A list of free themes for Bootstrap. 39 | * Icons 40 | * [Icon Scout](https://iconscout.com) - Get high-quality Icons, Illustrations and Stock photos at one place. 41 | * [Iconmonstr](http://iconmonstr.com) - A collection of free, simple icons. 42 | * [Ionicons](http://ionicons.com) - Another great collection of free icons. 43 | * Images 44 | * [AllTheFreeStock](http://allthefreestock.com/) - All the Free stock mmages, videos, sounds and icons in one location. 45 | * [TheStocks.im](http://thestocks.im) - A collection of great stock photo websites. 46 | * [Unsplash](https://unsplash.com) - Free, high quality stock photos. 47 | * Resources 48 | * [CSS3 Animation Cheat Sheet](http://www.justinaguilar.com/animations/) - A collection of CSS3 animation snippets. 49 | * [MDN](https://developer.mozilla.org) - Documentation for HTML, CSS, JS, etc 50 | * [User Inter Faces](http://uifaces.com) - Get ipsum images for user images. 51 | * [YMNNJQ](http://youmightnotneedjquery.com) - See jQuery functions in natural JS. No libraries. 52 | 53 | ## Tools 54 | ##### Every painter needs a brush. Well... Most do. 55 | 56 | * Design Tools 57 | * [Figma](https://figma.com) - Web-based vector graphics editor 58 | * [Sketch](https://sketchapp.com) [macOS only] - A professional vector graphics editor 59 | * IDEs 60 | * [DevSession](https://devsession.js.org/) - Open a collaborative online IDE from a local directory. 61 | * [FileZilla](https://filezilla-project.org) - For those who fear FTP in the terminal 62 | * [Hyper](https://hyper.is) - Beautiful, extensible command-line interface 63 | * [Taskade](https://www.taskade.com/) [macOS only] - Create beautiful task lists and outlines. 64 | * Text Editors 65 | * [Atom](https://atom.io) - A hackable text editor for the 21st century. 66 | * [Brackets](http://brackets.io/) - Modern, open source editor with live preview. 67 | * [Nova](https://nova.app) [macOS only] - Gorgeous, native text editor. 68 | * [Sublime Text](https://www.sublimetext.com) - A very popular text editor for developers. 69 | * Themes 70 | * [Flatron](https://github.com/noahbuscher/Flatron) - It's flat, purple, and hella sexy. 71 | * [Predawn](https://github.com/jamiewilson/predawn) - Gorgeous dark interface and syntax theme. 72 | * [VSCode](https://code.visualstudio.com/) - Free text editor 73 | * [WinSCP](http://winscp.net) - Upload files to a MEAN stack or VPS server. 74 | 75 | ## Collaborate 76 | ##### Working with a team? These links are for you. 77 | 78 | * [Cloud9](https://c9.io) - An awesome, zen way to work with others in the cloud. 79 | * [Gist](https://gist.github.com) - Share code and text with others fast. Like a mini repository. 80 | * [Invoice Ninja](https://www.invoiceninja.com) - Open source invoicing platform. 81 | * [Red Pen](https://redpen.io) - Share your design and get feedback seamlessly. 82 | * [Scratchpad](http://scratchpad.io) - A simple, RTC tool for coding and previewing websites. 83 | 84 | ## Backends 85 | ##### Every awesome web app needs an awesome backend. 86 | 87 | * [Auth0](https://auth0.com/) - Authentication, done for you. 88 | * [DigitalOcean](https://www.digitalocean.com/) - A cheap and quality VPS hosting company. 89 | * [Firebase](https://www.firebase.com) - A real-time front-end database for your sites. 90 | * [Hasura](https://hasura.io) - Platform to build and deploy app backends fast. 91 | * [Heroku](https://www.heroku.com) - Cloud application platform; very easy to scale. 92 | 93 | ## Testing 94 | ##### Before you launch, these are good tools to make sure your site is ready for stardom. 95 | 96 | * [Browserling](https://www.browserling.com/) - Cross-browser test your website. 97 | * [Checkbot](https://www.checkbot.io) - Browser extension that tests your website follows 50+ SEO, speed and security best practices. 98 | * [CodePen](http://codepen.io) - A free web editor in your browser. 99 | * [Hurl.it](https://www.hurl.it/) - Make HTTP requests in the browser. 100 | * [Localtunnel](http://localtunnel.me) - Open localhost ports to the world. 101 | * [Placehold](http://placehold.it) - Generate custom placeholder images of any size. 102 | * [Postman](https://www.getpostman.com/) - A tool to make HTTP requests, generate mock servers and make API documentation. 103 | * [WooRank](https://www.woorank.com/) - A review tool for SEO elements, W3 validation, and numerous other variables. Free basic service. 104 | * [Yslow](http://yslow.org) - Tool for analyzing and finding fixes for multiple causes of slow site loading. 105 | 106 | ## Good Reads 107 | ##### Need something to read in your spare time? 108 | 109 | * [1stWebDesign](http://www.1stwebdesigner.com/blog/) - A good, simple blog on web development and design. 110 | * [A List Apart](http://alistapart.com) - Guest bloggers and full books on topics from coding to business practices. 111 | * [Codrops](http://tympanus.net/codrops/) - Great collection of design techniques for modern web developmers and designers. 112 | * [CSS-Tricks](https://css-tricks.com/) - Awesome blog on anything and everything related to CSS 113 | * [GoodUI](http://goodui.org) - It's definitely not bad. 114 | * [Insert HTML](http://www.inserthtml.com) - A blog covering current and upcoming techniques and technologies for web developers. 115 | * [Mentor](http://www.mentor.so/) - Get random advice from other designers and developers. 116 | * [Smashing Magazine](http://www.smashingmagazine.com) - A magazine for all things digital design. 117 | 118 | ## License 119 | 120 | [![CC0](http://i.creativecommons.org/p/zero/1.0/88x31.png)](http://creativecommons.org/publicdomain/zero/1.0/) 121 | 122 | To the extent possible under law, [Noah Buscher](http://noahbuscher.com) has waived all copyright and related or neighboring rights to this work. 123 | 124 |
:heart:
125 | --------------------------------------------------------------------------------