ADV 2450: Web Design 1

Classwork

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.

Homework

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

Classwork

Today’s code

Forms

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!

Homework

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

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.

Classwork

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.

Homework

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.

Classwork

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

Homework

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.

Classwork

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.

Homework

• 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.

Classwork

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

Homework

• 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