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 – General list of hand picked sites from across the web.
• Awwwards – More awesome sites of various styles.
• Dribbble – Snaps of icons, doodles, sites, and more from a talented group of people.
• Siiimple – Another list of sites, but on the much simpler side.
• Httpster – A curated list of the best sites around the Internet.
• siteInspire – Get inspired.
• Designer News – The best design / development links from the ‘net.
• CSS Winner – Reviewed list of great websites.
• OnePageLove – Great influence for one page and general website design.
• 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.
• CodyHouse – Tutorials and showcase of awesome UI elements.
• CSS3 Cheat Sheet – CSS3 Cheat Sheet

Creation

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

• Color
  • 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.
• Unsemantic – Provides a good grid framework for small to large projects.
• MDN – Documentation for HTML, CSS, JS, etc.
• Bootstrap – Very popular framework for building modern websites and web apps.
  • Bootswatch – A list of free themes for Bootstrap.
• iconscout.com – 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.
• Subtle Patterns – A massive archive of free backgrounds for your projects.
• Google Fonts – Tons of free, easy to use webfonts.
• Text to ASCII – Add some sexy Easter eggs in your source code.
• CSS3 Animation Cheat Sheet – A collection of CSS3 animation snippets.
• Flat UI – A superb HTML and CSS framework for flat design. It’s the juice.
• CSS2Stylus – Convert your CSS to Stylus.
• YMNNJQ – See jQuery functions in natural JS. No libraries.
• User Inter Faces – Get ipsum images for user images.
• 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.

Tools

Every painter needs a brush. Well… Most do.

• 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.
• Atom – A hackable text editor for the 21st century.
• Brackets – Modern, open source editor with live preview.
• Hyper – Beautiful, extensible command-line interface
• FileZilla – For those who fear FTP in the terminal.
• WinSCP – Upload files to a MEAN stack or VPS server.
• Sketch [OS X only] – A professional vector graphics app.
• Taskade [OS X only] – Create beautiful task lists and outlines.

Collaborate

Working with a team? These links are for you.

• Cloud9 – An awesome, zen way to work with others in the cloud.
• Gist – Share code and text with others fast. Like a mini repository.
• Scratchpad – A simple, RTC tool for coding and previewing websites.
• Red Pen – Share your design and get feedback seamlessly.
• Invoice Ninja – Open source invoicing platform.

Backends

Every awesome web app needs an awesome backend.

• Firebase – A real-time front-end database for your sites.
• DigitalOcean – A cheap and quality VPS hosting company.
• Heroku – Cloud application platform; very easy to scale.
• Auth0 – Authentication, done for you.
• Hasura – Platform to build and deploy app backends fast.

Testing

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

• Checkbot – Browser extension that tests your website follows 50+ SEO, speed and security best practices.
• Placehold – Generate custom placeholder images of any size.
• Browserling – Cross-browser test your website.
• CodePen – A free web editor in your browser.
• WooRank – A review tool for SEO elements, W3 validation, and numerous other variables. Free basic service.
• Yslow – Tool for analyzing and finding fixes for multiple causes of slow site loading.
• Hurl.it – Make HTTP requests in the browser.
• Localtunnel – Open localhost ports to the world.
• Postman – A tool to make HTTP requests, generate mock servers and make API documentation.

Good Reads

Need something to read in your spare time?

• Smashing Magazine – A magazine for all things digital design.
• CSS-Tricks – Awesome blog on anything and everything related to CSS.
• Codrops – Great collection of design techniques for modern web developmers and designers.
• Insert HTML – A blog covering current and upcoming techniques and technologies for web developers.
• 1stWebDesign – A good, simple blog on web development and design.
• A List Apart – Guest bloggers and full books on topics from coding to business practices.
• GoodUI – It’s definitely not bad.
• Mentor – Get random advice from other designers and developers.