Class Fifteen

We made it! Today is the last day, and I will be sad to see you go but excited that you know a bit more about web design.

Final Exam

Here is the code, and here are 2 links you will need to complete your work:

Site Presentation

After we finish the exam, you will each come up and quickly present your work. I will have the link to your site ready, you will click through and tell us about the site. Try to keep your presentation under 3 minutes.

Last Words

I will end the semester with some words of wisdom.

Posted in Class Message, Final, Homework | Leave a comment

Class Fourteen

Today is purely a work day, although I will point out a few things in class. I will be meeting with each of


You ever notice those little icons that appear on the tabs of your browser? Those are called favicons, and they are super simple to make if you use any of these online services.

Experiment with these and see which one does the best job for you. Then, simply drop the resulting favicon.ico file (do not rename it, it needs to be called favicon.ico) into your www folder, on the same level as your index.html file. Reload your browser a few times, refresh your server through Cyberduck and the icon will appear shortly.


Your site needs to be finished by class time next week. I will not accept any late work at all. I will be grading your sites on Monday evening, so if you do need to make a change based on the final critique, you will have until 8pm. NO EXCEPTIONS. I will be able to check the timestamp on the files that are published on your server to make sure.

Here are the criteria for the final site.

Final Class Plan:

  • Final Exam: 1 hour 
    • This will be very much like the quiz, 10 questions involving live code that I give you
    • Open book, as usual
  • Final Site Presentation: 1 hour (each person presents for 3 minutes tops, I will be timing)
    • Each person will come up, introduce themselves, tell the class a little bit about their sites, and click through them. Then we will give a quick critique.
  • Wrap-up (up to 30 mins)
    • I will end the class with a few tips for you in terms of how to proceed
    • If we need more time for anything, I will cut this section as the notes will be on the site.


Posted in Class Information, Homework | Leave a comment

Class Thirteen


Holy cow, are we so close!

First off, the quiz! Here is some code for that. Here is the link for Listamatic.

You will have 1 hour to see how far you get, then we will assess the situation from there. We will all vote and agree on how these will be graded.

Here is today’s class code.

Today we are going over the forms again, then looking at the resume I put together to inspire you on yours.


Take my code and make it your own. I will not grade you well for just replacing my content with yours. After this week, you have one more week to work with me as your final sites are due at the beginning of class on December 16, the last day of class. We will also

Student Show Coming Up

We are supposed to have work in the student show by the 4th. I will go around and pick the people who are in the best shape to be shown as I want to submit live links.

Office Hours

I will be in my office at the usual hours (Tues 4:30pm-5:30pm and Thurs 10:30am-11:30am). Please make an appointment before you come, I have a lot of distractions at this time of year and can wander off.

Additional Hours this week via Skype (my handle is monstressme)

8-10 Tuesday night


Posted in Classwork, Homework | Leave a comment

Class Twelve


Today’s code


You must have a working contact form. I strongly suggest you use the one I am giving you in class, I will not be able to help you implement something you grabbed off the internet. There are way too many variables possible if you choose to do it your way.

Big Background Images

Someone needed this demo, so here we go!


Get your forms up, get your sites built. Ask me for help! Come to my office hours!

Posted in Classwork, Homework | Leave a comment

Class Eleven

Holy cow, is the semester running down fast! You need to be coding and designing and getting this work done. Please review the Web Site Criteria to make sure you are doing all you need to do.


Today, we are going to add custom fonts! Here is the code for today.

  • First, let’s really explore what CSS can do with system fonts. Here is a great video–it’s a little long, but it’s really lovely nonetheless.
  • Remember, I have asked you repeatedly to only use custom fonts you find on Font Squirrel.


Once again, you need to make significant progress on your coded sites. I will NOT accept any late work at all. You will be graded on what you turn in on the last day of class at the beginning of class.

Next week, we will be adding our working contact forms. We will go over what that will add to your site. I expect you to develop a full-blown sketch of your contact form for next week. I will be checking.

Next week, we will have our second quiz. Be sure to review ids, classes, text formatting, the box model, links, images, and link styles.

Please make an appointment with me during my hours so you can get the help you need.

Posted in Classwork, Homework | Leave a comment

Class Ten


Today, we are going to start making big strides!

  • Today’s code and files (it’s a big download, so click the link ASAP)
  • Adding the galleries
    • Processing the fully designed file
    • Coding the images into your page
  • Pseudo class selectors
    • Link states
      • a:link
      • a:visited
      • a:active
      • a:hover
    • Position/Number-based pseudo class selectors
      • last-of-type
      • before
      • first-child
      • Here is a great article on the subject


I received one Photoshop sketch this week, and an incomplete one at that. I had no takers on my office hours, no emails for help. You all need to make lots of progress before the last week of the semester when the final projects are due. You need to be coding now, as I will not be able to help you if you try to build your site at the last minute. I will

  • For the love of Pete, do the sketches I told you to do weeks ago, or suffer the consequences of a poorly designed site. I will be giving the grades you work for: if you don’t do the work, there is no way you will make a decent grade in my class.
  • Add galleries to your sites.
  • Get your styling under control.
  • Email me with questions.
  • Set up appointments with me during my office hours.


Posted in Classwork, Homework | Leave a comment

Class Nine


Class Files

Today, we need to do a positioning recap as I noticed a lot of strangely floating elements on your sites. No worries, it takes a while for that to really make sense.

  • Floats
  • Positioning
    • Static
    • Relative
    • Absolute
    • Fixed

Processing a design into images and code

  • We will review how to translate a design into code.

Lab time

  • I will be meeting with each of you and working on major issues.


  • Next week, we will add the gallery to our sites. You need to have all your images prepped and ready, using your Photoshop files to help you cut the images in the right way.
  • We will be adding custom typography on the 18th.
  • You need to flesh out your sites further, the semester will wrap up quickly and your work needs to really come together. I will be checking your sites weekly to see how things are progressing.
Posted in Classwork, Homework | Leave a comment

Web Site Criteria

In order to meet the basic criteria for this course, your site needs:

  • A site published to your URL, working properly
  • At least 4 pages, linked to each other in a consistent, workable navigation.
  • All links are working properly.
  • All images are added correctly, not resized by code.
  • A working contact form (to be taught soon)
  • A working gallery, using this gallery code (to be taught soon). Just remember, your gallery pages will have a larger image with thumbnails that when clicked, change the larger image.
  • Design that was formulated through site-maps, wireframes, and research as well as through actual applied design.
    • Your site should look polished and professional, using styling well to create a lovely, usable experience for oyur visitors
  • Well-developed HTML and CSS, showing a mastery of the skills you need to proceed as a designer.

Extra Credit:

  • using custom fonts (to be taught soon)
  • adding more pages that are WELL INTEGRATED
  • fully HTML version of your resume


Posted in Class Information, Final | Leave a comment

Class Eight: Midterm

Good morning!



  • Have your sites ready for a click through critique next week: this does not mean finished, but get as far as you can.
    • Have all your pages up
    • Style as much as you can, we will go over any issues you have
Posted in Classwork, Homework, Midterm | Leave a comment

Class Seven: Classwork and Homework


Oh dear goodness, last week was a wash. We need to catch up and get back on track today.

  • Go over quiz together
  • Download the raw code: from here on out, I will show you how to do stuff and you will have to translate it to your code
  • Reexamine the Box Model
  • Look at positioning
  • Processing your designs: an introduction
  • Lab time: I’ll meet with each of you to go over designs and plan strategy


  • Start making your rough coded sites look like your designs: start out with background colors, font sizes, easy details
  • Be ready for a short mid-term next week. It will be more actual coding, fixing code and getting stuff to work right
Posted in Classwork, Homework | Leave a comment