Best Free Sites to Learn Web Development

Learning web development is hard, which is why many people get bachelor’s degrees in computer science or go to coding bootcamps for guidance and support. It is also fascinating and lucrative for those with the drive and tenacity to learn, with full-stack web developers (those versed in both frontend and backend technologies) earning an average a healthy wage of $99,274 dollars a year in 2021 according to Glassdoor.

Not everyone has the time or resources for bootcamps or bachelor’s degrees. Luckily, the internet is chock full of free web development resources. The tricky thing is knowing what to study and where.

In honor of STEM education day, we present to you a primer on learning web development based on the best resources we could find on the World Wide Web. To get an overview of the current web development landscape, check out this handy web development roadmap from Kamran Ahmed on GitHub. Don’t be intimidated—this roadmap encapsulates many of the nooks and crannies of web dev, but fundamentally, you can be a fullstack web developer knowing just three technologies: HTML, CSS and JavaScript (both front and backend with Node.js).

For more roadmaps for frontend, backend, DevOps and several on specific programming languages such as Python and Java, check out this dev community roadmap resource. 

Once you have your route, it’s time to start driving! Here are our favorite web development resources from across the web, in no particular order:

This is a completely free resource for learning not only full-stack web development, but also Python data analysis and machine learning, information security, quality assurance, data visualization and more. Many lessons you can do right in your browser. freeCodeCamp also has a robust online community of learners where you can find support if you get stuck, including a YouTube channel with tons of additional resources, subreddit, forum and Discord server.

Want to test drive web development easily? Codecademy provides free, browser-based courses in a variety of web-based programming languages and concepts, including HTML, CSS, JavaScript, Ruby, PHP, Node.js and more. There is a paid Pro tier as well for specific tracks and more advanced lessons.

While most big courses on Udemy aren’t free, there are frequently site wide sales for lessons with dozens of hours of content of in-depth content and a number of free resources for web development topics, including video lessons on JavaScript, Angular, React, Git, GitHub and more.

MDN, the developer team that brings us the Firefox browser, is an excellent free resource for beginner to expert web developers. The lessons cover the core web dev technologies in detail from beginning to advanced lessons, including HTML, CSS and JavaScript. Other topics covered include web forms, accessibility, testing, plus backend technologies Django (Python) and Express (Node.js).

The lessons are not browser-based, however, but you can follow along using Chrome DevTools, Firefox Developer Tools or any browser tool with console access, or use a code editor (many of which are free or have free versions).

A large open source effort, Project Odin has a free full stack web development curriculum including HTML, CSS, JavaScript, Git, databases, Ruby/Ruby on Rails, Node.js and even courses on getting hired and preparing for interviews. You’ll find a supportive community of developers on Reddit and Discord, plus a huge cache of open source code on GitHub.

YouTube is a goldmine of information, as you probably already know, and it has no shortage of channels dedicated to web development concepts, including:

• Traversy Media- Created by Brad Traversy, this YouTube channel teaches HTML/CSS/JavaScript for absolute beginners, as well as courses in React, Angular, Node.js, Express.js, MongoDB and much, much more. Basically, any web-related technology, you can find a lesson for it here. Also featured are guest content creators in the web development space as well as information on the industry as whole and developer discussion.

• Fun Fun Function- Looking to dive deep on advanced JavaScript concepts but afraid it’ll be boring? This is the channel for you. Mattias Petter Johansson, also known as MPJ, is a former JavaScript developer at Spotify who has created a vast number of video on JavaScript concepts such as test-driven development, GraphQL, async/await, promises, continuous integration, prototypes and more. He also talks about mental health awareness and insider tips on the industry.

• Thenewboston- Bucky Roberts, aka thenewboston, has created a veritable library of videos covering JavaScript, React/Redux, Angular 2, Django, Gulp.js, the command line, plus technologies like blockchain, Docker, Kotlin and digital currency. He excels at breaking down concepts well and keeps it casual and fun.

• freeCodeCamp- Just when you thought FCC couldn’t get better, there is also a huge YouTube channel. You’ll find content on everything that’s on FCC.com and tons of extras like binary tree algorithm, search algorithms, Azure Data Fundamentals, WordPress, webhooks, and even courses on calculus and statistics.

• The Net Ninja- Get your black belt in web development with help from The Net Ninja! Some examples of what you can learn include HTML, CSS, JavaScript, Node.js, Flutter, Vue.js, TypeScript, React and Next.js. You can find additional paid lessons from The Net Ninja on Udemy as well.

• JSConf- JSConf is a conference series held worldwide featuring web developers giving talks on cutting-edge concepts and new developments in the industry. Topics covered include AI, accessibility, machine learning, asynchronous JavaScript, React hooks, and lots more.

You don’t need to get in depth in computer science concepts to get employed in web development. However, it can be helpful gaining familiarity with computer science concepts like data structures, algorithms and abstraction, both in interviews and in practice. CS-50 is a free online course offered by Harvard University and new cohorts start at regular intervals. Technologies covered include C, PHP, JavaScript, SQL, HTML and CSS.

Here are some of most popular subreddits related to web development and design. If you want to find a community, get help, show off your stuff or share resources, Reddit is a great place:

• /r/webdev
• /r/Frontend
• /r/web_design
• /r/javascript
• /r/node
• /r/learnprogramming
• /r/reactjs

Chris Coyier and a team of talented web designers bring us CSS-Tricks, a valuable resource for learning CSS concepts like Flexbox, CSS Grid, Sass/LESS and getting into the nitty-gritty with nuggets of knowledge you can keep in your CSS toolbox. The same folks also created CodePen, an ever-helpful browser-based tool for designers and developers that allows you to code and share HTML/CSS/JS code right in the browser.

Wes Bos created JavaScript30 as a way for beginning to intermediate developers to flex their JavaScript muscles and work in the DOM without a JavaScript library like React/Angular. If you’re stuck in “tutorial hell” and want to build fun things with vanilla JavaScript, this is a great next step. 

These resources will serve you well in your journey in teaching yourself web development. STEM education is within everyone’s grasp due to the generosity of these open-source projects and selfless creators. Happy coding and don’t give up!