Git Product home page Git Product logo

inspire's Introduction

Inspire Awesome

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.
  • 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.
    • Albumarium - A large collection of free 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.

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.

Testing

Before you launch, these are good tools to make sure your site is ready for stardom.
  • 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.

License

CC0

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

❤️

inspire's People

Contributors

noahbuscher avatar saijogeorge avatar landtiser avatar davisonio avatar kyle-hall avatar larsvanherk avatar readmecritic avatar dnimmo avatar waweber avatar

Watchers

Kiran R avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.