Learning Web Development from Mozilla • Neil Mastroianni

When I discovered web development, it was the first time I realized I could do more with computers than play video games. I couldn't get enough, whether it was a Texas Instruments, Apple II, or Commodore 64. The problem was that I was simply a consumer. I was hooked when the world went online, and I discovered I could put my own mark on the web.

Have you ever considered making your mark?

The Resources to Build the Web Are Better Today

This is where you might expect some old "fuddy-duddy" comment about how the "youngsters have it so easy." I suppose I might feel that way a little. I think it would be difficult to argue that it's harder to find learning resources today than it was in the early days of the web.

Naturally, web development has matured and become a wonderful way to express your creativity and possibly earn a living. One of the champions of the web for many years has been the Mozilla organization. They will teach you how to build websites if you're ready to learn.

Mozilla will also make sure that you learn how to develop accessible websites. They have an entire section on following accessibility (a11y) best practices. That's awesome!

The Purpose of This Post Is to Kick Off a Series

Mozilla has done the heavy lifting for us and has put together a wonderful resource. My goal is to go through their training while putting my spin on it. I hope to enhance and act as a companion as you learn. Let's look at the learning plan that Mozilla has laid out for us.

Are You a Beginner?

The answer to that question depends on where you rate yourself. Are you an absolute beginner? This is the place to start if you don't know any HTML, CSS, or JavaScript. If you need help picking the software you need, this is the place for you. For those of you who want to start at "square one," here's what they teach you:

Basics: Software You Need
Basics: Developing a Plan for Your Site
Basics: Setting Up a File Structure
Basics: HTML
Basics: CSS
Basics: JavaScript
Basics: How to Publish Your Site
Basics: What Happens When You Visit The Web

Do You Already Know the Basics?

Well, it's time for "the details" of HTML and CSS. Mozilla offers an Introduction to HTML and a CSS First Steps series to get you moving beyond those basics you've already picked up. There's a bonus here. Mozilla has added assessments so that you can check your understanding.

In the Introduction to HTML, you will learn how to:

Add attributes to HTML elements
Add data to the page that users will not see
Semantically structure your HTML
Create hyperlinks
Make lists, quotes, and citations
How to structure a webpage
Debug HTML

Do You Have Strong HTML and CSS Skills?

Mozilla thinks that JavaScript is your next best target. You might also consider starting here if front-end development was never your goal. In this portion of their plan (after a brief history lesson), you will learn to:

Build a "Guess the Number" game
Find errors in your code
Store data in variables
Run some mathematical operations
Manipulate text
Play with arrays

Mozilla even gives you a path to follow if you're interested in server-side frameworks.

Ready for the Frameworks?

The final step in the web development pathway is to dive into client-side tooling and JavaScript frameworks. I have to hand it to Mozilla in this section. They provide you with lessons on what they call "the big four." This means you can learn one or all of the following frameworks:

I have dabbled with three of these. Could you guess which one I haven't touched?

Don't Let This Overwhelm You

There are so many things you can do now that once were very hard for you. I promise you that whatever limiting belief you have about your ability to learn to develop beautiful web pages (for which people would pay heaps of money) is inaccurate. You can do this. You just have to start. Mozilla has given us a great plan and some fantastic resources.

Let's follow their path together and see where it takes us. What have you got to lose?

Need to Set Up Your Computer for Web Development?

If you're motivated to give this a shot but are unsure if your computer is ready, check out this article, where I show you how to set up your Windows 11 PC for web development. Sure, this goes above and beyond and will set you up for development with frameworks. You will get there. Start wherever you feel comfortable.