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!
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.
These sites are good for building a basic framework for the site.
- Colors 🎨
- Google Fonts - Tons of free, easy to use webfonts.
Every painter needs a brush. Well... Most do.
- Design Tools
- 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.
- VSCode - Free text editor
- WinSCP - Upload files to a MEAN stack or VPS server.
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.
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.
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.
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.
To the extent possible under law, Noah Buscher has waived all copyright and related or neighboring rights to this work.
Contribute to this list: https://github.com/NoahBuscher/Inspire