Greetings, future web developers! Welcome to the beginning of an amazing journey! Web development in 2021 is fun, amazing, rewarding, and makes you feel like a god on the Internet. Web developers get paid really well and are needed across the entire world 🌎.

According to glassdoor, the average junior developer salary is $70,439 as of the time of this writing, and you don't even need a college degree! 😲

In my opinion, web development is the most efficient way to escape poverty and get your life back together. It's freedom. It's empowering, makes you think critically, and the community of web developers is vast.

Eventually, you can take all the lessons you've learned in your own career and create your own business. Another advantage of web development is the ability to work remotely, which is very beneficial in times of a pandemic. Did I mention that web development is really fun? 🙂

If you want to learn how to code right away, then skip down to the section called "Web Development Resources" where you'll find plenty of websites and videos to help get you started in web development. However, I recommend you read everything I have typed below. You might not understand everything quite yet, but that's okay!

What Web Developers Do

What do web developers do? They create websites that you visit on the Internet. Websites can do all kinds of things: create social media platforms to share photos 🖼️, create and play music 🎹, provide a canvas to draw on 🎨, create a platform to watch videos 🎬, provide a marketplace to sell goods 🍎, and more. The possibilities are endless!

There are tons of different tools you can use to design and develop websites. You may have seen tools for building websites such as Wix or WordPress. These websites provide "What You See Is What You Get" (WYSIWYG) tools. WYSIWYG is pronounced like "whiz-ee-wig".

While WYSIWYG tools do exist, you'll have more power and flexibility as a web developer if you learn three languages: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS). These three languages are used in practically every website you will see on the Internet. HTML is used to create content on your website. CSS is used to style everything such as changing colors. JavaScript is used to add programmable functionality to your website and make your content more dynamic.

There are many popular frameworks/libraries such as Angular, React, Vue, and Svelte that build on top of JavaScript to help developers create performant applications and improve the developer experience.

Your journey begins by learning HTML, CSS, and JS, but it doesn't end there. Learning web development is an infinite journey all of us web developers partake. JavaScript constantly evolves. You'll always encounter people, young and old, who can teach you new tricks. You'll find yourself reading documentation on lots of different tools. New tools come out every year that can cause paradigm shifts in how we program. Being a web developer means going on a lifelong journey that has no end, and that's okay because we are all on this perpetual path.

You'll find yourself using Google and Stack Overflow a lot regardless of experience level. It's okay to search for something you don't know or can't remember. Even experienced developers do it all the time!

Being a good web developer means adapting to the never-ending changing technologies out there. It means putting arrogance aside and realizing there's always something more to learn, perhaps having an insatiable appetite for knowledge.

To learn more about what web developers do, check out Developers For Hire.

Computer Basics

Let's start with the very basics. You're viewing this website in a browser. As of today, there are multiple browsers: Internet Explorer, Microsoft Edge, Mozilla Firefox, Google Chrome, Apple Safari, Opera, Brave, and more. The most common browsers you will develop for are Microsoft Edge, Google Chrome, and Apple Safari.

Are you viewing this website on a mobile device such as an iPhone, iPad, or one of the many types of Android phones? Or, are you viewing this on a "desktop" computer such as a MacBook, iMac, or PC? You'll commonly hear the terms "desktop" versus "mobile" a lot when you're creating websites.

Your browser is running on a certain type of operating system. The three most common operating systems are Windows, MacOS, and Linux, but other types of operating systems exist. Mobile devices have their own operating systems. On iPhones, the operating system is called iOS. On phones such as the Google Pixel, the operating system is called Android.

How does the Internet work? Computers connected to the web are called clients and servers. A browser is a type of client that sends requests to a server. The server then responds to the request from the browser. What is a server? It's a program running on a computer somewhere in the world.

A server is nothing scary. For example, here's a small program that runs a server:

const http = require('http');

let app = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World!\n');
});

app.listen(3000);
console.log('Node server listening on port 3000');

How many lines of code are there? Looks like 7 if you exclude the empty lines. That's all it takes to run a server! This server simply responds with "Hello World". Nothing fancy. Servers can respond with all types of things. They can respond with HTML files, CSS files, JavaScript files, images, and more.

What do I mean by HTML file? It's a file on your computer that ends with the extension, .html. If you've ever saved an image to your computer, then you probably have seen them saved as something.jpeg or something.png. The .jpeg and .png extensions tell you what kind of file they are. Therefore, a CSS file would end in .css and a JavaScript file would end in .js.

Application Programming Interface (API)

You'll commonly hear the term, API, in your web development career. What is an API? If you go on Wikipedia, it'll say that an API is "a computing interface that defines interactions between multiple software intermediaries." Seems kinda vague, huh? I like to think of an API as a tool created by developers that other developers can use.

For example, software developers have created a Star Wars API and Pokémon API. The Star Wars API lets you grab data about characters, planets, species, vehicles, and more from the Star Wars universe. The Pokémon API lets you grab data about Pokémon, including movesets, types, abilities, and more.

Developers can create APIs using lots of different programming languages: Node.js (server-side JavaScript), Ruby, Java, C#, C++, Rust, Elixir, Python, and more! These languages run on the server, and the browser (the client) can make requests to the APIs to grab the data it needs.

You might hear the term, API, used for features of a library or framework. A library is bit of code that developers create, so they can be reused across applications. Open source libraries are pieces of code shared publicly so everyone can see how they were built. Frameworks are an abstraction layer around code and/or patterns that helps developers build applications.

I like to think of a library as a tool or set of tools, and a framework as an architecture or strategy that helps you leverage tools a certain way. For example, React is considered a library while Angular and Vue are considered frameworks. Angular and Vue provide helpful utilities to help you build an application beyond providing libraries of code. Once you start leveraging more tools and libraries such as Babel and Webpack, you'll start realizing that you're building your own toolchains to the point where the terms "libraries" and "frameworks" start converging.

If I were to build my own library or framework, I would design it in such a way that other developers have a good experience with it. Suppose I'm building a library for complex numbers. I would want to make sure the API I provide to other developers is intuitive and easy to use.

function ComplexNumber(a, b) {
  return `${a} + ${b}i`;
}

const cn = ComplexNumber(1, 3); // returns 1 + 3i

This seems easy to use, but what problems will it create in the future? Talking to other developers and getting insight on what problems this code creates is one way of improving your API. That is, it's one way to make sure you're building a tool that is easy to use.

It's important as a web developer to have good documentation skills as well. I would want to make sure my API is documented well, so others understand how to use it. Notice that in this context, an API isn't providing data. It's providing a way to use my library. An API is a tool for other developers to use.

Integrated Development Environment (IDE)

Before you start coding, it's a good idea to download an an Integrated Development Environment (IDE). The most popular choice is currently Visual Studio Code. This program has a robust list of extensions that help making coding easier. VS Code lets you customize a lot of features and includes support for Emmet snippets that assists you in writing HTML and CSS.

I still remember writing one of my first programs using Notepad on Windows.
😂

If you want to practice coding online, you can use online IDEs such as CodeSandbox and CodePen. On CodePen, you'll find lots of creative applications created by developers across the world that will hopefully inspire your own creative side.

Version Control

Most software developers these days use Git, a version control system. It helps you save the state of your code in remote servers and collaborate with team members more efficiently. Have you ever been working on a paper in school and keep changing the title of it to be something like "Finished_Paper_v1", "Finished_Paper_v2", and so on...? It's better to use a version control system that helps you "version" your files for you. You can also perform a "diff" to see the differences between two versions of a file.

It's important to not only version your own code, but to keep track of the versions of code you're using from other developers. If you're using version 15 of React instead of version 17, then you might notice a lot of differences.

Web Development Resources

Teaching about HTML, CSS and JavaScript (JS) would obviously take a lot of time and make this article really long. I'm here to point you to resources that I personally find both the best use of time and affordable. There are many wonderful web developers that teach web development. Although I've been coding for many years, I enjoy watching new introductory tutorials to see what cool new tools people use nowadays that didn't exist when I first started learning web development.

There are so many online tutorials for learning web development. Two great websites to learn web development are w3schools and MDN. The w3schools website has tons of examples and lessons to help you pick up HTML, CSS, and JS quickly. MDN has more thorough definitions and can teach you about topics you may not find in w3schools. Use them together as you begin your web development journey.

Next, I will discuss a list of free videos you can find on YouTube followed by paid courses you can find on Udemy. YouTube provides a lot of free tutorials that have amazing instructors. If you want to learn more, want to build more projects, or simply want a different teaching style, then I would recommend watching the Udemy courses as well. The more exposure to as many different instructors as possible will increase your awareness to different styles of coding and tools that are available to you.

Free Courses by The Net Ninja

The Net Ninja covers a huge range of web development courses. His British accent is always a pleasure to listen to. Below is a list of free videos to help you get started on your Web Development journey.

HTML and CSS: Learn the fundamentals of HTML, CSS, and the DOM.

JavaScript: Learn the fundamentals of JavaScript.

CSS Flexbox: Learn how to use CSS Flexbox to layout components on the screen easily.

CSS Grid: Learn how to use CSS Grid to layout components in a grid-like pattern.

Asynchronous JavaScript: Learn how to use JavaScript to fetch data from a server.

React: Learn how to use the React framework once you're comfortable with JavaScript

Free Courses by Traversy Media

Traversy Media also covers a huge range of web development courses. Brad provides great overviews on a broad range of topics to help you get jumpstarted on all of them. His story is an inspirational one, and he's very dedicated to helping people become successful.

After watching The Net Ninja's videos, I recommend watching some of these videos to help you become familiar with tools you'll need in your web development career.

Web Development in 2021: A great overview of tools and software developers will encounter on their journey in 2021.

Google Chrome Developer Tools Crash Course: Learn how to debug web applications using Chrome Developer Tools.

Git: Learn how to use the version control software, Git, to save the state of your code in remote servers and collaborate with team members more efficiently.

Unit Testing: A good developer writes a lot of tests! Get started with the Jest test runner by watching this awesome course. Keep in mind that this video was created in April 2018, so be aware that some things might have changed since then.

React & Webpack 4 From Scratch - No CLI: This is an important course because it teaches you how to create a React project from scratch, so you understand how create-react-app works internally. If you need help understanding Babel, I have my own Babel series that you can check out.

Free Courses by Ania Kubów

Ania Kubów provides a lot of really fun JavaScript videos, ranging from game development to building mobile apps with React Native.

12hr+ YouTube Coding Bootcamp 2021: Ania Kubów put in a lot of work to make a free 12 hour long bootcamp to help aspiring web developers like yourself get a nice career. She covers HTML, CSS, CSS Flexbox, JavaScript, asynchronous JavaScript, working with GitHub, and more.

Unit Testing with Mocha/Chai: Mocha is another test runner you can use instead of Jest. Chai is a library commonly used with Mocha to help making unit testing easier.

Flappy Bird in React Native: Once you get more comfortable with JavaScript and learn React, you can move onto React Native. In this tutorial, you learn how to make Flappy Bird on mobile devices such as your phone or tablet.

Awesome Paid Courses

The courses below are paid courses on Udemy, but are a valuable use of your time to help you learn web development even faster. Udemy courses provide lifelong access, so you can always use the courses as a reference if you need them later. Some instructors, such as the ones listed below, keep their courses up to date so as software changes, you can use the videos to keep your own software up to date in case anything changes! Udemy will also send you updates from each instructor you purchase at least one course from. These instructors will often email you discounts on new courses they create, or will let you know when their current courses receive updates.

Almost all Udemy courses go on sale to around $12 practically every other week, so try waiting for courses to go on sale before purchasing them. If you go to the instructor's YouTube channel or website, then you may find coupons listed there as well. I recommend NOT buying at the full course price unless you really want to give the instructor more money for doing such an excellent job.

JavaScript: Maximilian Schwarzmüller from the Academind team teaches about old JavaScript, modern JavaScript, object-oriented programming concepts, how to work with JavaScript libraries, server side JavaScript with Node.js, security, data structures and algorithms, a bit of TypeScript, and more!

50 Projects, 50 Days: This doesn't really take 50 days to complete. Brad Traversy and Florin Pop do a great job building 50 projects to get you more comfortable with HTML, CSS, and JavaScript. You get to work with various Web APIs so you can understand what tools are available to you in the browser.

Complete CSS Guide: The Academind team, Maximilian Schwarzmüller and Manuel Lorenz, cover an in depth tutorial on HTML, CSS, and Sass to help you "flex" your CSS skills (pun definitely intended 😂).

React: Maximilian Schwarzmüller from the Academind team teaches you about how to use React and Redux, a state management library commonly used with React applications.

TypeScript: Maximilian Schwarzmüller from the Academind team goes in depth with teaching TypeScript, builds a drag & drop project, uses React with TypeScript, and uses Node.js with TypeScript. TypeScript is a superset of JavaScript aimed at writing cleaner code by adding stricter types to JavaScript language. You don't need to learn TypeScript to get a job in web development, but more companies are seeking developers who know it.

Node.js, Express, MongoDB: Jonas Schmedtmann discusses how to build a RESTful API using Node.js, Express, MongoDB, and more. You don't need to learn all these technologies to get a job in web development, but it'll give you a ton more experience if you take the time to learn about these tools. Express is a framework built on top of Node.js. MongoDB is a type of database. In this course, you'll learn how to build web applications that connect to a database and learn best practices for authentication, authorization, and security. Additionally, you'll learn how to set up credit card payments with Stripe.

Going Further into Web Development

Like I mentioned earlier, web development is a never-ending journey. There are so many topics to learn about that I haven't even mentioned in this article. There's so many things to learn! If you're trying to get a job as a frontend developer, then I suggest focusing on HTML, CSS, JavaScript, and React first. React is one of the most in demand skills in the job market right now, and I predict it will continue to grow. However, if you're trying to apply to a job that requires Angular or Vue experience, then learn about those technologies instead. You may even find that you enjoy working with them more. We all have our own tastes and preferences.

If you want more pay or want to learn more, then you'll find many opportunities to continue your web development journey. Here is an amazing Web Developer Roadmap put together by Kamran Ahmed on GitHub. You can choose between three main paths: frontend, backend, and DevOps. However, you can also choose to be a full stack developer that has experience in a bit of everything. It doesn't hurt to learn as much as you can in your web developer career to open up as many opportunities as possible.

How to Stay Up to Date with Technology

It's important to stay up to date with important technologies, but it's difficult to keep track of everything. If you're using an open source library hosted on GitHub, then you can see when the last commit to a repository took place. This will let you know if any changes occurred or if people are still actively working on it.

Twitter is full of a lot of web developers that post updates on various technologies such as Node.js, the ECMAScript standard for JavaScript, and more. I would recommend creating an account and following people who tweet about the latest trends in technology to keep up with them. If you're using a library on GitHub, try to see if a code contributor to that library uses Twitter or posts updates on their personal website.

Instructors on YouTube, Udemy, freeCodeCamp, and other platforms create new courses all the time. These instructors try to keep up with the latest trends and technologies so they can target skills desirable in the current job market. Try to analyze the course syllabus (if it's public) to see how the technology has changed or to learn about tools you may not know about.

A lot of developers post on blogging platforms such as Medium and Dev.to. Read articles they post to keep up with cool techniques and technologies. You can use Google to help you find articles on these websites by using a search query such as "site:medium.com javascript" or "site:dev.to javascript" in the Google search engine.

Check out the Technology Radar by ThoughWorks, a consultancy company full of talented software developers. They get real-world experience with lots of different tools and techniques and report how the market is adapting to new technologies.

Conclusion

The world of web development is vast, but like everything in life, you must take the first step and continue taking one step at a time. Practice every day until typing HTML, CSS, and JS becomes muscle memory. Go to as many interviews as possible. Take as many notes as possible. Don't get discouraged if the first few interviews end poorly. Look for a team that will help mold you into a kinder and more talented developer. It might seem stressful at first, but there are many developers across Twitter, including myself, that will help encourage you and keep that fire inside you burning strong 🔥.

Never give up!!! 🌟