Skip to content

noahbuscher/inspire

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time

Inspire Awesome

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.

License

CC0

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

❤️

About

Collection of frontend dev and web design links 💡

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published