Lesson 1

HTML & CSS

What is a website?

Think of it like a camp site. A camp site is one location where you can find lots of tents. Each tent is going to be different – some might be super different – but they’re all connected because they’re all on the same camp site.

A website is a collection of pages that are connected to each other. Each one will have different information on them, but they’re all part of the same location.

And on most websites you can travel from one page to another because of how they’re connected – that’s where the web part comes in. Think of it like a spider web. Spider webs are made of lots of tiny threads which all connect to each other. Each thread acts like a web going from one place to the next.

What makes a website?

HTML

& CSS

Websites are created using two basic coding languages: There are other coding languages, like JavaScript and PHP, which add other functions to a website. But HTML and CSS are the basic building blocks of everything you see on a website. To introduce you to HTML and CSS, here are some friends:

Mark

Mark

the HTML unicorn

Cassie

Cassie

the CSS dragon

What is HTML?

Hi, I’m Mark!

HTML stands for Hyper-Text Markup Language. This makes up all the content that you see on a website. All the text, images, and other boxes of information that you find on a website are written using HTML.

This is like the basic framework of a house. The bricks, the cement, the wood. Together, these tools create the structure of a website. Just like HTML tags make up the structure of a website.

Mark

Short for: Hyper-Text Markup Language
Favorite food: pizza
Favorite game: Checkers
Dream job: architect
Special skills: divvying

What is CSS?

Cassie

Short for: Cascading Style Sheet
Favorite food: croissants
Favorite game: Pictionary
Dream job: Party decorator
Special skills: flexing

Hi, I’m Cassie!

CSS stands for Cascading Style Sheets. This creates all the rules for what a website will look like and adds interesting style so a website design can look interesting and unique.

If HTML is like the framework of a house, CSS is like the wallpaper, the paint, the furniture, and the decorations. These CSS rules can make tiny changes to tiny details, or big changes to the entire website. That’s pretty powerful!

Are you ready to learn?

HTML and CSS are super fun and easy to learn – and with just a few short activities you can learn how to build your very own websites. If you want to get started and join us in World Wide Wonderland, the last thing you need is your ticket!

Here is a blank ticket, ready for you to make it your own.

You’ll need to use a little bit of HTML and CSS to do it. At the bottom of this page is a coding playground which is just what is sounds like. It’s a place where you can play with code and test new things out. On the left side are two boxes where the code is, and on the right is a view of what the code is making.

We’ve put all the code for creating your ticket into the box already. Now it’s your job to add the final details.

Are you up for the challenge?

  1. Add your name

    Type your name where it says My Name in the HTML box

  2. Pick a color

    Choose a color from the chart below and put the name of it where it says COLOR in the CSS box

    Red Orange Green Teal Navy Purple Black
    Pink Gold LightGreen LightBlue SkyBlue Violet White

  3. Play Around

    You did it! Now see if you can change other things, like the font color or border size

Build with us!

HTML

CSS

JavaScript

Output

Next Lesson