HTML/CSS: Website Project


  • To see the project example and what you will have done at the end of each stage, check out the Example Stages.
  • Watch some of the videos below as part of the intro to HTML.
  • Each stage's starting page has an overview and tips to read through; the steps for the project start on the subpages for each stage.

Intro to HTML videos

History of HTML (0:15-2:35)

HTML Tags - 10 most common tags (0:48-4:31)

HTML Coding: see in action (0:52-19:25) - long but very good way to see how it works.


General TIps

Open your pages in Notepad++

  • Open Notepad from your taskbar. The last page you were working on will be open.
  • If you don't see the page you want to work on, just go to File>Open and browse to your website folder.

View in Chrome

To see your page in the browser, just go to Run>Launch in Chrome.

The process

Step 1: Edit in Notepad

  1. Edit your code in Notepad, typing or changing something.
  2. Then Save (CTRL+S). 

You can tell if your page isn't saved in the document tab (red vs. blue):


Step 2: See how it looks in Chrome

  1. Go to your page in Chrome.
  2. Refresh using the Refresh button  or the keyboard shortcut F5.