Inspire

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 - More awesome sites of various styles.
• CodeMyUI - List of code snippets for fancy CSS/JS that make an awesome UI.
• CodePen - Central repository of user submitted code concepts/snippets. Great for experiments.
• Codrops - Web design/development blog that publishes articles/tutorials about the latest web trends.
• CodyHouse - Tutorials and showcase of awesome UI elements.
• CSS Winner - Reviewed list of great websites.
• Designer News - The best design / development links from the 'net.
• Dribbble - Snaps of icons, doodles, sites, and more from a talented group of people.
• Httpster - A curated list of the best sites around the Internet.
• Landings - Find the best landing pages for your design inspiration based on your preference.
• OnePageLove - Great influence for one page and general website design.
• SaaS Pages - An inspection of Netlify's page made especially to bring you inspiration.
• Siiimple - Another list of sites, but on the much simpler side.
• SiteInspire - Get inspired.
• TheBestDesigns - 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 - Place to store your color palettes.
• Coolors - Super fast color scheme generator.
• Kuler - Easily create or view a custom color swatch for your site.
• uiGradients - Gorgous gradient generator.
• Spectral - Minimal color swatch creation.
• Fonts
• Google Fonts - Tons of free, easy to use webfonts.
• Frameworks
• Bootstrap - Very popular framework for building modern websites and web apps.
  • Bootswatch - A list of free themes for Bootstrap.
• Icons
• Icon Scout - Get high-quality Icons, Illustrations and Stock photos at one place.
• Iconmonstr - A collection of free, simple icons.
• Ionicons - Another great collection of free icons.
• Images
• AllTheFreeStock - All the Free stock mmages, videos, sounds and icons in one location.
• TheStocks.im - A collection of great stock photo websites.
• Unsplash - Free, high quality stock photos.
• Resources
• CSS3 Animation Cheat Sheet - A collection of CSS3 animation snippets.
• MDN - Documentation for HTML, CSS, JS, etc
• User Inter Faces - Get ipsum images for user images.
• YMNNJQ - See jQuery functions in natural JS. No libraries.

Tools

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

• Design Tools
• Figma - Web-based vector graphics editor
• Sketch [macOS only] - A professional vector graphics editor
• IDEs
• DevSession - Open a collaborative online IDE from a local directory.
• FileZilla - For those who fear FTP in the terminal
• Hyper - Beautiful, extensible command-line interface
• Taskade [macOS only] - Create beautiful task lists and outlines.
• Text Editors
• Atom - A hackable text editor for the 21st century.
• Brackets - Modern, open source editor with live preview.
• Nova [macOS only] - Gorgeous, native text editor.
• Sublime Text - A very popular text editor for developers.
  • Themes
  • Flatron - It's flat, purple, and hella sexy.
  • Predawn - Gorgeous dark interface and syntax theme.
• VSCode - Free text editor
• WinSCP - Upload files to a MEAN stack or VPS server.

Collaborate

Working with a team? These links are for you.

• Cloud9 - An awesome, zen way to work with others in the cloud.