I started my Web Developer journey in 2020. I needed a job I could work from home and to make money to buy a boat house in Portland for $75,000. I’m kidding, but building websites seemed like an incredible skill that wouldn’t be going away anytime soon.
Freecodecamp.com was my primer to the profession and it confused the hell out of me. I felt like I was using things I knew little about but was doing whatever made the interactive console happy.
I’m a book guy, so I bought some books on the subject. I still wasn’t getting it. It wasn’t until I got my hands dirty that I started to figure out what this website stuff was all about.
Start From The Bottom
This is how to learn to become a web dev and get a job or work for yourself: start with an index.html page and actually build a website.
I’ve made an incredibly easy list to follow to get you up and running. After this tutorial you will have made your first website!
You Need A Text Editor
We need a way to edit our files. A website is a bunch of files that link to eachother and either display content or do work(like talk to a database or perform a function).
I recommend VS Code, it’s easy to use, customizable, and is sort of the industry standard. It works on all operating systems.
Once you download that, you’re ready to start Web Deving! Right click under the ‘Explorer’ tab that is usually on the far left of the screen in VS Code and create a new file.
Files
We want a file with a certain type of extension: HTML. Make a file called index.html.
Think of this file as your home page. This is what the server looks for to serve.
Type “Hello” into this file and then drag our index.html file into a web browser. Your web browser will show your home directory leading into this file something like: /Users/trev/Dev/index.html, and for Windows it will be a bit different but the idea remains.
You should see “Hello” on a blank page in your web browser. If not, retrace your steps until you see the correct page.
You built your first website, congrats! 🎉
That’s all you need to learn to start building websites and now you can go start applying for jobs! … Not!
HTML
HTML isn’t picky, so we can write whatever we want and it will display it, but that’s not the rules.
Oh, what is HTML? It stands for Hyper Text Markup Language
We need to tell HTML some things so it renders correctly. Type ”!” into your code editor and press “tab”.
Here’s what you should see:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>I’m not going to go into what all of this means, this is something you must do on your own, but essentially we’re telling the server/browser: This is an HTML 5 web page, it is written in english, and the title(what shows in the browser tab) is “Document”. The “head” tag merely tells the server/browser about the page and is not rendered.
Type anything inbetween the “body” tags and refresh the web page. It should have changed with whatever your wrote betwix these tags. Again, HTML is ambivalent to what we write in it, unless it’s in certain tags.
Writing website like this is fun and all, but let’s actually make it make sense!
Replace the following ”{}” with your name and whatever else you want.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>{your name}</h1>
<p>{about yourself}<p>
</body>
</html>Notice any changes? That h1 tag is gigantic compared to the p tag! HTML has some of its own styling baked in. By writing our HTML within these tags, we are telling the user there is a heirarchy to our content.
You’ve officially built your own website. You have a long journey ahead of you, but it’s worth it. You’re probably wondering if I’m going to explain what h1 or p means, and I’m not— that’s for you to find out on your own!
Here’s a hint: MDN Docs on HTML Elements