All / Class 06 & 07 & 08 - Building your first website

Class 6 & 7 & 8 – Building your first website


Parts of a Website

Photo by


Your first Home Page

Activity 1:  Create wireframe of site below.


Activity 2: Build site with instructor using files on server.

You can find the text for the site here:

<h1>I design + program websites<p>Design + code? What does that mean anyway? This simply means that I can do both and be happy. Design and programming. The good news: I know both sides. Because sometimes a designer has no idea of the future implementation and development of this sometimes makes little sense for an attractive design. Therefore, it is for me the best of both.<h2> Portfolio[insert image]<H2> Contact<p>Links:My FacebookMy SpaceMy Linked InRead my blogContact Me @


Your First Website – developing a site and linking pages together

What’s an alt (Alternative) page?

We refer to all pages of a website that is not the home page as ALT pages. Sometimes these pages look a little different, less flashy than the main index page.

Activity 3: Practicing what we’ve learned so far – making our first website


Step 1: Create wireframe; name divs

Step 2: Step by step with instructor to build framework using divs

Step 3: Create external stylesheet

Step 4: Demonstration on how to create ALT pages

Step 5: Demo on how to link pages together

Homework due 10/5

Part 1:

Customize the site in Activity 1 using new photo, background, type and colors. Points will be given for creativity and css skills used.

Part 2:

Bring with you your exhibit site home page so far. You will do a quick presentation. If you haven’t coded much, please bring a wireframe and any other planning you have done to date.

Homework due 10/12

Part 3: Install font courgette and customize slogan font to look like bulldog screenshot. Use as many classes as you want to achieve.

Homework due 10/19

Part 4

  • Decrease top container size to 1000px
  • Finish footer divs and text css styles for both footers using screenshot above.

Part 5: (not yet due)

Link all pages and customize with new images and headlines