Scratch Code

Learn about coding with HTML/CSS and Scratch!

Coding with HTML/CSS!

Coding is one of my favorite things to do (probably because I love video games so much). At first, I had no idea how to code and I didn't know where to start, but I wanted to learn code for SOOOOOOOOO long! Then, I was told about a website called Codecademy. It has taught me so much, and I am still learning. Since I don't know EVERYTHING about HTML/CSS, I'm just going to teach you as much as I know, which is quite a bit (not to brag).

HTML (Hypertext Markup Language)

HTML is used to make documents, PDFs, and websites. It's nothing like making a Smore (like this one), or a Weebly, or a Microsoft Word (or whatever you use) document. It's much more challenging only because you have to remember the code for everything and type all the code. But it's easy to remember the basics.

CSS (Cascading Style Sheet)

CSS is used to decorate the HTML code. You can change the color, size, background color, text features, add images, and more. Without CSS, websites would be boring and bland like this. Have you ever loaded up a website but then it glitches and looks like something like that same website? When it looks like that, it either means the website creator didn't take time to decorate, or the CSS coding glitched out and didn't work.

Let's Start Coding!

Now to actually start coding. I'm going to start with what I call the outside layer of code, which is basically the coding that is in every HTML coding page. Now to start:


<!DOCTYPE html> (This let's your computer know that what you are coding is in HTML.)

<html> (This starts the HTML format.)

<head> (This is the opening tg for the "head" of the coding page. There is a head and a body in a coding page, and you will see the body of the page below.)

<title>Coding!!!</title> (This is the title of the coding page, but it will not show up when you test the code. If you finish a website and put it on EasyBib or something, the title of the website will be this.)

</head> (This is the closing tag for the "head." Remember, there is a closing tag for every opening tag, except for the DOCTYPE tag.)

<body> (This is the said before "body" of the coding page. This is where you put the code for everything on the website/document that you want to show up.)

</body> (This is the closing tag for the "body." You might realize that there is a forward slash in the closing tags. This lets your computer know that you are ending whatever tag you used before.)

</html> (This is the closing tag for the HTML tag near the top. This also should be the end of the coding page.)


And that is the outside layer for an HTML code. Now to add the details in the body tag:


<!DOCTYPE html>

<html>

<head>

<title>Coding!!!</title>

</head>

<body>

<H1>Coding!!! :D</H1> (This is a heading tag. This can be used as an actual title which shows up or a heading. There are 6 sizes of headings, H1-H6. 1 is the biggest and 6 is the smallest.)

<p>Coding is really fun! I started learning coding this year and now I am teaching you how to code!</p> (This is a paragraph tag, and you can make it say anything you want just by typing in between the opening and closing tags.)

</body>

</html>


But nothing is decorated! Where are the different fonts and colors and sizes!? Now to add some CSS:


<!DOCTYPE html>

<html>

<head>

<title>Coding!!!</title>

</head>

<body>

<H1 style="font-family:Arial; color:skyblue;">Coding!!! :D</H1> (You probably noticed the style part inside the heading tag. What I have put in there makes the font Arial and the color sky blue.)

<p style="font-family:Arial; color:gray; font-size:15px">Coding is really fun! I started learning coding this year and now I am teaching you how to code!</p> (There is also a style part inside this paragraph tag. What I have done here is make the font Arial, the color gray, and the size 15 pixels. FYI, px, as you saw in the style part, stands for pixels.)

</body>

</html>


And that is the basics of HTML and CSS! Now to learn how to code with Scratch! (See what the coding above has created by visiting this link.)

Programming with Scratch!

Scratch is basically a simple way to code animation video games, etc. Actually, Scratch doesn't involve any coding at all! You just choose the animations from the side of the screen and edit them to match what you need for your animation/video game. I play this one game that someone made on Scratch all the time! (Link here.) Visit Scratch to start animating!

Let's Start Animating!

To make an animation, just make/choose a character (if you are making a character, just press the paintbrush that's right above the character box and the rest is self explanatory) and make/choose a background (if you are making a background, just press the paintbrush below the words, "New backdrop"). Then you choose an animation setting or sounds setting or whatever you need from the side. Click and drag it into the big gray area and then change the settings to what you want/need for your animation. Almost always, you will start your animation settings with a setting that says, "When flag clicked" or "When space clicked" or something like that to let Scratch know that you want your animation to start when you do a specific thing. The picture on the side is an example of making an animation to let you know what it looks like to use Scratch.

Let's Start Making a Game!

To make a video game with Scratch is the exact same way as making an animation except you'll want to make it in a way where the player can control it. And the only place you should use the "When flag clicked" animation setting is the very beginning IF there is something you want to tell your audience. All the other starting animation settings would be things like "When space clicked" or "When left arrow clicked" or whatever controls you are using for your game. The picture to the right is me making a game, which you will notice looks exactly the same as making an animation.

Thanks for Reading!

I hope that I have successfully taught you how to code with HTML/CSS and/or use Scratch to program a videogame/animation. If you haven't already, you might wanna try coding/programming for yourself, because it's really fun! Have fun coding/programming!