A repo to list the best free resources for web development learning. I am going to keep the list as short as possible so new players don't get confused or distracted by lots of options.
Pro Tip: when you start using a resource, try to stick with it for some time.
Good Starting Resources
| 1st | 2nd | 3rd | 4th | 5th |
|---|---|---|---|---|
| Youtube | FreeCodeCamp | Mozilla Developer Network (MDN) | The Odin Project | W3Schools |
Some useful free resources to learn web development
| Front End | Back End | Database | Design & Psychology | Misc |
|---|---|---|---|---|
| Adaptive Web Design | A byte of Python | Database Design | Hack Design | WWW - Beyond the basics |
| Learn To Code - HTML & CSS | How to Think Like a Computer Scientist | --- | --- | Chrome DevTools |
| Resilient Web Design | PHP Programming | --- | --- | --- |
| The Magic of CSS | PHP The Right Way | --- | --- | Web Application Security Guide |
| HTML Canvas - Deep Dive | --- | --- | --- | Encyclopedia of Graphics File Formats |
| --- | --- | --- | --- | --- |
Best youtube channels to learn web development for free
- freeCodeCamp
- Traversy Media
- Thenewboston
- Derek Banas
- ProgrammingKnowledge
- Edureka
- LearnCode.academy
- Programming with Mosh
- Treehouse
- LearnWebCode
List of best free websites for learning web development
List of best free courses for Web Development
- Web Development for Beginners
- HTML & CSS is Hard
- LEARN TO CODE AWESOME WEBSITES IN HTML, CSS, AND JAVASCRIPT
- Learn CSS
- Learn PWA
- Learn Accessibility
- Learn Responsive Design
- Marksheet
- Learn Forms
- Learn CSS Grid
- Learn FlexBox
List of some Open books for refrence and indepth study
- Eloquent JavaScript
- JavaScript for impatient programmers
- Learning JavaScript Design Patterns
- The Greatest CSS Tricks Vol. I
- Pro Git
- Learn Version Control with Git
- Designing for the Web
- Exploring ES6
- Deep JavaScript: Theory and techniques
- Learn to Code Advanced HTML & CSS
List of Websites with challenge problems for practice and improve your skills
Best free tools to help in website development and boost workflow
- Caniuse
- Squoosh
- Dev Docs
- Omatsuri
- Csslayout
- Keyframes App
- Coolors.co
- 0to255
- Browser Shots
- Uptime Robot
Free services that can boost development process and workflow
Free browser extensions to get help in development
- WhatFont
- ColorPick Eyedropper
- Wappalyzer - Technology profiler
- Web Developer Checklist
- Session Buddy
- Web Developer
- CSSViewer
- EditThisCookie
- Screen Capture
- Window Resizer
- Corporate Ipsum
- Lighthouse
- Page Ruler
- Magic CSS
- CSS3 Generator
Free softwares for website development related tasks
Some of the best newsletters for developers packed with interesting articles, tutorials and resources (in no particular order)
Some of the best blogs to learn web development related topics
Some free resources for web development
- Web Hosting Secret Revealed
- Webpage Test
- Html Purifier
- HTML-Ipsum
- Privacy Policy Generator
- Layerstyles
- Spritecow
- Bitcatcha
Contributions are what make the open source community such a wonderful place to learn, be inspired, and create. Your contributions are much appreciated. To contribute, create a issue or pull request.
Please read contributing guidelines before submitting new resources.
Thanks