Inpiration is needed for every project

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.
  • 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
  • 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

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.
  • Gist – Share code and text with others fast. Like a mini repository.
  • Invoice Ninja – Open source invoicing platform.
  • Red Pen – Share your design and get feedback seamlessly.
  • Scratchpad – A simple, RTC tool for coding and previewing websites.

Backends

Every awesome web app needs an awesome backend.
  • Auth0 – Authentication, done for you.
  • DigitalOcean – A cheap and quality VPS hosting company.
  • Firebase – A real-time front-end database for your sites.
  • Hasura – Platform to build and deploy app backends fast.
  • Heroku – 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 – Cross-browser test your website.
  • Checkbot – Browser extension that tests your website follows 50+ SEO, speed and security best practices.
  • CodePen – A free web editor in your browser.
  • Hurl.it – Make HTTP requests in the browser.
  • Localtunnel – Open localhost ports to the world.
  • Placehold – Generate custom placeholder images of any size.
  • Postman – A tool to make HTTP requests, generate mock servers and make API documentation.
  • 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.

Good Reads

Need something to read in your spare time?
  • 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.
  • Codrops – Great collection of design techniques for modern web developmers and designers.
  • CSS-Tricks – Awesome blog on anything and everything related to CSS
  • GoodUI – It’s definitely not bad.
  • Insert HTML – A blog covering current and upcoming techniques and technologies for web developers.
  • Mentor – Get random advice from other designers and developers.
  • Smashing Magazine – A magazine for all things digital design.