You know the primary colors are red, blue, and yellow:

But the primary colors for computer and TV screens are different. They are red, green, and blue.

A screen is made of pixels. You may think a pixel is a tiny square lightbulb. It's actually 3 really tiny rectangle-shaped lightbulbs, called subpixels.

In each pixel, there is one red, one green, and one blue subpixel.

Each pixel has an RGB code that says what color it should make.

To make the color purple, a pixel needs its red and blue subpixels turned on, and its green subpixel turned off:

The RGB code for a purple pixel is:

A yellow pixel has an RGB code of:

An orange pixel has an RGB code of:

We usually use decimal numbers. But programmers often use hexadecimal numbers — or hex — instead.

In the decimal system there are ten digits.
In the hexadecimal system there are sixteen digits:

Hex uses the letters A to F for the numbers 10 to 15.

This lets you write bigger numbers in fewer spaces: 10 in decimal and A in hex are both the same number, but 10 is two spaces long, and A is only one.

Here are some RGB codes in decimal and hex:

A hex RGB code is actually 3 numbers. FFAA00 for the color orange is actually FF for red, AA for green, and 00 for blue.

Knowing how hex works makes it easier to find the perfect color for your website or app.

Just remember: When you see ABCDEF, you're seeing three numbers: AB for red, CD for green, and EF for blue.

RGB codes are case-insensitive: the computer treats them the same if they're UPPERCASE or lowercase.

One neat thing about knowing hex is you can make colors from words, using the letters A through F!

You can also cheat and use some numbers in place of letters, like 5 for S.

What other words can you turn into colors?

This paragraph has been styled to look different from the other paragraphs in this book. The code for styling is called CSS. The CSS for this paragraph is below.

background-color:
color:
font-style:
text-align:
font-size:
border:

A property is something you have. A value is an amount, a measurement, or a setting — like how you can set your phone's ringtone.

When you pick a CSS property and give it a value, you make a declaration, like this:

This declaration has 3 punctuation marks:

Computers are very picky about punctuation in CSS. If the punctuation is wrong, the CSS won't work.

background-color 000000
color FFFFFF
font-style italic
text-align center
font-size 12px
border 5px dotted FFFFFF

There are over 500 CSS properties.

This means each image, button, or piece of text you see on a webpage has 500 different settings you can change to make it look different. That's a lot!

Each CSS declaration needs a selector. It tells your computer which part of a webpage it should select to use with that declaration. For example:

p, code, img{
  width:400px;
  height:200px;
}

This tells your computer that it should select something and make it 400 pixels wide and 200 pixels high.

A selector and its declarations are called a CSS rule.

A rule can be written on one line, or many lines. But the punctuation is always the same.

This selects every quote and every piece of code:

This selects every piece of code inside a quote:

• form button
• form p button
• form, p, button
• form, button

Fill in the selectors for…

All of a website's CSS is usually kept in a stylesheet:

1 |  p, code{
2 |    color:#000000;
3 |    font-size:18px;
4 |  }
5 |  p{
6 |    color:#FF0000;
7 |  }
8 |  code{
9 |    color:#0000FF;
10|  }

It's a sheet of style rules.

The C in CSS stands for cascading, like a waterfall. This means three things:

1. If a website has two stylesheets, it uses both of them.
2. If a website has two CSS rules for paragraphs, it uses both rules…
3. …but if both rules have a color, the website will ignore the first color and use the second one.

1 |  p{
2 |    background-color:#000000;
3 |    color:#FFFF00;
4 |  }
5 |  code, p{
6 |    background-color:#00FF00;
7 |  }
8 |  code{
9 |    background-color:#000000;
10|    background-color:#0000FF;
11|  }

A webpage can have as many tags as you want. They are (almost) always used to group words together.

HTML has simple rules:

1. Elements need an open tag and a close tag.
2. Elements have to nest.

There are about 100 HTML elements. But you use only about 15 of them for most things.

The inventors of HTML liked abbreviations.

They could have invented a <paragraph> tag. Instead, they invented a <p> tag.

But if you don't know HTML, <paragraph> is much easier to understand than <p>.

Things you write really fast can be hard to read. Things that are easy to read can take a long time to write.

Whenever you're making a coding language, you want your language to balance being easy to write and easy to read.

Think back to CSS.

On a webpage, to change the background colors for all paragraphs and quotes to red, and all headlines to blue, you would create a stylesheet like this:

1 |  p, q{
2 |    background-color:#FF0000;
3 |  }
4 |  h1{
5 |    background-color:#0000FF;
6 |  }

You usually create two files to make one webpage:

1. An HTML document, maybe named index.html
2. A CSS stylesheet, maybe named styles.css

These files can be named anything you want, but should end with .html and .css.

A stylesheet can be long or short. Your webpage will work fine with no stylesheet at all (but it may not look very good).

Every webpage on the Internet begins the same way:

1 |  <!DOCTYPE html>
2 |  <html>
3 |    <head>
4 |      <title>My Webpage</title>
5 |    </head>
6 |    <body>
7 |      <h1>Hello, world!</h1>
8 |    </body>
9 |  </html>

You should always…

• …begin with <!DOCTYPE html>
• …have exactly one html element
• …have exactly one head and body inside the html
• …have exactly one title inside the head

What is this?

A sample of a book. The complete book will be printed on paper, which is why it's without a computer.

Why?

Because other learn-to-code books are:

• Boring. I thought a more interactive one would be fun.
• Expensive. You can code a website from scratch and publish it, all for free from a library computer. Why change that?
• Long. The only people who want to read 300 pages about Javascript already know Javascript.

Who's this for?

People who say, I'm just not a computer person.

Who are you?

Robert, aka Robin. Source code on Github.

Kickstarter: Support this book and learn more!