Bastion Fennell
Posted on March 5, 2019
This is the first part of a three part series:
Part 1, Layout with HTML
Part 2, Styling with CSS
Part 3, Interaction with JS
In this part, we'll be learning HTML! Our goal is to build the bare bones layout of our app. You could say right now we're laying out the canvas that we'll use for parts two and three of this series.
Everyone has a different idea of what the "Perfect First Webapp" is when you're learning frontend development. Some people think you should build something like TodoMVC, a fake portfolio site, or maybe even just trying to copy facebook. All of these are good, but I'd like to introduce a new idea to the mix:
Incremental games
When I first started learning how to program and taking an interest in software development, I certainly didn't think I would become a web developer. I wanted to make video games! While I didn't wind up in that industry, I still have that itch to build games every now and again. Incremental games are the perfect way to combine the worlds of web dev and gaming. So, let's get started!
What is an Incremental Game?
Rather than tell you what an incremental game is, it might be best to show you. The game that got me into it initially was Cookie Clicker, which you can try out for free in your browser right now!
Basically, incremental games (also called clicker games or idle games) are all about collecting a particular resource. At first, you have to click and interact with the game. As the game progresses, you start to use that resource to buy items that will automatically harvest that resource every second. Eventually those items outpace your clicking so all you have to do is manage what to buy next and check on it every now and again!
We're going to be building our version of Cookie Clicker, called Code Clicker. Original, I know. Instead of collecting cookies, we'll be "writing" lines of code! In our initial app, we'll have two items we can buy: Extra Hands and Code Monkeys. Extra Hands will make our clicks write more code per click, while Code Monkeys will automatically write one line of code per second.
Now that we have an idea of what we're building, let's get started!
What is HTML?
For any sort of web app that we want to build, we gotta start with some HTML, or HyperText Markup Language. Think of HTML as a way to communicate what we want the page to look like via text.
Fun Fact
HTML is based on SGML, but has become the de facto web standard.
The main components of HTML are tags. HTML has a set of defined tags that have different effects on what we show on the page. There are a lot of tags, but here are a few that we'll use in this project:
<html> The tag that wraps the whole document and defines it as html
<head> This section doesn't have any displayed content, it only contains metadata for the browsers to use
<body> This section contains the layout of the page and what we will actually display to the user
<div> Short for division, this tag is simply used to mark a division or piece of the page
<p> Short for paragraph, used to define a section of text
<h1> Short for header, you can use h1 - h5 for different levels of header
<a> Short for anchor, used to create links
<button> A clickable button
Using these tags we'll create the general layout of our app. Now, this is going to look ugly. The next step, which we'll cover in the next post, is to style it using CSS and make it look nice. HTML is just to build the layout.
By the end of this part, hopefully we'll have something like this!
The idea here is that we're writing lines of code by clicking the write code button. There are also a few things we can buy below it to start automatically incrementing lines of code. It's not interactive yet, we'll get to that in the third part of the series.
So, how do we get here? Let's break it down. Create a file called index.html and let's start building our layout! First, let's make the wrapping HTML tag.
<html>
</html>
That lets the computers know this is an HTML document. Notice that we have the opening tag: <html> and the closing tag: </html> Anything between those two tags will be considered a part of it, or one of its children.
Next, we put our two main sections.
<html>
<head>
</head>
<body>
</body>
</html>
The head is for our metadata, the body is for our display data. So, what is metadata? It's data that the browser can use, but isn't strictly used for the layout of the page. Let's put in some example metadata!
<html>
<head>
<title> Code Clicker </title>
</head>
<body>
</body>
</html>
The <title> tag is what is displayed in the tab when you're on the page. If you open up your index.html file in your browser now, you should see that the tab says Code Clicker on it now! Next, let's add our top section, which will show how many lines of code have been written and give us a button to write more.
<html>
<head>
<title> Code Clicker </title>
</head>
<body>
<div>
Lines of Code: 0
<div>
<button> Write Code </button>
</div>
</div>
</body>
</html>
Now we're using div tags! These div tags serve two purposes: Putting the button and the text on separate lines, and defining this top section in the HTML.
If you're more familiar with HTML, you might think we're a bit div happy in this app. Since this is a jumping off point for a web app, we want to start getting comfortable with divs now. We'll be using them for styles and with Javascript in the next couple of posts.
We're also introducing our first button! You could just use a div here, but it's important to make your interactive elements as clear as possible using things like button and input tags. That way, screen readers and people navigating via keyboard can still use your app. If you want to dig into this type of thing more or learn how to make your web app more accessible, check out the A11y Project.
Since we already know how to use each of the tags now, let's go ahead and just add the two 'buyable' items to our page.
<html>
<head>
<title> Code Clicker </title>
</head>
<body>
<div>
Lines of Code: 0
<div>
<button> Write Code </button>
</div>
</div>
<div>
Number of Extra Hands: 0
Price: 10
<div>
<button> Buy Hands </button>
</div>
</div>
<div>
Number of Code Monkeys: 0
Price: 100
<div>
<button> Buy Hands </button>
</div>
</div>
</body>
</html>
And voila! We have the basic layout of our app using nothing but HTML! In our next post we'll explore CSS and see how we can make this look better.
How did your incremental app turn out? Let me know in the comments below!
Posted on March 5, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
