Agenda April 2nd

Today, we will cover 4 topics:
- review image maps
- read source code
- fragment ids
- review background gradients; new for 1:30 class

Grade mobile webpage

While instructor is doing that, students will start the exercise for today (see below).


1:30 only. Best practices for website design.

Start exercise

Download file:

While I grade your work, download and examine the code.

Insert this image on line 62, below the comment.

Create gradient for footer.

Use the code at the bottom of page 183 as an example. To learn more, read pages 183 -184 when you get home.   We’ve already covered in Sam and Percy’s presentation on March 7 in 12:30 class. In the 1:30 class, you can practice more after Joshua covers CSS3 Generators.

Also, try a few CSS edits such as:

Source Code

Go to We will copy:

"You may think that..."
to the end at:
"...customer expectations."

Fragment ID , page 310

Provide the capability to link to a specific portion of a page.  You can do this in the current page or a different page. There are two steps: 1) establish the target using an id, and 2) reference the target with a hyperlink. Use the # meaning same page. Although we have 8 sections in our page, for the sake of time, we’ll do just 4.

Analysis | Fundamentals | Prototype | Maintenance 

Image map, page 158

Remember that an image map is an image tht can be divided into several hyperlinks, called hotspots. The syntax is shown below. We will go into your image editor and determine the coordinates

<area shape=" " coords=" " href=" " >


NOT TODAY. Responsive images

We will not cover responsive images.  Please hold onto the files from March 30th. Then AFTER the group presents on responsive images, I’ll show you what I had in mind. I don’t want to restrict what they will cover.  In the meantime, check out tutorials on responsive design to further your skills because there is so much to learn on the topic.


NOT TODAY. Photo Gallery hands-on:

Will do another time.  Either closer to or after presentations on transitions, transformations and animation.  We don't want to impinge upon what the presenters will do.