16 Free Resources to Learn Web Development

Last updated on May 24th, 2023 at 08:40 am

Starting Out As A Web Developer Is Hard. You should totally do it.

I can personally attest to how difficult it is to find free resources when you’re just entering the world of web development. When I started out, I was lucky enough to be taking a WordPress web development class at Walla Walla University, and still only learned the basics. It took me years to accumulate these tools through active searching, random mentions, direct recommendations, and chance. 

Over my career thus far, I’ve had a lot of help from other web developers and free resources, and to pay it forward a little, I started the Studio O’Riley blog. This is my own contribution to the “web dev” community, a blog about helping people learn the ropes of web development, SEO Marketing, and other topics related to online business success. The goal of this article is to share with you the tools I’ve found to be most helpful and influential in my own “web dev” education. 

Note the word, education. It’s an important one because the one thing you should take away from this article is that if you want success in any measure as a web developer, you’ll never stop learning new skills, new techniques, and new ways of thinking. The world of web development is constantly in flux, with new languages and workflows taking the spotlight every few years, new frameworks and tools taking the stage as new technologies emerge. To stagnate in your comfort zone is to eventually become obsolete as a web dev.

Free Resources, Tools, & Communities

We few, we happy few, we band of developers have a lot of different kinds of problems to solve, so you’ll see that I’ve included a lot of different kinds of resources in this list. 

There are many more out there to boot, but these are the sixteen that have proved most useful to me and I’ve even included a bonus section at the end with some more tips that are perhaps a little less hard to find, but nevertheless great learning tools.

Learning Resources

Any developer worth their salt would agree that there’s a huge learning curve when you’re first getting started. If your brain isn’t naturally wired to think like a computer, you have to adapt to a whole new kind of thinking. As you go, the learning becomes easier, but the sheer amount of jargon can be overwhelming to newbies like it was for me at first. 

These first seven resources can help you sort through the cacophony of unknowns and take the first steps toward understanding all the technologies you’re hearing about.

1. W3Schools

The “W3” is a play on the “World Wide Web,” the origin of the “www” that precedes many URLs. This is the first tool I learned about in my WordPress course in College. I didn’t appreciate it at the time because I was impatient regarding my learning. W3Schools is a highly structured index of programming tutorials, like a web development encyclopedia. 

You’ll find comprehensive information about every major coding language, separated into tutorials that break down the various abilities, syntax, and components of that language. The information on W3Schools is consistently useful and relatively easy to digest. It’s structured in a logical manner and includes examples and challenges to supplement each lesson. 

Pro Tip: Inside any W3Schools lesson, check out the sidebar on the left. You’ll find a table of contents that lists the topic of every lesson in order. Read the articles directly before and/or after the lesson you’re on to get a better grip on the context for each lesson.

2. MDN Docs 

MDN stands for Mozilla Developer Network. Mozilla is the company behind the Firefox browser and a big proponent of net neutrality. The company advocates free programming knowledge and other web resources, the most widely used being MDN Docs.

Its structure is very similar to W3Schools in that it acts like a digital web development encyclopedia with its topics laid out in a logical order, curated for learning. 

Pro Tip: The main differences between MDN and W3Schools are that MDN focuses more on HTML, CSS, and JavaScript, as well as a few other web-dev-related topics like APIs and accessibility and that its content tends to be a little bit denser, more technical, and better suited to intermediate learners.

3. The Odin Project

If you’re looking for a more guided learning experience, I highly recommend The Odin Project. This is an open-source platform, curated to bring you from square one to full-stack developer at your own pace. Odin was built by professional web devs for up-and-coming professional web devs, and what they’ve done is amazing. 

Volunteer contributors have scoured the internet, looking for the best tutorials and content on every given web development topic, and put it all in order for you, dear reader. Where they cannot find great content, they write it themselves and offer it for free. There are no deadlines, no fees, just beautifully structured lessons with examples, challenges, and an active and collaborative community.

Pro Tip: The Odin Project doesn’t just teach you coding. Its focus is on making you career-ready. As such, it’s important to take the lessons at your own pace and not skip any material, as it’s been carefully structured to build on itself. 

4. CSSBattle

This is a fun one for those of us who are interested in the design aspects of web development! CSS stands for Cascading Style Sheets, and it’s what gives websites their design. Otherwise, the whole internet would be plain HTML, nothing but black-and-white text, images, and videos, with no layout or design applied. CSSBattle is a gamified learning tool that I played for five hours straight when I first found it.

How do you play? Periodically, CSSBattle releases fun designs that incorporate various shapes, colors, and layouts. Your task is to recreate the template using only CSS code, ideally with 100% accuracy and in the fewest lines of code possible.

Pro Tip: Need to learn CSS? You can do it right from CSSBattle by clicking on the “Learn CSS” button toward the top of the home page. For an additional resource for both beginner and advanced CSS, check out Keven Powell on YouTube. His tutorials are thorough and easy to digest.

5. Oh My Git!

For the uninitiated, Git is industry standard versioning software and the name is based on the acronym for Global Information Tracker. It allows web developers to keep backups of their work and a history of any changes that are made to a file or folder. That way, in the event of a mistake or any loss of data, the developer can restore the file or folder to the state. It was in at the time of any previous backup or version.

You’ll hear developers use the phrases “push,” “pull,” “merge,” and “branch” in reference to Git. These are four of the most common commands in the program. 

To “push” is to save a new instance of your file or folder to the repository you’re working from. Think of your repository as the enclosing folder or project in which all of your versions are stored in a program like GitHub. A “pull request” allows collaborators to download a version from the repository in order to make edits. A merge combines two versions, and it’s arguably the most dangerous part of Git because sometimes there are incompatible components in the two versions, which can break your code. That’s why developers use branches. You can “branch” off of your current version path to avoid adding dangerous versions together. By branching properly, you avoid the need to worry about accidentally ruining your code with an ill-conceived merge request.

Oh My Git! is another gamified learning tool, helping players get familiar with Git through a safe, guided environment. You’re provided with a command line, and guided to use Git commands and develop muscle memory that will become essential as a developer.

Pro Tip: Want to get advanced? Here’s the complete list of Git commands.

6. Terminus

Terminal for Mac, or Command Prompt on Windows, is an essential tool for Web Devs. It looks like a plain text editor with a single input field where the user can submit commands to their computer that bypass the need for an interface. If you learn the right keywords and acronyms, you can install software, automate processes, and use Git directly from the terminal. There are even plug-ins that you can install to expand its reach, and your hands never have to leave your keyboard! Terminus is similar to Oh My Git! However, it takes a more whimsical approach to the learning process.

One of the first things you learn in the terminal is how to navigate your computers, file structure, and interact with files therein. Terminus plops the player down in an imaginative world of pixel art that mimics the structure of a file system. The player uses commands to navigate the world and interact with objects and people inside it, which represent common use cases in the terminal. Tools like this are great because they train you to think in the same terms a computer thinks; essential grounding for aspiring web developers.

Pro Tip: Want to learn what’s possible? Check out The Mac Terminal Commands Cheat Sheet from makeuseof.com.

7. Syntax

The first big hurdle I had to jump when starting out as a Web Dev was simply to understand all the jargon that saturates you as you begin to learn about the industry. Syntax is a fantastic podcast by full-stack developers, Wes Bos and Scott Tolinski, both of whom offer paid and free tutorials and courses on just about every web development topic under the sun.

This podcast covers all things web dev, including software, career advice, industry news, professional workflows, software, and of course, syntax and techniques to make your quality of life as a programmer that much better. I didn’t understand half of what they said until a few months in. I’ve been listening for years now, and still learn new things every episode. I have found it immensely helpful as a beginner to simply learn by exposure.

If for some reason, Syntax doesn’t float your boat, I highly recommend that you find a similar podcast in order to absorb jargon like this. Think of it like learning a new language: The best way to become fluent is to speak with others in that language, and the second best way is to just listen to others speak in that language.

Pro Tip: Don’t have a favorite podcast app? My two favorites are Overcast and iHeartRadio. Both offer lots of features, a good listening experience, and not too many ads. They also both allow you to adjust playback speed and easily listen to episodes in order, unlike some other apps I know. Lookin’ at you, Apple Podcasts.

Coding Tools & CMSs

You can’t very well code without a code editor, and you can’t very well manage content without a Content Management System. These tools will help the rubber actually hit the road. With them, you make actual things on the actual internet for free.

You’ll want to look into beginner tutorials to see how some of these work, as they’re complex programs with many options and almost endless use cases.

8. VS Code

If you’ve spent any time at all, in the world of Web, Development, you’ve likely heard of VS Code, or Visual Studio Code. It’s one of the most commonly used code letters out there. That’s because it’s open source, fast, reliable, and filled with mouthwatering features like in-browser editing, live previews, and Google-docs-like collaboration. VS Code is the best free web development software out there (and possibly the best overall).

If you’ve never used a code editor before, I recommend finding tutorials on YouTube to get familiar with the interface and the general process of programming. There is a high learning curve for software like this, but once you are familiar with it, you’d be hard-pressed to find a better platform for your code.

Pro Tip: Open a live, responsive version of your code in the browser by right-clicking on the HTML file and choosing “Open With Live Server.”

9. Replit

Replit is another code editor, browser-based and capable of real-time collaboration and speedy—if not live previews. Another benefit of Replit is that it comes with a healthy community of other developers, all sharing their work and their latest projects.

One of my favorite things about Replit is the fact that it has a mobile app, so I can edit my code on the go. This is great for people with busy schedules, who may not be able to predict when they have free time to practice. That being said, programming is much, much easier on a desktop device, so I don’t recommend this feature for everyone.

Pro Tip: If you choose to pay for Replit currency, cycles, you can spend them to keep your projects private and out of public view. Note that unless you do this, all of your code and the associated renders are available to all Replit users.

10. CodePen

CodePen is a wonderful alternative to Replit, and at least in the US, seems to be much more widely used. It has all the same features as Replit, including an active community and a lightning-fast, reliable, and responsive interface. Its reputation is pretty much unparalleled among users.

My main reason for using Replit over CodePen is the ability to edit my code on mobile. There are some other differences as well, but largely, the two tools are very similar. Which one is better for you is a personal choice.

Pro Tip: Looking for some inspiration? Check out CodePen’s challenges.

11. WordPress

WordPress is the world’s most used CMS, or Content Management System. I built this website through WordPress and it’s the choice for most of my clients. The benefit of a CMS is that it provides you with an interface, a library of pre-coded tools, and ready-made themes to help you get a website up and running quickly so that you can focus on more complex projects.

Learning WordPress, itself, has a bit of a learning curve for new users, but the time and energy it saves in the long run are incredible. Note that wordpress.com and wordpress.org are two separate entities. The former is the paid version, and the latter is the free version that offers more customization, but no support.

Pro Tip: Having trouble getting your site to look right with your current theme? Change themes in the “Appearance” menu under “Themes” or add custom CSS in Appearances/Custom CSS.

12. Webflow

Webflow is the first and best CMS of its caliber. It’s an interface that allows you to build a website using visual design tools instead of code. It’s much like WordPress or any other CMS in that regard, except that its graphic-design-like tools are far and away the most polished and user-friendly in the industry.

Webflow is like the missing link between the web designer and the web developer. You can build an entire site just by dragging and dropping and using its various sleek and precise tools to create the perfect visual design.

Pro Tip: Try connecting Webflow with Figma! The companies are partnered and integrated, so they work seamlessly together!

13. GitHub

Remember Git? GitHub is a massive, collaborative server for Git repositories. Every developer has a GitHub account, and nearly all open-source platforms have one too, for good reason.

GitHub is the preferred tool for developers to share and collaborate on projects, allowing them to push, pull, branch, and merge to their heart’s content, all while preserving the safety of their code, and harnessing the power of remote collaboration. Unfortunately, the mobile app only allows you to read code, not edit it. But believe me. You need an account and you will be glad you have one sooner rather than later.

Pro Tip: Looking for a free web host and don’t mind a non-branded URL? Perfect! Like several of these tools (Webflow and of course WordPress included), you can host a website through GitHub Pages!

Communities

Everything is easier when you have help, and web developers need a lot of help.

The good thing is, there’s a very friendly, cooperative culture in this industry. People are happy to share what they know, network, and help each other solve problems they’ve never encountered before. You just need to know where to go, and then all you have to do is ask!

14. Stack Overflow

Stack Overflow is the first and preferred troubleshooting community of its kind. It’s essentially a forum where users submit questions related to Web Development, and other users attempt to answer the question in the most helpful and thorough way possible. The most helpful answers float to the top of the conversation to help future visitors. Find answers to the same question faster. 

Active users gain what are essentially expertise points, the more often they post useful questions and helpful answers, the more trustworthy they’re considered. This is an invaluable tool that you will find yourself using constantly in this industry.

Pro Tip: Don’t be afraid to be very active in this community. It’s encouraged. Just be sure to ask relevant questions and try not to ask questions that have already been answered on Stack Overflow. People can be a little touchy about that…

15. Frontend Mentor

Frontend Mentor is a Slack community dedicated to connecting developers with developers so that the more experienced can mentor and guide the less experienced. The idea is that the more experienced you become the more you will help the newbies when it’s your turn.

Slack, itself, is a favorite tool of developers. However, Frontend Mentor is the most helpful community I have found there, so I decided it deserves to be highlighted. Really do go check out Slack, though. It’s a great networking and communication tool.

Pro Tip: This is a great way to network, but be aware that to get any real use out of it, you really should be pretty active on the platform. It’s not something you can get much out of without actually engaging with other developers on a regular basis.

16. Reddit: r/webdev

Reddit and Slack are similar in that they allow people to create separate communities that deal with their own special concerns. My favorite Reddit is r/webdev. It’s filled with experts and newbies alike, all interacting, sharing experiences, jokes, and tips. It’s a very helpful community.

In fact, I met my web development mentor via r/webdev, and we soon connected on Discord for weekly training sessions. It’s that personal connection, both on Reddit, and with my one on one mentor that has made all the difference in my own career.

Pro Tip: This one’s simple. ASK FOR HELP. There are so many people willing to answer questions and help with your code on r/webdev. Did I mention that I didn’t even ask for a mentor? He reached out to me unprompted. I was shocked and pleased, and I’ve made a real friend.

Bonus Tools & Resources

When you’ve been in the business—or the hobby for that matter—for some time, you’ll have collected your own list of preferred tools like this. It’s good to shop around and try new things. Listen to other web developers, read other blogs, and discover as much as you can.

There’s always something new to learn, and as long as you approach web development willing to learn it, you’ll do just fine. Many of these bonus tools and resources are not specifically about web development. However, I thought them worthy of inclusion since they have had, and continue to have a significant role in my learning and my career.

17. SCORE

This is an important one for anyone who wants to start their own business or go into freelancing. SCORE is a huge volunteer coalition of business mentors. These are mostly retired or very busy business people with decades of life and business experience, who have chosen to spend their time guiding blossoming entrepreneurs for free.

All you have to do is create an account, wait to be verified, and be paired with a mentor, and absolutely no cost! There are mentors from every industry you can imagine, so you can request to be paired with one from your industry, or from the closest category you can find. And if things don’t work out with the first mentor you’re paired with, you can request a new mentor at any time with no hard feelings.

Pro Tip: When I first started my business, I had no clue what I was doing and I had a legal question regarding a contract that a scammer had tried to rope me into. My personal mentor recommended that I get on the phone with another mentor he knew from SCORE who would be perfect to answer that specific legal question. So just ask, and you’ll likely be given resources you didn’t know existed!

18. Speechify

For those of us with ADHD, it can be difficult to read as much as is required to become a functioning web developer, and/or business person. This is especially true if, like me, you run a blog and spend much of your time doing research for it. It’s easy to lose focus or motivation when you’ve been reading for four hours straight.

That’s why I recommend Speechify! I’ve only been using it for about a month, but it has tripled my productivity in that time. Speechify reads out loud any webpage on a browser in which you have the extension installed. There’s also a mobile app that lets you scan text from Books and save it for later reading or copy/paste it from your clipboard.

I will say, the free voices are very annoying, so I won’t blame you if you choose to pay for premium and let Snoop Dogg or Gwyneth Paltrow read to you instead. That’s not a joke. Their voices are available in Speechify and they sound fantastic!

Pro Tip: For long articles, try speeding up the voice to get through the info faster! You can even ramp it up slowly over time and train your brain to process audio faster.

19. YouTube

I’m not going to waste time explaining YouTube because it’s one of the foremost platforms on the internet. What I will say is that if you’re not using it as a resource for tutorials and other learning opportunities, you are wasting your life.

Remember, I only took one web development class in college, and that was specifically learning WordPress. Everything else I’ve learned has come from YouTube or articles on sites like W3Schools, various blogs, and podcasts like Syntax.

Pro Tip: For you future webmasters who are just getting into the field, I want to recommend a specific channel: Web Dev Simplified. You can subscribe for consistently helpful and thorough tutorials, and if you’re looking for a beginner course, you can start with this playlist.

20. Pinterest

You may not think of Pinterest as a web dev tool, but I do. That’s because it’s a general-purpose tool for saving information that you’d like to come back to later. The fact is, it’s a pain to use the bookmarks bar in most browsers. It’s text-based and annoying to organize, so I end up ignoring it 90% of the time. 

Anytime I want to save an article, a video, or an infographic to come back to later, I use Pinterest. You’ll also find tons of valuable information that other people have saved, which you can then save to your own organized boards, all for free. It’s not an essential tool, but it’s one that will save you many a headache.

Pro Tip: Get the Pinterest Chrome extension to make it easier to save pages in your browser during your studies.

21. Discord

Discord is a beautiful thing. It’s a fun, feature-filled chat-based social media network. You can join any community or create a community of your own and customize it to your heart’s content.

I use Discord mainly for video chat and screen sharing, and it’s been invaluable to me. It allows me to not only host virtual meetings at the drop of a hat, but it supports file sharing, forum-style chat, and about a thousand other fun features.

Pro Tip: Need a digital meeting space to call your own? Start your own Discord server! With Discord’s customizability, it’s as simple or complex as you want to make it, and you’re given the freedom to converse and collaborate with other like-minded developers in a space you can curate for your group’s needs.

22. ChatGPT

I was wary of including ChatGPT or any AI as a learning tool because the temptation is often too great for mere mortals to resist: to allow the AI to simply do your work for you. I cannot stress enough that ***YOU WILL NOT LEARN THAT WAY.***

No… not even a little bit.

That being said, ChatGPT is an incredible resource as long as you use it wisely. The AI can give you a direct answer faster than a Google search can sometimes because it curates the information directly to fit your question. But it’s not always accurate. 

Another drawback is that when you don’t have to read five articles to find the answer to your question, you’re not exposed to tangential information along the way like you are when you do have to read those five articles. I can’t tell you how many times I have gone down the rabbit hole and ended up learning way more than I bargained for, simply by not being able to find the information that I was initially looking for. And I usually eventually found it anyway.

I recommend using AI only after you have failed to find the answer to your question by other means. It’s also important that you learn to come up with solutions to your own problems. No one will ever hire you if ChatGPT does all your work. Ask it for advice and inspiration, not finished products.

Pro Tip: Be extremely specific with ChatGPT. For instance, don’t just say “Give me a list of JavaScript keywords.” Try saying, “Give me an alphabetized list of JavaScript keywords with examples of what you can use them for.”

23. Figma

Figma is the web developer’s friend, and perhaps more so, the web designer’s friend. It’s a free and in some ways, better alternative to Adobe Illustrator. Like many of the tools above, it offers fast, real-time, collaboration with your team and intuitive tools to create complex visual designs in a matter of minutes.

It also supports some pretty cool features, like the ability to export CSS styles directly from your designs in order to incorporate them into your project!

Pro Tip: Need several prototypes of a design with only small modifications? Don’t rebuild it, just duplicate the frame and make your changes. It takes only a few seconds, so when you get fast in Figma, you can have three or four designs in a few minutes.

Wrapping Up

Learning the ropes of web development will take time more than anything else. You can do this. It’s not a skill you have to be born with, and by consistently using these tools, you’ll be churning out hand-coded projects faster than you can say FizzBuzz. 

If you don’t know what FizzBuzz is, ask a web developer friend. Or ask a web developer on r/webdev or Frontend Mentor. Google it! Find a video on YouTube and save it to Pinterest! Or as a last resort, just ask ChatGPT.

The point is, you don’t need to take college courses or pay for an expensive coding Boot Camp to learn and become a successful web developer. This is an industry where we take care of each other and share free resources. You just need to know what they’re called and create an account. It’s as simple as that!

Keep in mind that this blog is another free resource. I publish daily content on business days, all geared toward helping people create their own online success. I hope to see you back here soon. In the meantime, I wish you the best of luck in your own coding curiosity journey!

Leave a Comment

Your email address will not be published. Required fields are marked *