Hour of Code - JavaScript

Hour of Code Project by CodeCraft School

Home
Lesson 1
Lesson 2
Lesson 3

Lesson 1: Click the buttons to learn some basics of coding.

Introduction: 1

HTML: 2

CSS: 3

JavaScript: 4

Introduction

Humans speak many different languages!

So do computers. This tutorial will help you to become familiar with 3 computer languages. HTML, CSS and JavaScript. These languages are used to create web pages and apps that run inside of Internet Browsers like Chrome and Firefox.

How to use this tutorial.

This tutorial was intended to introduce basic coding concepts.

The tutorial is divided into 3 lessons.

Lesson 1

Lesson 1 introduces coding and some basic concepts. It is intended for students with little or no familiarity with coding.

Lesson 2

Lesson 2 illustrates coding principles. It is intended for students with little or some familiarity with coding.

Lesson 3

Lesson 3 demonstrates coding by creating a simple game. It is intended for students with some familiarity with coding.

What you will need.

Required:

1 or more computers.

A downloaded copy of this tutorial.(*)

(*) Only required if you don't have an Internet connection.

A Text Editor like notepad(win) or TextWrangler(mac) that can save and edit .txt files or a Code Editor like Brackets or Sublime.

Recommended:

An Internet Connection

View and follow this tutorial completely online!

Getting Started

The first thing you will need to do is get setup to code!

Step 1: Create a folder on your computer and call it tutorial.

If you downloaded the project, extract the contents of the zip file into the folder you just created.

If you are following this tutorial online, create 3 folders inside of the tutorials folder called lesson_1, lesson_2 and lesson_3 .

Your folder should look like this.

tutorials

|__ lesson_1

|__ lesson_2

|__ lesson_3

Next you will need a text or code editor and an Internet browser. We suggest you use Google Chrome unless you have no Internet connection then you can use Firefox in developer/offline mode and still complete this tutorial.

When you are ready to start click the buttons in the HTML section to learn about coding HTML!

Online Resources

HTML stands for HyperText Markup Language.

HyperText is the method by which you move around on the web.

Web pages are linked together by clicking on special text called hyperlinks which bring you to the page. Hyper just means your movement is non linear.

Example: You can navigate to any place on the Internet whenever you want by clicking on links. There is no set order for clicking links, that's what makes it non-linear!

Markup is what HTML tags do to content on the web page. (text, images, links, etc.)

HTML is a Language, as it has meaningful words and syntax like any other language.

The Web User, uses a browser on their computer or device to view HTML pages on the Internet which reside on the Web Server.

A basic html page is actually just a text document with the extension .htm or .html. The file extension tells the browser that the document is a web page.

If you create a text document and chenge the extension from .txt to .html you will create a web page.

Modal Header

Create a web page.

Step 1: create a file with your text or code editor and save it into the tutorials folder inside the folder called lesson_1. Save the file with the filename index.html.

You should now have a file called index.html inside the folder called lesson_1.

Using your editor edit the text inside of index.html by typing Hello World!

Save index.html and open the file with your browser.

You should see Hello World!

Congratulations!

You just created a web page!

A complete web page.

Replace hello world in your index.html with the code below, save and preview.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Hello World</h1>
<p>This is a paragraph.</p>

</body>
</html>

Using Markups

The code you see inside of the lesser than < and greater than > symbols is called a markup tag. Tags tell the browser what to do with the content on the page. Anything inside of the angle brackets is read as an instruction to the browser. Most tags come in pairs. Tags do not get printed to the screen. What's inside of them does.

This is a pair of paragraph tags <p>This is a paragraph.</p>
The tags tell the browser that the text inside of the pair of tags is part of a paragraph.

The first tag starts a paragraph <p> and is called the opening tag and the second tag </p>< ends the paragraph and is called the closing tag. The slash / denotes the second tag is a closing tag.

<!DOCTYPE html> Tells the browser what type of document this is. This tag specifically declares this page as an html page that supports html5.

<html> Tells the browser that what follows will be in html.

An html page has two sections, a head and a body. Anything inside of the head tags is an instruction to the browser and will not be printed to the screen.

<head>
<title>Page Title</title>
</head>

Anything inside the body tags will be printed on the screen unless it is inside of a tag that prevents it.

<body> The body tag starts the body section of the document.

<h1>Hello World</h1>
<p>This is a paragraph.</p>

</body>
These tags close the body and html tags. </html>

You can find more tags here. Try inserting some new tags into your HTML page!

What is CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.

We use CSS to add style to our HTML tags.

CSS makes HTML more beautiful.

There are several ways to apply CSS to HTML tags.

In this lesson we will learn 2 methods for applying CSS to our HTML, inline and using the style tag.

The inline method involves placing a style attribute inside of an HTML tag.

This is an opening and closing paragraph tag.

<p> </p>

We can place a style attrubute inside of the opening p tag like this:

<p style="" > Some text. </p>

By adding styles inside of the style attribute we can define what the text in the paragraph tags looks like.

<p style="color:red;" > Some text. </p>

The style color:red tells the browser that any text inside if the p tags should be red.

You can find a list of CSS styles here.

Styling HTML

You can add more than one style to a style element by separating them with semicolons.

<p style="color:red; text-align:center;" > Some text. </p>

This will make the text red and center the text.

If you end up using a lot of style combinations you will notice that you end up adding the same combination of styles to multiple tags.

This isn't very efficient and luckily there is another way to apply combinations of styles called a atyle tag.

We can insert the opening and closing style tags into the head section of the web page.

<head>
<title>Page Title</title>
<style>

.styleset1
{
color:red;
text-align:center;
}

</style>

</head>

The period before the word styleset1 denotes it as a class. A class is a collection of styles that can be applied to an HTML tag.

We can use classes we create inside of our HTML tags like this.

<p class="styleset1">Some Text</p>

class="styleset1" tells the browser to apply the styles in the class styleset1 to the contents of the p tags.

Styling a web page

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

.styleset1
{
color:red;
text-align:center;
}

.styleset2
{
color:blue;
text-align:center;
}

</style>
</head>
<body>

<h1 class="styleset1" >Hello World</h1>
<p class="styleset2" >This is a paragraph.</p>

</body>
</html>

Learn More CSS

Check out this tutorial on CSS and try adding some new styles to your web page!

CSS Tutorial

What is JavaScript

"JavaScript (JS) is an object-oriented computer programming language commonly used to create interactive effects within web browsers."

Javascript adds the ability to use logic to HTML pages.

JavaScript is a set of instructions to the browser.

The script tag <script></script> tells the broswer that anything inside the script tags will be speaking JavaScript and not regular HTML.

"JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them such as HTML tags.."

How to use JavaScript

There are many ways to use JavaScript, we will start with the simplest.

You can place JavaScript in the head or the body of a web page.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>Your JavaScript can go here.</script>
</head>
<body>

<script>Your JavaScript can go here.</script>
</body>
</html>

A Simple JavaScript

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<p id="display"></p>
<script>
//this is how we write comments in JavaScript

//These are variables
var a = 1;
var b = 2;

//c is a variable equal to the sum of two other variables a and b.
var c = a + b;

//print c to the console
console.log(c);
//print c to the page
document.getElementById('display').innerHTML= c;
</script>

</body>
</html>

Learn More

Here is a great resource for getting started with JavaScript!

Learn More!

Here is another great resource!

W3 Schools