73 of the Greatest Collection of Free Web Design and Development Resources

Web design and development don’t just happen by chance. It takes time and practice. The right tools can help you polish your skills to ensure your future as a professional developer. Whether it’s brand new design or full revamp, web development is a great example of a form of idea that evokes emotions and provokes thoughts. If you want to design something but not sure where to start, then this post is for you. We have collected 73 of the Greatest Collection of Free Web Design and Development Resources for you.

Here are the best free tutorials and guides on layouts and style paths to take, frameworks, brushes, collaborative tools, backend stuffs, pre-launch tools and of course some informational readings, all in one place. Whether you are an absolute beginner or a professional developer, there is something in this list for you. These resources are properly categorized so you can easily navigate this page based on your interest.

Concept

1. TheBestDesigns
   General list of hand picked sites from across the web.
2. Awwwards
   More awesome sites of various styles.
3. Dribbble
   Snaps of icons, doodles, sites, and more from a talented group of people.
4. Siiimple
   Another list of sites, but on the much simpler side.
5. Httpster
   A curated list of the best sites around the Internet.
6. SaaS Pages
   An inspection of Netlify’s page made especially to bring you inspiration.
7. siteInspire
   Get inspired.
8. Designer News
   The best design / development links from the ‘net.
9. CSS Winner
   Reviewed list of great websites.
10. OnePageLove
    Great influence for one page and general website design.
11. CodeMyUI
    List of code snippets for fancy CSS/JS that make an awesome UI.
12. CodePen
    Central repository of user submitted code concepts/snippets. Great for experiments.
13. CodyHouse
    Tutorials and showcase of awesome UI elements.
14. CSS3 Cheat Sheet
    CSS3 Cheat Sheet
15. Codrops
    Web design/development blog that publishes articles/tutorials about the latest web trends.

Creation

1. ColorsWall
   Place to store your color palettes.
2. Coolors
   Super fast color scheme generator.
3. Kuler
   Easily create or view a custom color swatch for your site.
4. uiGradients
   Gorgous gradient generator.
5. Spectral
   Minimal color swatch creation.
6. Unsemantic
   Provides a good grid framework for small to large projects.
7. MDN
   Documentation for HTML, CSS, JS, etc.
8. Bootstrap
   Very popular framework for building modern websites and web apps.
9. Bootswatch
   A list of free themes for Bootstrap.
10. iconscout.com
    Get high-quality Icons, Illustrations and Stock photos at one place.
11. Iconmonstr
    A collection of free, simple icons.
12. Ionicons
    Another great collection of free icons.
13. Subtle Patterns
    A massive archive of free backgrounds for your projects.
14. Google Fonts
    Tons of free, easy to use webfonts.
15. Text to ASCII
    Add some sexy Easter eggs in your source code.
16. CSS3 Animation Cheat Sheet
    A collection of CSS3 animation snippets.
17. Flat UI
    A superb HTML and CSS framework for flat design. It’s the juice.
18. YMNNJQ
    See jQuery functions in natural JS. No libraries.
19. AllTheFreeStock
    All the Free stock mmages, videos, sounds and icons in one location.
20. TheStocks.im
    A collection of great stock photo websites.
21. Unsplash
    Free, high quality stock photos.
22. MinWiz
    Starter kit for minimal, viable, good looking, production-ready websites.

Tools

1. Sublime Text
   A very popular text editor for developers.
2. Predawn
   Gorgeous dark interface and syntax theme.
3. Atom
   A hackable text editor for the 21st century.
4. Brackets
   Modern, open source editor with live preview.
5. VSCode
   Free text editor
6. Hyper
   Beautiful, extensible command-line interface
7. FileZilla
   For those who fear FTP in the terminal.
8. WinSCP
   Upload files to a MEAN stack or VPS server.
9. Sketch [OS X only]
   A professional vector graphics app.
10. Taskade [OS X only]
    Create beautiful task lists and outlines.
11. DevSession
    Open a collaborative online IDE from a local directory.

Collaborate

1. Cloud9
   An awesome, zen way to work with others in the cloud.
2. Gist
   Share code and text with others fast. Like a mini repository.
3. Red Pen
   Share your design and get feedback seamlessly.
4. Invoice Ninja
   Open source invoicing platform.

Backends

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

Testing

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

Good Reads

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