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:

• HTML
• CSS
• Javascript

A simple way to think about these is the following:

• HTML tells the browser what exists on a web page
• The CSS tells the browser how the stuff looks
• The javascript code tells the browser what to do when something happens

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.

HTML

Here's a really quick example of HTML code:

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

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:

• HTML in 100 seconds
• HTML in 1 hour
• w3 schools HTML tutorials
• HTML Element reference

CSS

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:

• CSS in 100 seconds
• W3 schools CSS tutorials
• Codepen: see other peopl's frontend work

Javascript

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:

• Javascript in 100s
• Javascript introduction
• Javascript Udemy Course

Your first project

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

---