Skip to content
ā† Back to Community
Full HTML Tutorial
Profile icon
Kookiez

HTML TUTORIAL

Hi! This is a tuorial made by @Kookiez and @necronova. This will cover most of the basics in HTML, plus a little CSS. There are 2 parts to this tutorial, and in this tutorial we will show you the basics of HTML, plus a little CSS. The second tutorial will talk more about CSS, and maybe a little JS.

This tutorial is divided into 4 sections, plus a bonus part!

History and Facts about HTML

HTML was first created by Tim Berners-Lee in 1993. Since then, there's been more versions of HTML, and this version we use in repl.it, (and the version pretty much everyone uses) is HTML5, which is the 5th version. HTML is used to make websites. You can also use Flask and Django to make websites in Python, but HTML is the easiest because it is and if you don't agree with me, go learn Django and make a website that looks good compared to just HTML and CSS that you can make in just 30 minutes.

HTML is rarely used alone. Almost every HTML project uses CSS and JavaScript in conjunction to make stylish and functional webpages. Sometimes other programming languages are used, but implimenting them is tricky, and certainly not required.

As the language that makes up pretty much everything you see on the internet, HTML is also one of the easiest "programming languages" to learn! It doesn't take long for you to become an amazing web developer! Edit:
@xpertHacker
- HTML stands for HyperText Markup Language

Markup

:/

Getting Started

Click the blue + button to create a new repl, and then select HTML, CSS, JS to get started!

So first, when you open a new HTML, CSS, JS repl, it will look like this:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <script src="script.js"></script> </body> </html>

So, we'll do a quick overview about what does what!

The <!DOCTYPE html> is very important in HTML. It may look like a tag, but it's actually a statement informing the browser that this code is HTML, and it is also stating what version of HTML it is. This is so the web browser can handle it correctly.

Then there is the <html> tag. This tag represents the root of a HTML document. The <html> tag is the container for all other tags except for <!DOCTYPE html>.

The <head> tag is a container to store information about metadata. Metadata is information about the document, but it doesn't get displayed.

The <title> tag is the text that gets displayed when you open it. So open your repl in a new tab. The tab has some text on it, and the code that does it is <title>repl.it</title>. Your title will be called repl.it.

The <body> tag is where most of your HTML will go. It defines your, well, body of the code. You can write paragraphs, headers, lists, hyperlinks, images, and much more here.

The <script> tag means that the script, the JS, will be found from the file script.js. You can put all your JS in the script.js code.

Some future reference to learn about (and might be important sometime) is HERE and HERE.

Alright, enough, let's get to the funner part (is funner a word?šŸ¤”).

Section 1: Headers, Paragraphs, and Comments

NOTE: All of this code is written in the <body> section.

Alright, one of the first things you might learn in HTML are headers. The headers go from <h1>(the biggest) to <h6>(the tiniest). Here is how to write a header:

<h1>Hi there, I'm a header!</h1> <h2>I'm a little smaller, but still a header.</h2> <h3>I'm a header too!</h3> <h4>I'm another header.</h4> <h5>I'm a header too, but I'm really small.<h5> <h6>I'm the smallest header...</h6>

Did you notice this part </h1>? It has a / in front. Why is that? Well, it's just the way it is... because I'm a terrible explainer. Actually, no. Here's a helpful explanation from w3Schools.

Now let's test it out! The text may appear ugly, plain - but it still works! You can style it with CSS, which we'll explain later.

Now let's learn about another tag - the paragraph tag! It's the <p> tag. It's basically like a paragraph - hence its name, and here's how you do it!

<p>This is a paragraph. My text is small, because it's a paragraph, not a header.</p> <p>This is another paragraph.</p>

Try it out on your own! It's smaller, but you can adjust its size and font using CSS. We're not going into that yet, but we will.

Alright, we'll look at how to make comments! People make comments to save code they want to use later, or explain what this specific code does. Comments are not displayed by the browser. Think of them as a little note telling you about stuff. Here is how to make a comment:

<!-- I'm a comment, I appear light gray in light mode, and green in dark mode -->

Alright, let's have a "checkpoint":

Checkpoint

  • We learned how to make headers
  • We also learned how to make paragraphs
  • And lastly, we learned how to make comments and the purpose of them

I've seen that we sound so serious and we...
speel meeny thangs rite an wee r xperts at grammer.

And that sentence above was probably the BEST grammar I've ever written.

Alright, that wraps up Section 1, and we're going about lists, styling text, and line breaks in the next part!

Section 2: Lists, Styling Text, and Line Breaks

Alright, let's start out with lists. So, to make a list, there are two kinds:

  • Ordered lists <ol>
    -Unordered lists <ul>

So, let's learn about ordered lists first.

To make an ordered list, here is an example:

<ol> <li>We are part of an ordered list!</li> <li>Yep, we're in an ordered list.</li> </ol>

Alright, so you see <ol> stands for ordered list, and <li> makes up each little 1. or 2. or 3. Ordered lists may be useful for explaining steps in a recipe, giving instructions, or maybe ordering things from your favorite to your least favorite. Any of these choices are good for an ordered list. But what if you don't want an ordered list? Well, then we'll use an unordered list.

An unordered list is made up of bullet points. Test this example out:

<ul> <li>I am part of an unordered list.</li> <li>Me too!</li> <ul>

It's the same "format" as an ordered list, just replaced by <ul>.

So moving on to these 2 tags, <strong> and <em>. The <strong> tag is used to emphasize text, not just to make it bold. So, for example:

<p>I <strong>like</strong> cookies!</p>

Test it out. The "like" will be bold.

The <b> tag also works. But, the <strong> tag means that THIS TEXT IS IMPORTANT! LOOK AT IT! while the <b> tag just means that the text is bold. The <b> tag is used in the same way the <strong> tag is.

<p>The word <b>banana</b> is bold.</p>

Now let's see what the <em> tag does. It makes the text italicized, and <i> also works, but the <em> tag works the most. So, it is used like this:

<p>I read the book <em>Harry Potter</em> last week.</p>

The <i> tag is used in the same way.

<p><i>Please?</i> Please, please, please, please...</p>

Now let's learn about the <br> tag.

The <br> tag is used for line breaks. It has no end tags. So try out the example here:

<h1>I AM A HEADER!</h1> <br> <p>oops. caps lock.</p>

Also, one last thing. A b element might not always be bold, and an i element may not always be italic. So it is strongly recommended to not use these tags and use other tags that do similar things. And that's why it's recommended to use the <strong> and <em> tags.

Checkpoint

  • We learned about unordered and ordered lists
  • We learned about <em>, <b>, <strong>, and <i> tags
  • We learned about the <br> tag

Yay! Now we will learn about links and images in the next section!

Section 3: Links and Images

Images are important (most of the time). They make your website look better (most of the time). Anyways, the image tag looks like this: <img>. There is no end tag in the <img> tag because it's special and you're not... actually, maybe you are special. But the <img> tag still doesn't have an end tag.

You can search for an image on the internet, or upload one of your own. To upload an image, you can:

  1. Click the 3 vertical dots and select "Upload file" and choose your own image to upload!
  2. Drag and drop your image - it's that easy!

Alright, whether you choose an image from the internet or upload your own, this is how you declare that it is an image:

<img src = "image.jpg">

See? It's that easy! Also, keep in mind that this is inside the <body> tag, and above the <script> tag.

If the browser can't display it, you can provide some alternate text:

<img src = "image.jpg" alt = "Image">

Yay! Now let's see how to adjust the size of your image. To adjust the size of your image, you do this:

<img src = "image.jpg" alt = "Image" height = "100px" width = "100px">

Easy, right? Now let's talk about hyperlinks.

Well, if you cite something, you will make a link. The most common way to make a hyperlink is to use the <a> tag. This has an end tag, if you were wondering.

Here is an example of a link:

<a href = "link">Link</a>

The href tells you what website, image, or anything the link wants you to redirect to. Oh, and a little tip:

IF you want to link to open in a new tab, add this:

<a href = "link" target = "_blank">Link</a>

Magic! Now, you may notice that your links are a different color than normal text and are underlined. Well, the default ones are like this when they haven't been clicked yet:

alt text

And links look like this when they've already been clicked:

alt text

They're still underlined, but they're purple now. Well, maybe you want them to be a different color, like orange, for example. Well, that's easy. All we need is some CSS. Well, so... you will learn some CSS in the next section, but why not right now?

So, you can select them by element type (all <p> text will be blue, all <h1> text to be underlined...) since that's the easiest.

Well, let's go into the style.css part. I think it's the easiest way to put your CSS there. The next section will touch up on some things we will learn about CSS in this part, so I don't have to explain much! Yay!

Alright, go to the style.css part. It's blank, but you can change that by writing the CSS shown below:

a { color: orange; text-decoration: none; }

This CSS tells all of the text inside each and every <a> tag to be orange, and to have no underline.

Test it out, or swap some of the colors out! Remember, you should always put a semicolon ; after each "statement", but don't put them behind the curly brackets. {}.

Maybe you could even change the font, how about this?

a { color: orange; text-decoration: none; font-family: monospace; }

Now, it's time for our checkpoint!

Checkpoint

  • We learned about how to make images
  • We learned about how to make hyperlinks
  • We learned how to use some CSS!

Now, you're more than halfway there! Yay! The next section will cover some basic CSS. Excited yet?

Section 4: Styling Elements and Using CSS

Our webpage is coming along nicely, but doesn't it look a bit bland? Lets spice it up by changing things like the size, color, and font of different elements.
Let's take a look at a paragraph: <p> This is some text. </p>

alt text

It works, but it could be better. Let's start with adding a bit of color.

HTML allows you to style elements a few different ways. The first method we'll explore goes inside the tag of the element, like this:
<p style="color: red;"> This text is now red </p>
alt text

As you can see, you only have to put the style tag in the opening <p> tag. Let's try making the text bigger, and give it a blue background:
<p style="color: red; background-color: blue; font-size: 20px;"> This text is really exciting</p>
alt text

Now, styling elements like this works, but as you can probably see, it can get a bit cluttered when designing an entire website. This is where our second method of styling comes into play: the <style></style> tags. This set of tags usually goes in the <head> tag of your file, and helps to keep your code nice and neat.

Styles can select elements by id, class, or element type. We'll start with element type since its the easiest:

<head> <style> p { color: red; background-color: blue; font-size: 20; text-align: center; } </style> </head>

Now any element in your webpage that uses the <p> tag will have that style applied to it.

What if you want different paragraphs to have different styles? That's where IDs become useful. Let's make 2 paragraphs:

<p id="RedText">This text is red</p> <p id="BlueText">This text is blue</p>

Now let's style them:

<head> <style> #RedText { color: red; } #BlueText { color: blue; } </style> </head>

Note that we use a # to show that we are selecting an id. if we had used a class instead, like <p class="myClass">This text has a class</p> we would have used a ., which would look like:

.myclass { }

Classes are similar to IDs. The difference is that classes are usually used to style multiple similar elements, while IDs are usually used when styling select elements, such as a specific text box on a page.

The final way to style elements is through an external file. This is especially useful when you want to use the same styles across multiple pages on a website. You may have noticed the "style.css" file when you first opened your project. This file is styled just like the <style> tags in the head of your document. In order to use it on your webpage, you need to add it in the head of your document as a link, like this:

<head> <link rel="stylesheet" href="style.css" > </head>

The "rel" tag tells the document what type of link you're creating, and the "href" tag tells your document the location of your style file.

So, you can write all your CSS in the style.css part, and it'll look even more cleaner and it'll be easier to navigate, since all of the CSS will be in the CSS part, and all of the HTML will be in the HTML part.

Checkpoint

  • We learned about how to use CSS
  • We learned about how to use CSS by using:
    • Classes
    • IDs
    • Element Type

We are at the end! šŸŽ‰ Now here's a bonus part... āœØ

āœØ BONUS TUTORIAL āœØ

Now since you've scrolled all you way down here, we have a bonus part! We are going to learn how to get input, make a button, and learn a little JS.

Step 1

In this part, we will add all of the HTML.

So we will make a button and a text box:

<h1>Bonus Tutorial</h1> <input type = "text" placeholder = "Name" id = "checkInput"></input> <button onclick = "getInput();">Click Me</button>

So let's break it down.

The first line, <h1>Bonus Tutorial</h1> displays the text "Bonus Tutorial".
The second line is an <input> tag. The "type is text because this is looking for text. The placeholder is "Name" because we want to know the person's name and say hello. The id is "checkInput" since we will need that information later, in the JS. I will elaborate later.
The third line, which has the <button> tag, will notify the JS that the input is done using onclick. The function's name will be getInput, so we will need that.

Now let's add the JS in script.js.

function getInput() { if (document.getElementById("checkInput").value == '') { alert('Error, try again'); } else { localStorage.setItem("Name", document.getElementById("checkInput").value); alert('Hello, ' + localStorage.getItem("Name") + "!"); } }

Well, now let's explain everything.
So, the function tells the JS that you are making a function. The text that follows it, getInput, is its name. Then it is followed by a pair of parentheses, followed by curly brackets. Everything inside the curly brackets is part of the function.

Then there is an if statement. JS if statements are like this:

if (condition) { // Whatever thing you want it to do } else if (another condition) { // Do another thing if this is true } else { // Do another thing }

So, we don't need an else if, so we just use else.

So, the code says:

if (document.getElementById("checkInput").value == '') { alert('Error, try again');

So, the code above is saying, "If the input's value is nothing, then I say, "It's an error, try again." " We know that it's not really an error, but it won't really work if the person doesn't type in anything and it says, "Hello, ".

Now let's get to the else part.

} else { localStorage.setItem("Name", document.getElementById("checkInput").value); alert('Hello, ' + localStorage.getItem("Name") + "!");

So, the code is saying, if the first condition isn't what's happening, then I will do this. The thing that it is saying, is to make a "Name" and the value is the person's input. Then, it says, "Hello, <INPUT>!".

See a demo HERE!

Now add some CSS of your own, and it'll look even better! āœØ

Closing Notes

Thanks for reading our tutorial! šŸ˜„ Since you've read all the way here, we have a special thing for you. Click HERE to claim your award! Now you have a 1-week hacker plan. Enjoy!

Oh, and don't leave yet! You see, we have a few people to credit:

@k9chelsea - because they said they would help but didn't get the chance, but we're still including them šŸ‘

@JBYT27 - for the same reason šŸ‘

Now let's clap for them!

šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘

That's a lot of claps.

Here are some tutorials that may help you:

w3schools
TutorialsPoint

Yay! Now thanks, and hope you enjoyed it! šŸ˜Š

If we made any typos, wrong information, or bad explanations, feel free to correct us in the comments section! We will credit you.

Also, thanks to @xxpertHacker for giving some constructive criticism on how wrong we were on some parts.

Voters
Profile icon
legogod
Profile icon
frostysamkam
Profile icon
tylerbouma
Profile icon
sachiicoding
Profile icon
BobbyB65
Profile icon
Oka27
Profile icon
MarieSeveckova
Profile icon
KrishMC
Profile icon
itssimran
Profile icon
B4NK41
Comments
hotnewtop
Profile icon
DynamicSquid

Nice! Well done :)

Profile icon
Kookiez

@DynamicSquid Thanks! :)

Profile icon
xxpertHacker

... HTML is also one of the easiest "programming languages" to learn!

HTML stands for
HyperText Markup Language

Markup Language

:/


The is very important in HTML. It may look like a tag, but it's actually a statement informing the browser that this code is HTML, and it is also stating what version of HTML it is. This is so the web browser can handle it correctly.

Specifically:

...but it's actually a statement informing the browser that this code is HTML

Looks like someone needs to read up on MIMEs:


NOTE: All of this code is written in the section. Do NOT write your code below the or it will NOT work.

100%... wrong.

At this point, I want to stop, because the author has no clue what they're talking about :(


You touch upon b vs strong and i vs em, but you don't explain the differences between semantic markup at all.

The tag is used to make text bold.

No, the <b> tag is used for that, the <strong> coincidentally displays as such in a browser, but it is intended to emphasize a sentence or word.


Oh, I actually stuck around till the end, and I saw this:

If we made any typos, wrong information, or bad explanations, feel free to correct us in the comments section! We will credit you.

... I guess this falls under that?

Profile icon
Kookiez

@xxpertHacker lol i'll ping @necronova
wow we're so wrong lol, we'll edit it in a sec

Profile icon
Kookiez

@xxpertHacker also wdym by the this part?

The is very important in HTML. It may look like a tag, but it's actually a statement informing the browser that this code is HTML, and it is also stating what version of HTML it is. This is so the web browser can handle it correctly.

Specificially:

...but it's actually a statement informing the browser that this code is HTML

Profile icon
xxpertHacker

@Kookiez I mentioned MIMEs afterward because that's what browsers use to read a document, not the <!DOCTYPE html> header element.

Here's the source that I'm using in an article to defend XHTML right now:
https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

(XHTML ftw: https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode#XHTML, we don't even need it)

Profile icon
Kookiez

@xxpertHacker oh ok thanks! well then the source i got the information from was wrong >:(
i dont use w3schools anymore, their info is kinda outdated... i use Mozilla docs sometimes
also did you see the chat.md at kookieapp?

Profile icon
xxpertHacker

@Kookiez Not yet, just got on

Profile icon
necronova

@Kookiez w3schools is still pretty reliable. Idk where that part came from but from my experience a lot of javascript is actually dependant on being placed BELOW elements in the body.

Profile icon
xxpertHacker

@necronova
That's because a lot of people are taught that way and leave it at that.

MDN says the following:

Scripts without async , defer or type="module" attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.

That means, that any script that does use async, defer, or type="module" do not block the parser, which means it is perfectly fine to leave in the head.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Notes

Profile icon
Nathanielx3rd

@xxpertHacker It isn't a bad thing to have it. But on repl.it they deploy it for you since you select html as the language I don't think you need it on rep.it.

Profile icon
Whacko

Very good job!

šŸ˜‰

Profile icon
Kookiez

@Whacko yay thanks :)

Profile icon
roroxilee

Thank you so much for this tutorial! I'm a newbie in CS and this helped me a lot! :D

Profile icon
Kookiez

@roroxilee thanks! :D

Profile icon
frostedbutton75

this is well written and helpful. good job!

Profile icon
Kookiez
Profile icon
frostedbutton75
Profile icon
rxphasource

really nice!

Profile icon
Kookiez

@rxphasource thx! :D

Profile icon
JBloves27

Nice job! Sry i couldnt help

Profile icon
Kookiez

@JBYT27 ah its ok. but you can help on our next tutorial, which we'll start on next week

Profile icon
JBloves27
Profile icon
Rayan81

Wow šŸ¤© nice

Profile icon
EpicGamer007

Nice! Another full language tutorial. i love how u added that "review" part at the end of each section. keep up the great work!

Profile icon
Kookiez

@EpicGamer007 Thanks! :D

Profile icon
TsunamiOrSumth

Good Job!

Profile icon
Kookiez

@tsunami21 Thank you! :)

Profile icon
necronova

Thanks for letting me help with this project! I had a lot of fun with it

Profile icon
Kookiez

@necronova Yeah, should we make a game next?

Profile icon
necronova

@Kookiez I'd so be down. I was working on a socket io chat room but i'm at a wall right now

Profile icon
Kookiez

@necronova oof, i have 0 experience with socketio but good luck with that! there might be some people that know, maybe ask a question in ask?

Profile icon
10xsxplayzgabri

thanks for the rickroll

Profile icon
etnarca

excellent, great!!!

Profile icon
marloco

@Kookiez What does the meta charset stuff do, and why is it required in every start of HTML coding?
Screenshot 2021-12-18 10.55.18 AM

Profile icon
zeldalegends

Very well done!

Profile icon
TecDev

Good but..

PLEASE SCRAPE, TEAR AND BLOW W3SCHOOLS OF THE LIST. Seriously, their website is written in pure ASP - which is:

  • Not good at all, even HTML is better than that.
  • Outdated as F###
  • Windows might end support for it soon

Well, a website using (and also teaching - take a look at their asp course) an outdated language is probably outdated too. They are not too bad but they are clearly not good. MDN Web Docs is much, much better.

Profile icon
AaronMorrison1

šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘šŸ‘

Profile icon
ShinYT

wow thats good it deserves its own website

Profile icon
SomeBoyPlayz

@Kookiez Wow awesome tutorial! This obviously deserves a website of its own, not a simple Replit post. This video Violated YouTube's Terms Of Service
image

Profile icon
JSLD06

The bonus tutorial help me, thanks!

Profile icon
ch1ck3n

This is actually way better than the number #1 HTML tutorial on replit

nice job

Profile icon
Kookiez

@ch1ck3n What is the top html tutorial here?

Profile icon
ch1ck3n
Profile icon
Nathanielx3rd

Not bad for second place in the HTML learn section. Could definitely use some more information but it's a good start. Btw if you do triple backticks then say html the color markup will be html.

Profile icon
fromiyel

thankyou!

Profile icon
dylanlovestocode

You forgot an if statement..

Profile icon
Kookiez
Profile icon
KarmaIsADick

Very nice Rick Roll, but it is very obvious it was fake as you couldn't give multiple people hacker plan with 1 link. I still clicked on it though, you know how it is...

Profile icon
Kookiez

@bennyrobert No, you actually can give multiple people real hacker plan with one link. I tried a link before, and it worked. Then I used an alt to test the free hacker plan, and it had the same result.

Profile icon
KarmaIsADick

Oh that's pretty cool, @Kookiez, Ig I was just stupid for not knowing that and still falling for the rick roll anyways.

Profile icon
Nathanielx3rd
Profile icon
[deleted]

Where do you put the link code?

Profile icon
Kookiez

@CommanderGL What link code? If you mean a the demo, here it is: https://portlydarkmagentasite.kookiez.repl.co/

Profile icon
[deleted]

TypeError: Cannot read property 'value' of null
at getInput (/script.js:2:44)
at HTMLButtonElement.onclick (/:11:37)

Profile icon
Kookiez

@daksheshdorala can you send the repl link? thanks! :D

Profile icon
Kookiez

@daksheshdorala oh i know why! it looks like id may be case sensitive, so that's probably why. just change the CheckInput in the html to checkInput.

Profile icon
Bookie0

Cool, you should add the output, like for the headers, the css, or the images :)

Profile icon
Kookiez

@Bookie0 Thanks, we'll do that in the next tutorial!

Profile icon
Bookie0

sure! :) @Kookiez

Profile icon
Bookie0

you could always edit the post ya know lol @Kookiez

Profile icon
Kookiez

@Bookie0 lol yeah i know but im too lazy

Profile icon
Bookie0
Profile icon
Kookiez

@Bookie0 @necronova made pretty much all the images, and they're working on a chat rn, they don't have time for this...

Profile icon
Bookie0