How Do I Web Dev?

Hi! 👋

Are you interested in becoming a web developer? Well, if you're reading this, then probably yeah. And to be honest, a lot of what I'm about to say likely won't be news to you. But maybe you know someone who wants to get started but doesn't know how?

Hopefully, after reading this you'll have a bit of a clearer path.

First up, let's get one thing straight.

🧑‍🎓 Who Can Learn?

EVERYONE. That's it. Everyone. Background, race, gender, age, education, work history don't matter. This includes YOU. Everyone can learn to build the web, and anyone who says otherwise should be ignored. Full stop.

💻 What To Learn?

First of all, for this article, we're sticking to Front End Development. The front end is basically everything that appears in the browser that users can interact with. The Back End will be discussed later.

There's no getting around it, you're going to need to learn these. I'm going to give a cliff notes version, then a bit more detail.

1 - 🌎 HTML

📝 This is the skeleton of a website. It lays out the content and how that content is structured.

Discussions about whether or not this is a programming language notwithstanding (spoiler alert: it doesn't matter), this is the fundamental building block. It uses tags to determine what to display on the screen, and is about as straightforward as it gets.

What It Looks Like:

<h1>This is a header tag</h1>
<p>And this is a paragraph.</p>

This creates two HTML elements on a page. A header 1 tag and a paragraph tag.

2 - 💅 CSS

📝 CSS lets you target HTML tags and give them styles

Colors, sizes, positioning, all this is done with CSS. There are many, many CSS rules for applying styles, and they can be combined to create incredibly unique, stunning websites.

What It Looks Like:

h1 {
  color: red;
  font-size: 12px;
}

p {
  color: green;
  font-size: 40px;
}

This will change the color and font size of the header 1 tag, and change the color of the paragraph tag.

3 - ⚙️ Javascript

📝 Javascript allows you to essentially pull the levers of a web page.

Okay, this is the big one. You will spend ten times as much time banging your head against the desk learning Javascript than HTML and CSS combined. There's no doubt about it, this is programming. There is a lot to cover, but basically, you can use Javascript to make calculations, and depending on conditions, you can change the page as needed.

What It Looks Like:

let myText = "Hello there!"

document.querySelector("h1").innerText = myText

This code will target the header 1 tag and replace its text with what we've saved in our myText variable.

If you want to see that code in action and play around with it, here's a live CodePen!

🛠 Frameworks, Libraries, and Stacks, Oh My!

The first three are absolute requirements, no doubts about it. But you're almost certainly going to need more than that to advance in your career.

React. Angular. Vue. Svelte. Next.

Generally called Javascript frameworks (technically React is a library, but 🤫 it's not important here) these are development languages that rely on Javascript to build the modern web.

Most sites you see these days are built with some kind of framework. Facebook, for example, is built with React. Heck, React was created by Facebook specifically for Facebook to be built in.

And honestly, you're going to need to learn at least one of these at some point.

⛔️ Controversial Opinion! ⛔️

Learn React.

There are a LOT of frameworks and a lot of them have very enthusiastic fans. But at the time of writing, React has by far the most job openings and the most websites being built with it.

⛔️ Alternate Controversial Opinion! ⛔️

Learn Vue.

Yeah, I know, I just said to learn React because of the massive job market. But here's the thing; Vue is pretty popular too. It is definitely growing in popularity, and though there are fewer jobs, there's also a LOT less competition for those jobs.

⛔️ Yet Another Controversial Opinion! ⛔️

Learn Angular.

Okay, okay, last one I promise. Angular was made by Google and though its popularity has been waning in recent years, it still remains used by a lot of sites. And with fewer and fewer people learning it, the need for Angular devs is only increasing. In fact, during a recent interview, I was asked if I knew any Angular or if I was willing to learn it, because they had clients that were desperate for Angular developers.

🥞 Wait Did You Say Stacks?

This article was all about Front End development, but there's an entire other half to the web; Back End development. Anything that happens on a website that a user doesn't or shouldn't see happens back there.

Back End code is what gets processed between clicking the 'log in' button and your profile appearing in the browser. There has to be code that checks that your email address is in the system and the password you entered is correct, after all.

When you combine Front End with Back End, you get the Full Stack of web development.

There's no requirement to learn both to be a great developer. I know fantastic Front End developers who wouldn't have any clue where to start with Back End work, and I know lots of Back End developers who couldn't write a line of CSS to save their life. It's completely okay to pick one over the other, but I would absolutely suggest trying both before you make that decision.

Hopefully, you found this information useful and maybe it even tipped the scales for you in deciding to make the leap into web development.

Next up? You probably guessed it; Back End Development.