Let’s make a website. Episode VII — Let’s make a Pokédex!

Gotta catch ’em all.

Published in

codeburst

14 min readMar 12, 2018

‘sup? Hope you’re doing great.

In the last article, we learned about CSS. This technology allows us to design our page. We kept things pretty simple though, since we mainly applied changes to the text style.

This article is there as an introduction to the layout in CSS. Basically, we’re gonna learn how to position our content on the page. There’s a lot of stuff to learn in this one, so take your time to read it and understand everything!

Note: I just finished writing the whole article. “There’s a lot of stuff”… Oh, how naive I was. THERE IS SO MUCH STUFF THIS IS MY BIGGEST ARTICLE YET!

…also by the end of the article you’ll have built your very own little Pokédex.

“AWWW SH*******T”
— You

The box model

First things first, we need to learn about a fundamental notion in CSS: the box model.

Basically, every visible tag in your page (e.g. <p>, <h1>, <img>) is delimited by an invisible box. It looks like this:

Drew this in Paint, with a trackpad. This is a literal masterpiece.

Yup, that’s a lot of terms at once but we’ll go through them in details in this article.

The content

Well it’s… uh… the content. Not much more! This is often the text of your paragraph, or the image itself for an <img> tag.

The border

This is the border of your invisible box. You can actually choose to make it visible, by applying CSS rules to it, as we’ll see right after.

The padding

Think of the padding as the space between your content and your border. By default, it’s equal to 0 pixels (0 px). But thanks to CSS, you’re free to set it to more pixels. For example, if we were to set the padding to 10 px, there would be 10 px between the content and the border.

The margin

Kinda similar to the padding in a way, this is the space between your border and the other boxes in the page. It can be useful to add some space between paragraphs in your page, for example.

Haha, yeah! Totally! Ha! …Alright I didn’t get a single thing of what you just said.

Pretty sure the box model is much better understood when put into practice. Oh look! This is exactly what we’re doing next!

La Joconde’s box model. Note that there’s no padding, since there’s no space between the painting itself and its frame.

Designing a box

Enough for the theory, let’s put what we just learned into practice.

We’re gonna create a barebones page with just one paragraph (filled with Lorem Ipsum text) to keep things simple.

Note: I switched to CodePen to display code, and might actually keep this for the next articles! It’s pretty awesome since you can look at the code and see the results, at the same time. Just click on the Run Pen button (and if you wanna see the HTML code, click on the HTML button on the top left)!

Let’s add a border to our paragraph, in CSS. To do this, we’re gonna use the border property.

p {
  border: 1px solid black;
}

Here, we tell CSS to set a border 1 px wide, with the solid style (i.e. just a simple boring line). There are multiple others that you can set, like dashed, inset, dotted, and others. Feel free to experiment with them! The last part, black, is the color of the border.

This is what we get now:

As you can see, our previously invisible box is now clearly visible!

But we’re not gonna stop there. Oh yes. We’re on fire.

*epic metal riff*

…let’s add some padding.

The greatest (…aaaand I just lost 12 Megadeth fans).

p {
  border: 1px solid black;
  padding: 10px;
}

Just like that, we added some spacing between our content and our border. Damn. I know what you think. Yes, this box model thing is metal as f*ck.

This is what it looks like:

Pretty cool, eh?

Last but not least, let’s add some margin.

p {
  border: 1px solid black;
  margin: 10px;
  padding: 10px;
}

And this is what it looks like now:

See how the the paragraph has more space on the outside of its border now? Just like we asked CSS to do!

Without further ado, let’s add another paragraph right below the first one.

Since CSS applies our style to all the paragraphs, the border, padding, and margin of the new paragraph are already set! Did you notice the 10 px space between our two paragraphs? This is due to the margin we set earlier! If you try to set the margin to 0px now, you’ll see that the space between the paragraphs will be removed.

And that’s basically it for the box model! Before you proceed to the next part, it’s important that you really understand this one, because the box model is the base for all your layout in CSS. Don’t hesitate to try out different values for margin, padding, and border!

And now, to transition into the next part…

Our paragraphs are stacked on top of each other. What if we wanted the second paragraph to be on the right of the first one, like two columns in a newspaper? Well I’m a generous god so here’s another CSS concept for you reader, the display property.

If you haven’t seen 300 yet, what are you waiting for? Stop reading this terrible blog and do it now.

Display

In CSS, the display property tells the browser how an element should be… displayed. That’s it for the breaking news. As for the three main values display can take, these are inline, block, and inline-block.

Let’s have a look at them. For each value, I’ll give you a quick description, followed by a nice visual example to make things clear(er).

block

By default, a block item takes up as much width as it can. You can also set its height to your desired value. A block element will be the only one on the “line” (i.e. you can’t have multiple block items next to each other on the same line).

<p> is a block item (<h1> is, too). Here’s how three <p> are displayed by default (I added a black border to the paragraphs to highlight the fact that they take up all the available width):

As you can see, the block items (in this case, <p> elements) are stacked on top of each other. They take up the whole line.

inline

inline elements are totally different. They only take up the necessary width for their content. They can be put next to each other on the same line (i.e. you can have multiple inline items in a single line). However, you cannot set their height nor their width.

<a> is an inline element. In the next code sample, I put three <a> next to each other. Have a look at how they are displayed:

Here, you can see that the three <a> elements are put right next to each other, on the same line. They are not wider than their content, they just take the necessary space.

inline-block

This one arrived pretty late to the web party. At some point a developer probably said:

“Ok guys I got an idea. What if we had blocks. And now what if these blocks were inline? But they’re not inline inline. Just inline and blocks at the same time. What do you think? Ok let’s do shots now.”
— An enlightened web developer after five or six dozens pints (the long uhh pauses were removed and the mispronounced words were fixed to ease readability).

So basically, the idea is that these elements are a mix of inline and block items. Which means that they are just like block elements (i.e. you can set their width and height), except for the fact that you can also put them next to each other on the same line, just like inline items.

By default (and to the best of my knowledge), no tag is initially set as an inline-block element. You have to set that yourself. And this is where the display CSS property come into play!

“F*CKING FINALLY”
— Some dude in the back

Here’s how it goes:

p {
  display: inline-block;
}

That is all. Now let’s set all our paragraphs to inline-block, and see how they behave:

Our paragraphs are right next to each other, on the same line! And since they’re inline-block, not just inline, we can actually set their width. Let’s do this now, and give them all a width of 33%, so they each take (almost) a third of the page width.

Nice! This is exactly what we wanted. Three paragraphs on the same line, instead of being stacked on top of each other.

Oh look, it’s that time of the year again where I can’t find any images related to this part, so I post a cute animal picture instead! This time, it’s a Siberian Husky.

Note that the display property we used earlier can be set to inline and block too. It allows us to force an element to be inline or block. For example, if we go back to our example with the three <a> tags, and force them to be blocks, this is what we get:

As you can see here, they’re now all stacked on top of each other, because we purposefully set their display property to block.

And that’s it for the display concept in CSS. As for the box model, it’s important that you get this notion before moving on to the next part. Don’t hesitate to read this part again and experiment with the different display values!

Before we start making a tiny Pokédex, there’s one last thing we need to have a look at: <div> and <span>.

<div> and <span>

What are they?

Up till now, most of the tags you learned about had a precise goal. <h1> is for level 1 titles. <p> is for paragraphs. <img> is for images.

<div> and <span> are two tags that don’t do anything, by themselves. They’re basically just containers.

Some <div> and <span> found in the wild.

They allow you to group other tags or content. You could have something like this:

<div>
  <p>Paragraph #1</p>
  <p>Paragraph #2</p>
</div>
<div>
  <p>Paragraph #3</p>
  <p>Paragraph #4</p>
</div>

And then put a border on your <div>, so the first two paragraphs would be in the same “box”, and the last two paragraphs would be in another one. Here’s how it would go:

As you can see here, we used <div> to make groups of paragraphs. And it’s possible to apply CSS rules to <div>, just like any other HTML tag.

Wait but you talked about some <span> thing earlier

<span> is also used to encapsulate some content and/or tags. The difference between the two is that, by default, <span> is an inline element, and <div> is a block. And since you read the previous part, you know exactly what this means (if you don’t, go back to the last part, I’ll wait here)!

Here’s how you would use <span>:

As you can see here, I put a <span> around “Alexandri Macedonis”, and set its border style via CSS. You can totally do that and it’s awesome. It allows you to style some specific parts of a paragraph.

But you can do lots of other stuff with <span> and <div>. In fact, I’m willing to bet that you’re gonna use these two tags much more than any other tag in the future. You’ll see. :)

Alright. It’s Pokémon time.

THE POKÉDEX YES I’M EXCITED

What’s this?

Everybody knows or has heard of Pokémon by now. Quick recap for those who don’t: you, as a trainer, capture wild animals (called Pokémons) and make them fight with other trainers’ Pokémons. Whoa, that sounds horrible on paper.

Every time you capture a new Pokémon, an entry is added in your Pokédex, which is some kind of Pokémon encyclopedia.

Our project today

We’re gonna make a simple Pokédex which displays the characteristics of 9 famous Pokémons. Three of them have Grass type, three others have Water type, and the last three have Fire type. We’ll separate them in three different columns, one for each type.

Here’s a rough sketch of what it’s gonna look like:

Don’t worry. Once we’ll have finished, it’s actually gonna look good.

As you can see from this masterpiece, we’ll need a <h1> for the title. We’ll also need several <div> to draw the type columns, and one for each Pokémon in every column. The gray squares will be <img> with an image of the Pokémon. And the gray lines will be text saying a few things about them.

Without further ado, let’s do this!

Title and columns

First things first, let’s put a nice title. We’re gonna use the Verdana font (remember font-family from the last article?). We also want to center the text, to make things all symmetrical and pleasing to the human eye. To do this in CSS, we use the text-align property. It’s as easy as this:

h1{
  text-align: center;
}

Here’s where we are now:

Let’s add the three type columns, one for the Grass type, one for the Fire type, and the last one for the Water type.

To put them side by side, we’ll set their display property to inline-block. We’ll also set their width to 32% so they each take roughly a third of the page width (and yes, 100% / 3 = 33.33333333% but we want to include the borders and margins in the equation!).

And now we will give them a different color, one for each type.

Oh wait. How do we do that?

That’s right, if we just type this code:

div {
  border: 2px solid green;
}

CSS will have no way of knowing which <div> tag we’re talking about. Dammit! How do we do this?

There could have been no better actor for Snape.

Let’s talk about classes (I’m starting to think that this article should have been splitted into many smaller ones but now that we’re here…).

Classes

In HTML, there’s a special attribute called class. It lets you “name” some tags, allowing you to refer to them by their class name in your CSS code. It’s as simple as this:

<div class="green"></div>

In this example, we just set the class named green to our div. We’re free to give the same class name to multiple tags, and they don’t even have to be the same type!

<div class="green"></div>
<p class="green"></div>
<div class="green"></div>

All these tags now share the same class. Then, in CSS, you can style all the tags with the green class, just like this:

.green {
  border: 1px solid green;
}

Notice the dot in front of green? This is how you tell CSS that you’re styling a class, not a tag.

One last thing about classes: you can actually set multiple classes to the same tag. You could write this:

<div class="green nice-font"></div>

In CSS, you can then say: “I want all my tags that have the green class AND the nice-font class to have this style.”. To do this, you just need to write your selector with both classes stuck next to each other:

.green.nice-font {
  border: 1px solid green;
  font-family: Verdana;
}

And that’s it! It’s pretty simple, right? Let’s go back to our Pokédex now!

Back to the good stuff

Three colored columns

So where were we? Oh right! Three columns, each with a different color. Let’s do this!

Quite a few things happened there.

We added three columns and gave them the class pokemon-type. As we said earlier, we set their display property to inline-block. We also set their width, and their height (this one wasn’t mandatory, but since we don’t have any content in our <div> yet, they would have appeared as a single line if we didn’t).

Finally, we gave each column a different class. In these classes, we set a 2px wide border, with a different color every time.

That’s quite a lot of code at once, so take your time to understand everything!

The cells

And now we’re gonna add each Pokémon “cell” in every column. This is how we do it:

In every column <div>, we added three cell <div>, one for each Pokémon. We give them the pokemon class, which is just there to set a height and a margin (so the cell isn’t touching the column and the other cells). We also give them a class to set a 1px wide border with a light color.

The Pokémon images

Time to add some pictures to our Pokédex. In our case, we’ll put an image for every one of our nine Pokémons. Note that the next preview will look identical to the previous one: if you look at the code, I left the src attribute empty on purpose for every img tag. Feel free to use your own images!

Nothing really new here. We just set a specific height to all our images, and add a 5px margin so they aren’t touching the cell border.

Descriptions

We still have one more thing to do: add a description for each Pokémon. To keep it short, we’ll just put their names and their number.

For each Pokémon, we added a <ul> with a pokemon-description class. Since <ul> is a block by default, we set its display property to inline-block, so the description can be displayed next to the picture, and not on the next line. We also set the font used to Georgia. A new property, font-size allows us to choose the font size (duh!) of our text. We set it to 14px. Finally, we set the padding (on the left side only, thanks to padding-left) to 10px.

And there you go, you just made your own Pokédex! :)

Conclusion

It’s a long way to the top (if you wanna rock ’n’ roll)

Wow. What a ride!

To this day, it’s probably my biggest article! It took me thrice as much time as usual to write it (so around 7–8 minutes), but I feel like it really paid off in the end. I had fun making this little Pokédex and teaching you how to do it!

How about a contest?

So last time I told you that it could be cool to have a little contest with your best creations. What do you think?

You now have some nice knowledge about HTML and CSS. You’re able to make a not-so-simplistic layout. And I’m sure you’ve got lots of ideas for a great web page!

Here’s how we’re gonna do it: send me your .html file at the following address letsmakeawebsiteblog [at] gmail [dot] com. The page can be whatever you want. Feel free to go wild with your creations (you can even do a better looking Pokédex if you want)! I’ll feature my five (maybe less if there’s less than five participants in the end :D) favorites in my next article. I can’t wait to see what you come up with!

What’s next?

I think the next article will be similar to the one I did on code editors. You won’t learn much more on HTML and CSS themselves, but I’ll teach you how to use another good friend to the web developer: the developer tools. They’re right there in your browser, and they are extremely helpful!

See you next time!

Note: This post is part of a series.