Zero to Web Dev: Beginnings

At its core, trms is the journal of a generalist. And what generalists do best is starting new things. So here I am starting something (relatively) new. I’ve never used purple before in one of my header images so you know this is a big deal.

I always believed I wasn’t smart enough to do programming. I did go to a CS-oriented high school, and we did learn some Java and x86 assembly there, but I wasn’t great at it, and when it came time to go to university, I chose not to pursue things further. Looking back, that was pretty silly. But hindsight is 20/20, and I was just 18. So here’s my attempt at setting things straight.

For a couple of months now I’ve been diving into the world of web development, devoting nearly all of my free time to it. So I wanted to share my journey with you.

This post won’t go into the nitty-gritty details, instead it’ll be more of an overview showing what I’ve done so far. I’d like to make more detailed posts going through everything I do, such as particular challenges, tough parts, etc, but now, since I’m writing a post covering about a month or two of work, that would make it way too long. Let’s start.

Prior Experience

freeCodeCamp

If you’ve ever looked to learn web development, or even software development in general, it’s likely people told you about freeCodeCamp. It’s a free… code camp that teaches you web development, and a couple other things. It boasts thousands of hours of content and shiny certifications. So some years ago I went for it, and even got the first certification.

Will I continue with it now that I’m picking programming up again? No. I originally wrote many paragraphs here explaining why not but that’s out of place here. In short there’s nothing wrong with FCC per se, it’s just not for me for now. I might go back to it in the future though to grab some extra certifications, why not.

Some Random Stuff

For a while I was into making small scripts for virtual retro consoles like TIC-80. I made some and it was fun, but that was it.

Back in 2017 I taught myself some Python and I made a Telegram Messenger bot with it for a group I have there. It was actually pretty neat and we are still using it four years later. The code is super messy though and I’m surprised it’s lasting as long as it does. It’s basically a castle made out of popsicle sticks.

The Plan

The plan is to go through some sort of linear online course and follow it, but to then start making small projects as soon as I feel capable, even outside of the course. I’d like to also contribute in some small way to open source projects, as soon as I can do so without annoying the maintainers too much.

I believe the best way to learn is to do projects on your own. But you do need to get the basics from somewhere, so I’ll use the course(s) as a foundation, as a rail I can follow when I feel I need to move further ahead. After all I can’t learn if I don’t even know what to learn.

The Journey / The Projects

The Odin Project

I chose to go with The Odin Project to learn/revise the foundations of web development. Odin is an open source online course, maintained by volunteers, aiming to get you from zero to web developer. That sounded pretty good, so I went through and finished their foundations course.

Odin is mostly an aggregator of resources rather than a fully original course. Each lesson is a collection of external links to articles and videos. Occasionally, Odin contributors will write a lesson up themselves, but that’s rare. This is both great and not so great.

It’s great because it allows Odin to focus on organizing the flow of the course rather than having to maintain a huge amount of text. It’s not so great because by learning this way, you are switching teachers/teaching styles constantly. There is no cohesion, and each post assumes a different background. There is a bit of context switching to do before moving on to each new resource. But it’s not such a big deal.

TOP intersperses lessons with practical projects. I liked that. The projects are actually challenging and require you to Google for stuff, which, it seems, it’s what development looks like in the real world anyway.

TOP starts with a couple of sections dedicated to setting up your machine and things like learning how Git works, for example. They don’t provide you with an in-browser text editor, they make you go through installing and setting up a development environment on your own machine first. This, I found brilliant and useful. It’s great to use the actual tools of the trade right from the start.

HTML

Odin then gets you to do some HTML. Since I had experience with basic HTML and CSS before, I flew through this one and quickly completed their first project: the Recipes website. Moving on.

CSS

After having you go through a series on CSS and the CSS Flexbox (which I found super useful), they have you do another project. This time, they show you a picture of a landing page, and you have to recreate it yourself using only HTML and CSS. Here’s my result.

I really enjoyed doing this project since it applied everything I learned before, and it didn’t hand-hold me so much. They pretty much just give you the picture and tell you to replicate it, which felt like an accomplishment when I finished it.

JavaScript

Etch-a-sketch

This section of the foundation course was the most challenging but also the most rewarding. Some courses teach you frameworks immediately, but Odin starts by teaching you how to manipulate what you see on the webpage with pure JavaScript. After a couple of short lessons, you’re thrown in the deep end making an etch-a-sketch-like small web app. Here’s my result. This project wasn’t without its challenges, but overall it was doable. Which means it was just the right difficulty.

Calculator

As soon as you’re done with that, you’re hit with another project: this time, you’ll make a calculator. That was a bit harder than I initially thought since I hadn’t thought of a lot of edge cases (e.g. what if a user presses the “=” button at random times? Or the “X” button? Things like that.) Once I figured those out (which, admittedly, did take a while) here’s the final result. It turned out alright.

Library

So, that was the foundations course done. Overall, it wasn’t too bad. I started with some pre-existing knowledge of HTML and CSS, and I ended up making a functional calculator show up on a web page.

I selected Odin’s next course (Full Stack Javascript) and moved on. This course is packed much tighter, and it has a ton more content. You’re taught a lesson on JS objects then you’re thrown another challenge: the library.

This is the project that, so far, took me the most time and effort. There were times when I had to step away from the code for a while and just let my mind rest for a bit to figure out what to do next or how to solve some particular problem.

The worst thing about programming for me, so far, is that once you find the solution to your problem, you realize how obvious it was the entire time, and it makes you feel a bit dum-dum. But I suppose that’s just how it is.

So here’s the final result for the library project. You’re basically tasked to make a “library” website where people can add books to their shelf, toggle their read status, and remove them. You’re given some guidance, but it’s very minimal. Overall, I think it really pushed me, but it was worth it. Pairing the buttons you see on screen to their own “card” was a challenge. Also, I couldn’t make a nice dialog box to insert the new books, instead I’m using browser prompts, which is kind of annoying. But it’s good enough to pass for now.

Thoughts / Things I Learned So Far

Since I have a full time job I can’t go quite as fast as I’d like, but I’m trusting that doing something every day, no matter how small, will eventually get me there. Also, even if I could go faster, I’m afraid I might burn out, so I’d rather take things at a leisurely pace and enjoy the ride.

Overall, I went from little knowledge of web development to making some small yet interesting projects, such as the landing page, the calculator, and the library. That’s something. I do wonder how larger projects are done and managed, so that curiosity pumps me up for the future.

I do feel that being in a community, or in a classroom with other people struggling with your same problems, would help out. Not just in solving the actual problems, but for motivation, too. I am aware that Odin and pretty much every course has a Discord server, but I’m not too comfortable just introducing myself to a number of complete strangers and getting into the community, especially when the communities are of thousands of members, and most people are just there to seek help and nothing more. I wouldn’t want to be a burden on those five people who actually help others out, but who are already stretched thin due to the amount of newbies coming in.

I think web development in general has been moving extremely fast these last couple of years. This is great, since there is progress, but it also makes online articles/tutorials obsolete really quickly. Online courses try to keep up, but random blog posts might not be so useful if they’re even just 1-2 years old. This is in contrast with other areas of software development where things basically froze.

Sometimes Odin is behind the curve, recommending articles from 2012, and in this respect, the Fullstack Open course from the University of Helsinki does seem to be much more up to date. But that’s for the next episode.

You can find me on GitHub here. If you’re a dev, or just into this type of thing, I’d love to hear from you. Maybe we can help each other out.