A friend of mine reached out today and asked for some help getting started learning how to write web apps - and while this is definitely not what I sought out to be an expert in, I’m flattered in a way that I can be a resource for this kind of question. And while this series is really designed for one person, feel free to follow along if you find it interesting.

Overview

There are three topics I want to cover in this series:

How to write static documents with HTML and CSS
How to write HTTP services (e.g. microservices) in Python
How to connect the two with Javascript.

There are just so many tradeoffs that go into those decisions above that it seems crazy not to mention them. But I’m going to resist it because I think you’ll learn more by trying a few than by me telling you about it. What I will say, is that these languages are mainstream, but the set of frameworks I’ll use is not as mainstream. Instead, I’m choosing minimal ones, which lack a lot of snazzy features you would like when you are more expert, but I think you’ll find confusing to start.

You’re going to learn parts of five “languages” (in the least strict sense):

Hypertext Markup Language (HTML), which you will use to organize text on screen.
Cascading Style Sheets (CSS), which you will use to format the document.
Python, which you’ll use to run computation, fetch data and the like on a server.
Javascript, which you’ll use to animate and script the document on the browser.
Shellscript, which you’ll use very sparingly for coordinating your backend.

Hello world

This tutorial starts where every tutorial starts, with the time-honored phrase “Hello World.”

This is how you write it, in HTML:

<!DOCTYPE html>
<html>
    <body>
        Hello World!
    </body>
</html>

The first tag, <!DOCTYPE html> is special.
- It is there to define how the rest of the document should be interpreted.
- There are other versions of HTML where the value is different, but you shouldn’t use them anymore.
- If you forget this, the page will still load, but it will look different. (It’s called quirks mode, but that’s for later.)
- The official specification for doctype is available if you’re curious.
The <html> tag holds the whole document and all it’s metadata. It doesn’t mean much except to serve as a container.
The <body> tag holds the visible part of the document (not the metadata), and there is always exactly one.
Most tags, with very few exceptions, open with <tagname> and end with </tagname> and you have to close them in the opposite sequence you open them.
- You may find it obvious, but this is so every tag is entirely inside out outside of its parent tag, and that creates a hierarchy.
Finally, inside body you have your actual content, and that’s what will show on the page.

Making that work

That was all you need, as far as code goes, but it’s not fun until you see it rendered. I don’t want you to have to get through all the other languages to get to the first result, so we will cheat this round by using an online service that provides a lot of this functionality in (drumroll) a web app.

To do that, open up a Codepen. You’ll need to sign up for an account, but instead, I recommend signing up for a Github account. Then use your Github account when Codepen asks you, when you sign up for Codepen. You’ll use Github a lot later on anyway.

They have limits to the size projects you can create for free, but that’s fine, because ours is tiny and when it gets larger, we’ll do it on our own anyway. So start with the “Basic HTML Structure + SCSS” project template. It only has three files.

Getting closer to the real world

Right away you’ll see there is more in the template than in the Hello world example I showed, and all of them are inside an element called <head>, which is the document metadata. We’ll go over all of them in another post. Just leave them alone for now.

You’ll also see that the bottom panel is totally white. We can change that super easily. Write Hello World somewhere inside the <body> tag, and not inside the green <!-- comment tags. Then hit the “Save All and Run” at the top and hit the tiny refresh button in the middle between the dark and light panels. You should see your new text.

Now for your assignment.

I have a few new tags for you. All of them go inside the <body> element - don’t bother with <head> yet.

First off, there are the headings (titles and subtitles): <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
Then you have a paragraph <p>, and if you feel like highlighting it a bit, a <blockquote>.
Lastly, throw in some bulleted lists: <ul>, and inside them each list item is in an <li>, like so:

<h1>Things I hate</h1>
<ul>
    <li> Death </li>
    <li> Taxes </li>
    <li> Vuvuzelas </li>
</ul>

Your challenge for this week is to write your resume using those tags. It won’t be beautiful, but that’s for next week.