Back to Series Navigation
An Introduction
Welcome here! This will be a series of posts dedicated to teaching Web Development. Over time, I’ve come to absolutely hate the culture around webdev, and for a very good reason. Micro-dependency culture paired with overcomplicated hyper-abstraction culture leads to a complete mess that is impossible to get into. I’ll try to fix that.
I’ve begun this series after talking to a close friend of mine. She wanted to do some edits for some website. Quite frankly, I didn’t understand, but seeing the absolute mess that she handed me alongside her frustrations with not knowing how to mix and match code found online led me to the realization of how needlessly complicated this can all be.
My goal is simple. I’m going to assume that you know literally nothing about code of any kind. Through this series, we’ll go over every concept you need to learn to know where to go next. We’ll also make different examples, I’ll never re-use code later. This is on purpose, so you may have a reference to come back to for different things. Alright, enough useless talk, let’s get to it.
Environment Setup
Alright I lied. We still need to get some formalities dealt with. We’ll have more later when I’ll teach you about developer tools, but for now, let’s do the basics. You’re going to want to create a directory (folder) somewhere you’ll remember. You’ll also need a good text editor. And a web browser (optional, technically).
For your text editor, you’ll want one with syntax highlighting (that means that it will show colors around your code) and auto indentation (that means that it will automatically indent your text as needed), with autocomplete being a nice plus. I can recommend a few choices:
- [Windows] Notepad++. It’s fairly minimal and just works for the most part. It’s a good first choice.
- [All] VS Codium. The free (as in freedom) and open source redistribution of Microsoft’s VS Code, their free (as in free beer) and open source code editor. It’s the webdev’s tool of choice, and I dislike webdev culture, so I dislike it. Nonetheless, it’s a very advanced development environment, and will have every feature you could realistically want as a newbie.
- [Linux/MacOS] Zed. It’s a great VS Code(ium) alternative that runs better, but it’s in beta. Use it if you’re not on Windows and want a better alternative.
- [All] Kate. This is pretty much the Linux world’s Notepad++. It’s a bit better IMO, but less popular.
- Whatever else you use, as long as it edits text. I’m a diehard (neo)vim user personally (if you use emacs, I love you too, we’re cousins not enemies <3).
If you don’t know what to pick, go for Notepad++ or Kate on Windows, Kate on Linux, and VS Codium on MacOS. In the future, consider switching to VS Codium or Zed. I’ll leave you to get used to whatever editor you use, as I won’t provide editor-specific tutorials. This is a webdev tutorial, not a VS Code extension tutorial, go figure it out on your own big guy!
Notes on The Course
I’ll be showing you examples through code, it’ll look like this:
<html>
<body>
<h1> Hello, World! </h!>
<p> My name is Fleefie, let's learn together! </p>
<s> F*cking nerd. </s>
</body>
</html>Code language: HTML, XML (xml)And I’ll render it for you (that is, I’ll show you what it looks like), like this:
Sometimes I might forget (or be too lazy) to. That’s fine. Here’s the part where I teach you how to do it yourself:
The Part Where I Teach You How To Do It Yourself
This is the part where I show you how to do it yourself.
What you’re going to do is to go into your working directory and create a file called my-first-lesson.html. Make sure that the extension is .html for browser compatibility. Then, just open it with your newly installed text editor. Paste in the above code, save it, and close your editor. Now, open this file with your web browser (On Windows, right click -> Open With -> Chrome/Firefox/Whatever. If you’re on Linux, I assume that you know what you’re doing already, lul). The file should open locally on your web browser. If you edit the file (try it!) and save, don’t forget to refresh the page for your changes to be loaded!
You may also now open your browser’s developer tools. On Firefox (and it’s forks) (I SERIOUSLY recommend using Firefox when doing webdev over Chrome), this is done with right click -> inspect, or the F12 key. You’ll have a few tabs, such as a JavaScript console, some debugging tools etc. But the most important part will be the Inspector tab. This tab contains your entire HTML code! Useful for doing quick test edits or for seeing if your browser is seeing your code right.
In fact, if you want to get used to your developer console… Know that the embedded code previews on my pages are what we call iframes, that means that they are a webpage in a webpage. So you can see the raw code somewhere in this page’s HTML. But for now that’s just a fun fact, we’ll use this fact later on.
Aaaaand that’s it!
What? That’s It?
Well, yes. That’s all. This was just a setup tutorial for now. Next lesson (I feel like such a cool lecturer for writing this out, wow) will be all about what HTML is and how it works. Now go take a little break and mess around your new fancy developer environment. Congratulations, you’re now a developer! Well, that, and you don’t have to deal with scrums and managers. Lucky you!