A code blog


Roadmap Index


Welcome To The Web

Welcome to the web! First I'll justify why I'm starting you with the web platform. Then we will dive into some super simple examples, and I'll link you to some self-learning resources so you can get started on your own.

Why the web?

The web is a ubiquitous platform that has taken over the world. It is the single greatest content distribution platform that has ever existed in the history of our species. If that's not already a great reason to focus on it, here's some more.

Platforms, abstractly

Platforms usually have a ton of overlap in terms of how to think about them at a high level. If I wanted to build a C# app, which I have never done, I would expect to have to learn all of the things that I mentioned here. Learning the web platform is a great introduction to what it means to use a platform to build an app and deliver it to users.

Javascript, everywhere

Once you know the core set of web technologies, you can build apps for every platform that matters. You can make websites, full on web apps, desktop apps, mobile hybrid apps, and even native mobile applications. Javascript has always been somewhat of a meme. This is partly due to some legitimately weird semantics, but also partly due to hive mind nonsense. I've made an entire career out of using javascript and I've built some wonderful applications using it. Learn once set of tech, take of the world. It's really a beautiful thing. And once you're tired of the weird semantics you can learn Typescript and all of your problems will solved (jk).

It's a strong skillset for me

I think this is self explanatory. I'm teaching newbies how to do something. It only makes sense to be teaching something I'm already pretty damn good at myself. I could probably brute force my way through teaching someone Haskell, but it would be miserable for both parties. Javascript has always been my comfort zone.

The main pieces of the web

There are three main elements to the web platform:

A simple way to think about these is the following:

That's really all there is to it at the end of the day. Of course the web APIs themselves are pretty extensive and will take you some dedication to understand. But for the most part this is a pretty decent mental model to get started with.


Here's a really quick example of HTML code:

    <p>A paragraph tag!</p>
    <h1>A heading tag!</h1>

It doesn't make sense for me to exhaustively teach you about HTML, since there are a nauseating number of resources out there for you to learn from already. Here are a couple of good starting points:


Quick CSS example:

p {
    /* Make the text of all p tags red */
    color: red;

    /* Make the font size of all p tags 24 pixels */
    font-size: 24px;

div {
    /* Make all divs 100 pixels wide */
    width: 100px;

Some good CSS resources to get started:


Javascript is typically the beast of the bunch. It has a ton more syntax/semantics and it's usually pretty hard for people to get up and running with. Especially in comparison to HTML and CSS which are both very limited in scope. Instead of showing some examples I'm just going to link you to some initial resources to get started. Soon I'll start a "javascript pain points" section of this blog to specifically cover the things that have given my students trouble with the language (functions vs lambdas, etc.). But for now:

Your first project

Move on to the Next blog entry to start working on your first project.

Ask me questions on twitter or email me at ty@tytr.dev