Category Archives: WebWork 101

UTF-8, binary and hexadecimal: Quiz

Take the quiz:

UTF-8, Binary and Hexadecimal Quiz

10 questions.
This quiz tests your knowledge of UTF-8 encoding, binary and hexadecimal numbering systems and key vocabulary.
Binary conversions should be grouped in 4 bit Bytes separated by a space. Example 20 in binary is 0001 0011.
Hexadecimal answers should be in character form. Example: 5a, f2 etc. Capitals are allowed so answers can also be 5A, F2.

WebWork: Code Library

In this project you will begin developing a code library for future reference. Imagine your frustration 10 years from now when you are developing code for a website and can’t remember how to do something and then you suddenly remember wrote this code in High School. – Whew! What a relief!
Then all you need to do is jump to your cloud9 account or your archive disk and pull up the right page, copy and paste the code, test it, call your client to say you completed the task and ask them to send you a check!

Part 1: Build a mini-site:
Your code library mini site should have the following path:

Go to your panel and create a folder named ‘code’. note that folder names must be lowercase. While this is not required in any written documentation anywhere, I have had to solve hard to trace problems with capital letters not being recognized by the domain name server (remember what we said about DNS in the first week of this class?)

Create the 6 files you’ll need inside this code folder.
Your directory structure should look like this:

Next copy and paste code from your navbar project into the navbar.html page (only).
CAUTION: take only the essential code, drop any fancy backgrounds and images. When you look at this code later in life, you’ll need to quickly get to the code ‘snippets’ you need without having to sort through endless lines of coolstuffcode.

Copy the ‘ link rel=”stylesheet” etc ‘ statement into the head section of your new navbar.html page. Next copy the unordered list of page links into the body of this page.

Once that’s all working we’ll start working on the individual pages.

WebWork Unit 4: NavBars – Lesson 3 – CSS Selectors

You can select common objects in your html code and style them all at once using CSS Selectors.

There are three CSS Selectors you will need to know. These are, in order of cascading priority (remember cascading styles?????);

element – the element selector selects all html elements of a certain type and applies the style to all of them in the page.  So yo can select <p> to apply this style to all paragraphs or <h3> to apply a style to all h3 headings. Example:

p {
text-align: center;
color: red;

id – the id selector uses the html tag’s attribute to select one or more html elements in a page: The id starts with a # followed by the id name  ex. #name.  The html element needs to contain the attribute id=”name”, do not use the # in the html element.

<!DOCTYPE html>
#para1 {
text-align: center;
color: red;

<p id=”para1″>Hello World!</p>
<p>This paragraph is not affected by the style.</p>


class – the class selector lets you apply a style to  a specific type of element.  You can specify different styling to various type elements using the class statement preceded by the element type and a period or not, simply by not including the element type and period.

Example – without element type

<!DOCTYPE html>
.center {
text-align: center;
color: red;

<h1 class=”center”>Red and center-aligned heading</h1>
<p class=”center”>Red and center-aligned paragraph.</p>


Or you can specify the style only applies to a specific element type.

<!DOCTYPE html>
<style> {
text-align: center;
color: red;

<h1 class=”center”>This heading will not be affected</h1>
<p class=”center”>This paragraph will be red and center-aligned.</p>



Here’s the w3schools CSS Selector lesson.

WebWork Unit 4: NavBars – Lesson 4 – 2 level navbar

Learning Objective: In this lesson you’ll learn how to build a multi-level navbar also known as a dropdown menu. An example of a dropdown menu in a vertical navbar is used in the left hand column of math-sceinces…

Here’s a full treatment of 2 level nav bars from Tom at jsfiddle;

2 level navbar demo

You can read the original post at Stack Overflow but it is a bit complicated.

the basic idea is that the navbar consists of a ul with links but navbar elements with a dropdown contain another ul nested within that element. Ie a ul within a ul.

WebWork Unit 4: NavBars – Lesson 2

Lesson Objective: create a code library for future reference.

Dear Class,

I was amazed when I reviewed your navbar.html pages! Some of these sites had beautiful imagery, animated images and some integrated the navbar beautifully in the body of page content.

All that is good but now we need to create a code library for you to use later as a reference when you are doing webwork for a client.

Step 1: Log on to cloud9, create a new folder named ‘code’ (without the quote marks of course).

Step 2: create a new set of files; navbar, about, etc as you did in your last project. Change the ‘interests’ page name to ‘2-level-navbar.html‘.  Change your ul to include this new page. You can access these pages online using

Step 3: Build these pages with the css and navbar code from the last project. DO NOT INCLUDE ANY IMAGES, PAGE BACKGROUNDS OR ANY FANCY FEATURES! You should include 1 sentence of regular text which describes the page. Example: This is a NAVBAR.  Remember – this is a code reference for later use and years down the road you will need to find and grab snippets of code quickly. Keep it simple! This assignment will be graded and I will take off points for anything extra I find on the page.

Next lesson: Floating the navbar to full page width ie Full width float.

WebWork Unit 4: NavBars

Learning Objective:

Learn to develop a site Navigation Bar as seen in commercially produced websites.

Essential technologies

links (anchors)
unordered lists
link and block styling

Anchor Formats

There are 3 basic link formats
1] external link – you can never go wrong with this one; <a href=”URL”>Anchor Text</a>

2] internal links: use this format to link to other pages in the same domain  <a href=”/folder/filename.html>Anchor Text</a> or <a href=”filename.html>Anchor Text</a>

3] text anchors or placeholders – these are normally used to link to a section or div in the current page. Do not use this format for the navbar.<a href=”#anchorname”>Anchor Text</a>

A word about SEO:

How nasty is Google – this week’s fiasco!
WebPro News

WebWork project 1: The Jabberwocky

Project 1 (Unit 2)

Use the poem “The Jabberwocky” to demonstrate your knowledge of essential html tags.

  1. Format the poem into paragraphs.
  2. Enlarge and change the color of all characters who appear in this poem.
  3. List the characters using an unordered list.
  4. List the characters in order of importance using a) an ordered list with square bullets, b) an ordered list using the Roman Numeral style tag.
  5. List the characters and their attribute(s) using a descriptive list.


The following text is as presented in on 1/25/15.



’Twas brillig, and the slithy toves
      Did gyre and gimble in the wabe:
All mimsy were the borogoves,
      And the mome raths outgrabe.
“Beware the Jabberwock, my son!
      The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
      The frumious Bandersnatch!”
He took his vorpal sword in hand;
      Long time the manxome foe he sought—
So rested he by the Tumtum tree
      And stood awhile in thought.
And, as in uffish thought he stood,
      The Jabberwock, with eyes of flame,
Came whiffling through the tulgey wood,
      And burbled as it came!
One, two! One, two! And through and through
      The vorpal blade went snicker-snack!
He left it dead, and with its head
      He went galumphing back.
“And hast thou slain the Jabberwock?
      Come to my arms, my beamish boy!
O frabjous day! Callooh! Callay!”
      He chortled in his joy.
’Twas brillig, and the slithy toves
      Did gyre and gimble in the wabe:
All mimsy were the borogoves,
      And the mome raths outgrabe.