Welcome to Web Dev 101!

Hi there!

Welcome!

This document that you have in your hand or on your screen is your key to becoming a new web developer. It’ll be tough, but you’ll pick it up no problem if you keep at it. This course is practical, we will learn by doing, so there are a lot of exercises for you to work through.

This isn’t a tutorial, if you’ve done any tutorials you’ll know it’s pretty hard to learn the fundamentals from them. Instead it’s a set of exercises that starts at the foundations and bulds up, each step on the last.

You’re going to learn from the ground up, skipping nothing, until you have a solid foundation on which to work. Welcome to the secret ways of the Internet!

As a very wise old web developer once said,

“How awesome is working on the web? This Awesome!”

Technologies you’ll need

The two main technologies we’ll be covering in this book are HTML and CSS.

What is HTML?

HTML is used for defining the CONTENT of a web page. The words you see on the screen, that’s the CONTENT. It’s a markup language, we write a document in words, then we mark up specific parts of that document to make them make sense.

Maybe this bit is a paragraph, maybe this bit is a heading. HTML lets us say what the parts of the page are for.

We use the word SEMANTIC HTML (write that down). The word SEMANTIC means “to do with meaning”, our HTML conveys meaning.

What is CSS?

CSS on the other hand is for defining the APPEARANCE of the page, it’s for STYLING. We can choose a font, colours, line heights, letter spacing. We can do a layout and tell this bet to go on the left and this bit on the right.

We can provide different styling for mobile phones.

And JavaScript?

Good question. We’re not covering JavaScript in this course, but JavaScript is for behaviour. It’s a tidy little scripting language that you will want to look at somewhere down the line.

HTML / CSS / JS sum up

• HTML - page content, structure and meaning (semantics)
• CSS - page stying and appearance, including layout and mobile layout
• JavaScript - page behaviour. Not covered in this course, but you can circle back to this later.

Types of HTML

HTML has had many incarnations over the years. All of these are similar, but successive refinements have been added over time to cope with our evolving understanding of the best way to make a website.

The way they have changed reflects our changing understanding of what web design should be like.

Three types of HTML are in use today. These are:

HTML4

HTML4 is the oldest type of HTML still in use. You’ll still see it around on junky old websites that haven’t been updated in a while. HTML4 had a loose syntax and was very friendly. You could pretty much do what you wanted and it would have a go. This was nice, but also a problem. Because it wasn’t strict with you, it was easy to make a mistake and not notice.

And so we got XHTML

XHTML stands for eXtensible Hypertext Markup Language. It’s actually a specific dialect of XML which is a generalised markup language. XHTML was the exact opposite of HTML4 and was a reaction to it. It was incredibly strict and would punish you if you made a mistake. If it were a person, it would have a bristly moustache and a clipboard. It’s still in use, although less so now.

HTML5

And this brings us to HTML5. This is the dialect of HTML we’ll be learning today. It’s the latest specification. It’s a happy balance between strict and loose. It lets you screw up, but not too badly. It will fix your mistakes, but not the big ones. In short, it’s rather nice.

General trends in WebDev

See how this has worked out? In the old days, HTML was super relaxed, not even a language. We didn’t really see ourselves as professionals, and front end development was not seen as real programming.

Later we decided to get serious, so we imported XML and got super militant. It was an overreaction, but it felt right at the time.

Nowadays we’re a bit more relaxed. We’re secure in ourselves. We know that web dev is real software development and we don’t have anything to prove, so we’ve invented this nice, useful markup language that isn’t too strict but still takes things seriously.

Styling with CSS

CSS is the language we use for styling documents. There have been many iterations of this, but the current one is CSS3. CSS stands for Cascading Style Sheets (pretty cool). It lets you select parts of a web page and then add styling overrides to it.

Some people really hate CSS, but I think this is maybe because they never took the time to learn it. CSS is pretty simple, and will make you happy if you study its ways.

Now on the the course!