Summary of Stage 1 Lessons

Lesson 1: The Basics of the Web and HTML

How the Web Works

The web is a bunch of computers that communicate with each other. When a person goes to a web page like Bing, their computer sends a HTTP Request to a server. The server finds the appropriate HTML document and sends it back to the user's computer where a web browser interprets the page and displays it on the user's screen.

HTTP stands for Hyper Text Transport Protocol.


HTML stands for Hypertext Markup Language. HTML documents form the majority of the content on the web. HTML documents contain text content which describes "what you see" and markup which describes "how it looks".

Tags and Elements

HTML documents are made of HTML elements. When writing HTML, we tell browsers the type of each element by using HTML tags.

Inline vs Block Elements

HTML elements are either inline or block. Block elements form an "invisible box" around the content inside of them.

Block Tag Examples: h1, p, ul, table

Inline Tag Examples: b, em, a, img

Lesson 2: Creating a Structured Document with HTML

- HTML : The structure of a webpage

- CSS : The style of a webpage

The "tree-like structure" of HTML--DOM(Document Object Model

The "tree-like structure" comes from the fact that HTML elements can have other elements inside of them. You can draw this relationship like a family tree.

In a browser, this structure shows up as a series of nested boxes. There are boxes inside of boxes inside of boxes, and so on...

The relationship between indented HTML and boxes

When you read an HTML document as text, you see a wave of changing indentations going up and down the left side of the document. The more indented an element is, the more deeply nested it's corresponding "box" is.

Text Editors (for programming)

When writing code, programmers use special text editors (like Sublime Text and Codepen). These editors make the programmer's life easier. For example, some text editors will automatically generate a closing HTML tag when you write an opening tag.

Lesson 3: Adding CSS Style to HTML Structure

What is CSS?

  • CSS stands for "Cascading Style Sheets."
  • CSS give programmers a way to control how HTML elements are to be displayed.
  • External Style Sheets are stored in CSS files

The Benefits of Using CSS

*CSS saves a lot of work by avoiding repetition
-The style definitions are normally saved in external .css files. With an external style sheet file, you can change the look of an entire Web site by changing just one file!
*Avoiding Errors
-When programmers don't need to do the same thing over and over, they have less chance to make mistakes.
*Consistency and more realiable
-By using CSS, programmers can give similar HTML elements the same class name and then specifying the style that should apply to that class. So the similar or related contents can be dispalyed on the webpage in the same style.