GWD232 Syllabus, Winter 2014

Download syllabus: gwd232_syllabus_kruep(PDF)


Course Title: Intermediate Web Page Scripting

Course Number: GWD232

Session/Year: Winter 2014

Day/Time: Mondays and Wednesdays 6:00am – 8:45pm, Lab 805

Instructor: Patricia Kruep

Contact Info:

Office Hours: Mondays & Wednesdays, 5:30 – 6:00pm; Saturdays, 9:30am – 10:00am
*appointments preferred


Course Description:  An exploration of methods for styling websites and creating various page layouts. This course will examine the practical application of styling web page content.

Core Course Competencies: Upon successful completion of the course, the student should be able to:

Define terms and methods for styling web pages

  • Articulate the concept for a web page design
  • Identify issues of accessibility that need to be addressed when styling web pages for various devices
  • Discuss the benefits of separating structure and presentation during web site production

Apply various methods for styling web pages

  • Use CSS to visually design the presentation of web page content
  • Implement various page layouts
  • Design a web site that works on different screen resolutions and devices

Solve information architecture and communication problems with effective web site styling

  • Identify ways to use on-line resources for problem solving

Course Length: 10 weeks

Contact Hours: 6 per week

Credit Value: 4

Definition of a Credit Hour:  A quarter credit hour is an amount of work represented in intended learning  outcomes and verified by evidence of student achievement that is an institutionally established equivalency that reasonably approximates not less than

One hour of classroom or direct faculty instruction and a minimum of two hours of out-of-class student work each week for 10 to 12 weeks, or the equivalent amount of work over a different amount of time; or

At least an equivalent amount of work as required in paragraph (1) of this definition for other academic activities as established by the institution including laboratory work, internships, practicum, studio work, and other academic work leading to the award of credit hours.

Estimated Homework Hours: Read the assigned texts. Expect to spend several (at least 10) hours each week on this class. Good UX and web design doesn’t just happen—it is the product of an iterative process.

Academic Services/Advising: Your School Director or a member of the faculty or virtual advising team is designated as your academic advisor at The Art Institute of Washington. In addition to helping you succeed with your educational goals, the academic advisor will also guide you toward your career goals and successful completion of your portfolio work.  While every effort is made by all advisors to assist you in planning your schedules, it is your responsibility to know course sequence and prerequisites for your program of study. If you fail a prerequisite to a course for which you have pre-registered, it is your responsibility to change your schedule prior to the end of the add/drop period.

Disability Services: The Art Institute of Washington provides accommodations to qualified students with disabilities.  The Disability Services office assists qualified students with disabilities in acquiring reasonable and appropriate accommodations and in supporting equal access to services, programs and activities at The Art Institute of Washington.

Students who seek reasonable accommodations should notify the Disability Services Coordinator, Kristen Ames, at 703.247.2685 of their specific limitations and, if known, their specific requested accommodations.  Students will be asked to supply medical documentation of the need for accommodation.  Classroom accommodations are not retroactive, but are effective only upon the student sharing approved accommodations with the instructor.  Therefore, students are encouraged to request accommodations as early as feasible with the Disability Services  Coordinator  to  allow  for  time  to  gather  necessary  documentation.  If you have a concern or complaint in this regard, please contact Kristen Ames in Student Affairs, Suite #1107, 703.247.2685. Complaints will be handled in accordance with the school’s Internal Grievance Procedure for Complaints of Discrimination and Harassment.

Satisfactory Academic Progress: The Art Institute of Washington encourages students to excel in their classes and to earn the highest grades possible.  The minimum acceptable academic standard to become a graduate is to earn a 2.0 cumulative grade point average (CGPA) and pass at least 2/3 of the courses attempted (ICR).  Receiving a failing grade in any course requires a student to retake the class at the first opportunity.  The second, passing grade mathematically raises the CGPA.  Earning a D in a class is a passing grade; however, a D is worth only 1grade point and can lower the CGPA to below the minimum level to graduate (2.0).  Therefore, it is in the best interest of students to complete their courses with a grade of C or higher.  If students encounter difficulty with class material, they are encouraged to utilize the Academic Support Center (703-247-6818) on the 12th floor.  Should extenuating circumstances take place that require a student to stop attending classes, students are responsible for contacting their instructor, School Director, or the Registrar’s office on the 10th floor.

Academic Resources: Students are expected to utilize resources such as the campus library for research assignments and academic support center for tutoring needs.  Information on these services can be found on the student portal at

Student Conduct Policy: The Art Institute of Washington recognizes its students as responsible and dedicated men and women who are preparing for career employment.  An integral part of their career and professional development is the expectation that they conduct themselves during the education process in the same manner as will be expected in all employment situations.

As members of The Art Institute of Washington community, students have responsibilities and duties commensurate with their rights and privileges.  In this policy, The Art Institute of Washington provides guidance to students regarding those standards of student conduct and behavior that it considers essential to its educational mission.  This policy also provides guidance regarding the types of conduct that infringe upon the fulfillment of the Institute’s mission.  Please refer to the “Student Conduct Policy”, page 27, Student Handbook 2012-2013 for more details.

Scholastic Dishonesty: The Art Institute of Washington does not tolerate academic dishonesty.  Disciplinary offenses against the student code of conduct concerning academic dishonesty include, but are not limited to, plagiarism, cheating on assignments or examinations; engaging in unauthorized collaboration on academic work; taking, acquiring or using test materials without faculty permission; submitting false or incomplete records of academic achievement; altering, forging or misusing a college academic record; fabricating or falsifying data, research procedures, or data analysis; and deceiving the college and/or its officials.

If you are suspected of academic dishonesty of any kind, your instructor reserves the right to fail you for the assignment or the course.  Students may appeal in writing to the Dean of Academic Affairs.  Please refer to the “Student Conduct Policy”, page 27, Student Handbook 2012-2013 for further explanation.

Portable Communication Devices: The Art Institute of Washington is committed to providing an atmosphere that enables the highest quality of student learning. In order to ensure the maintenance of such an environment, The Art Institute of Washington prohibits the use of portable telecommunications devices (cell phones, pagers, mp3 players, radios, etc.) in classrooms during class meetings.  Such devices should be disabled prior to class periods to prevent their inadvertently sounding during classes.  Failure to adhere to this regulation may result in grade adjustments, dismissal from class, and/or additional disciplinary action. Page 8, Student Handbook 2012-2013.

Attendance Policy: The Art Institute’s attendance policy is designed to meet the requirements of state and regional accreditation, to support to the mission and goals of the organization, and to improve the academic performance of students through adherence to industry and educational standards of personal and professional development.  Faculty members are required to record attendance accurately.  Attendance is directly tied to academic performance.

Excessive absenteeism can result in severe academic penalties, including a failing grade for a course or removal from the course. Should absence be necessary, students are responsible for course material covered during the time of absence.  Students are expected to attend all regularly scheduled classes, including the first class of the quarter.  They are expected to arrive on time and to stay for the full duration of the class.

Students may drop or add classes during the first week of the quarter.  Students who fail to drop a class during drop/add period will be financially responsible for the cost of the class.  Students who do not attend any of their classes during the drop/add period will be withdrawn from the college. Students who miss seven total consecutive days of all scheduled classes, or 20 total calendar days from the date of last attendance in all scheduled courses (whichever is less), will be terminated from the college.

Student Evaluation/Methods of Assessment: 

Grading: Grading is based on culmination of points (think XP). Points are earned by completing various challenges. Point values for these challenges are based on their complexity and difficulty. Something easily accomplished (for example, submitting a URL) would have a lower point value than something of higher difficulty (for example, presenting a completed, working website). See below for an outline of types of challenges and their point values. Note that some of these are required, some are optional, and some may be completed multiple times for additional points.

Points awarded for a given challenge are based on effort towards the challenge and level of completion. Work must be officially submitted, per challenge instructions, for points to be awarded. Conversely, work not submitted or work not submitted correctly will receive 0 points. Late work may not received the full amount of points available.

Assignments: All assignments (aka challenges) and assignment details are posted to my faculty site, Assignments will have a corresponding placeholder, typically a link to the assignment, in the eCompanion course shell.

The following tasks and activities can be completed for points:

Skillz, 25pts each: Optional exercises, completed on your own time, designed to expand and enhance your understanding of HTML5 and CSS techniques and concepts. These are largely optional (though there may be a handful of required, and may be completed multiple times for additional points.

Creative Juice, 25pts each: Similar to Skillz, these are optional exercises geared towards expanding your design knowledge through experimentation and brainstorming.

Design Studio, 50pts each: These are in class activities, completed as a group (or guild), where design problems as identified, tackled, and refined in an iterative and interactive process. These are typically required. When in class, you are expected to participate.

Show and Tell, 50pts each: In class opportunities where you show off your work to your fellow classmates. These are optional, but strongly encouraged.

Red Carpet, 200pts each: Formal, in class opportunities to present completed projects, designs, concepts, or other work. Just like celebrities are judged by the media on their outfits, you will be judged on the quality and engagement of your presentation. Showing up with a disorganized, poorly considered presentation is the equivalent of walking the Oscar’s red carpet in yoga pants and a t-shirt. Just sayin’.

Crafting, 100pts each: These assignments are about taking the skills learned and applying them towards designing, building, and launching web pages. There are two main projects: a portal for linking to and displaying degree course work and a travelogue website. These projects are broken down into smaller, manageable assignments. All crafting assignments are required. Also, crafting is not strictly pixel- or code-based. Crafting can also include concept development and content development.

Validatorinators, small (50pts), medium (100pts), and large (200pts): You’ve got skillz, you’ve got knowledge, you’ve got creative juice. Validatorinators put all of that to the test. Validatorinators come in different shapes and sizes. Sometimes you validate solo, sometimes as a team. All validatorinators are required.

Plugged In, 50pts each class: Did you show up, on time, for class? Are you plugged in—that is, are you an active participant for class?

Levels: Everyone starts at level 0 (n00b) with 0 points. As you gain points by completing tasks and activities, you rise in levels, the highest being 20 (Master). See the levels chart below for levels and their points values. Your midterm grade is based on your completion percentage towards level 10. Your final grade is based on your completion percentage towards level 17. For example, by midterm you achieved 1400pts, level 8 (just shy of level 9). To reach level 10, you needed 1600pts. 1400 is   87.5% of 1660 (1400 / 1600 * 100). Looking at the grading scale below the levels chart, 87.5 is a B—your grade for midterm.




Level 20



Level 19


Level 18


Level 17


Level 16


Level 15


Level 14


Level 13


Level 12


Level 11


Level 10


Level 9


Level 8


Level 7


Level 6


Level 5


Level 4


Level 3


Level 2


Level 1


Level 0



Grading Scale:

A 100-92

A- 91.9-90

B+ 89.9-88

B 87.9-82

B- 81.9-80

C+ 79.9-78

C 77.9-72

C- 71.9-70

D+ 69.9-67

D 66.9-60

F 59.9-0

Class Policies: 

Submitting Work: All work must be posted on your student portfolio portal as per department requirements with the URL to the work submitted to the eCompanion course shell (specific instructions are given with each assignment), by the given deadline. It is your responsibility to ensure that all work online is kept up-to-date with the latest versions. It is also your responsibility to acquire alternate means of posting work online if your main account runs out of space. Finally, work not found via your portal will not be grade—this includes any work sent to me via email.

Late Work: Work turned in late will not be awarded the full amount of available points for the assignment. Point values decrease by 5% of the total value, rounded to nearest integer for each day the assignment it late.

Resubmitting Work: Work submitted on deadline may be resubmitted for an improved grade.

Lab Policies: No eating, drinking, smoking, chat/IM, installing software, or any other activity outlawed by the Technology department. Please limit surfing to the activity at hand.

Class Participation: When in class, you are expected to participate in class. That means participating in the activity at hand, be it working on a project, participating in a critique, following the lesson, etc. I urge you to make the most of the time and resources provided by this class and myself. Push yourself to the next level.

Class Conduct: Professional conduct is expected. Respect for classmates, the instructor, and the classroom environment is expected.

Class Communication: Primary communication is through scheduled class time. If necessary, students will be contacted through their student email account. Class assignments and other useful information will be posted at I am also available for IM/Chat on Google Talk/Google+ (pkruep) and AIM (pkruep, Twitter:, and Facebook: You can also email me at

Week 11: This course is 10 weeks. That is, we meet 6 hours a week 10 times over the course of the quarter. If a class period is missed due to school closing (holiday, inclement weather, school event, etc.) that class will be made up during week 11. The make-up class will meet at the regularly scheduled time and place. It is strongly recommended to not make plans for the scheduled class time during the 11th week.

Homework:  All assignments posted to

Handouts: All course resources or handouts posted to This includes assigned readings

Saving Work: You are responsible for all of your work. Keep backups of your files. Keep your files organized. School computers and the UAM server are not suitable or safe places to keep your files. It is a good practice to restart a lab computer before plugging in your own drive. On boot, the lab computers are reset to their initial settings. Any virus or other nasty that might be lurking there should be wiped away in the reset.

Student Web Space and Email: Students are required to have the password for their school email and server space by the first week of class.

Faculty Tardiness/Absenteeism: In the event that the instructor is late or absent, students should wait 30 minutes.  Students must then circulate an attendance sheet and designate one of their members to scan or clearly photograph the attendance sheet and email the scan/photo to the instructor.

Guest Speakers: A representative from the Library will give a presentation on copyright for text and images

Technology Needed:

  • Internet connection
  • Server space for student portal
  • Student web account is sufficient
  • Text editor (color-coding capability recommended)
  • Web browsers (Internet Explorer, Firefox/Mozilla, Safari, Chrome, Opera)
  • Will need to test on both Mac and PC platforms
  • Word processor
  • Presentation software (PowerPoint, Keynote, Google Presentation, etc.)
  • Adobe Acrobat
  • Image editing/creating software (as needed)
  • Storage media (USB drive/disk recommended)


Materials and Supplies:

  • Index cards (4×6 and/or 5/8). These are not precious. You’ll be using them like candy. Get many and bring them to class each week.
  • Sharpies or other markers for sketching
  • Notebook for storing class materials
  • Presentation binder for project bible/process book/documentation
  • Pens, pencils, and paper for taking notes, sketching out ideas, storyboarding, problem solving, flow charting, etc.

Course Calendar  –  Content subject to change at the discretion of the instructor.

  Topic Assignment Reading  Due Date
Week 1



Introduction to course and each other

Review and recap

Student Portal project

Design Studio: Portal designs

File management and web servers


Student Portal



See for list of each week’s reading assignments.





1/15 Getting started with web standards

Anatomy of a web page

Semantics & page structure with HTML

Travelogue site project


Travelogue site concept   1/22
Week 2



1/20: Martin Luther King, Jr. Holiday – no classes




1/22 Validatorinator (small)

Show & Tell: Travelogue concept

CSS selectors smack down

Colors, borders, backgrounds, and other CSS decorations



Travelogue site content and content outline/map   1/27
Week 3



Show & tell: Creative juice

Grids & grid systems

Design principles & gestalt


Mood boards & style tiles

Design studio: home page


Travelogue mood boards & style tiles






1/29 Show & tell: Skillz

Semantics & page layout with CSS

Rectangles & boxes

Positioning & floats

CSS Resets


Travelogue home page   2/5
Week 4



Validatorinator (small)

Show & tell: Creative juice

Design studio: Secondary page

Typography principles

Typography on the web









2/5 Show & tell: Skillz

Adding and manipulating type with CSS

Image replacement techniques

Using web fonts


Travelogue secondary page 1   2/12
Week 5




Validatinator (medium)

Don’t make me think!

How to give an elevator pitch



2/12 Midterm

Red Carpet: Travelogue site pitch

Design studio: “Get it” test


Travelogue tertiary page 1   2/19
Week 6


Show & tell: Creative Juice

Form design

Usable forms

Design studio: Info request form




2/19 Show & tell: Skillz

HTML5 Forms and  form elements

Styling forms

Building and styling tables

Under the hood with forms


Travelogue tertiary page 2/Information  request form   2/26
Week 7



Show & tell: Creative Juice

Accessibility by design

SEO by design

Design Studio: findable & accessible












2/26 Show & tell: Skillz

SEO and accessibility-friendly markup

Meta tags


Travelogue About/Colophon page   3/5
Week 8



Show & tell: Creative Juice

Responsive design

Media types, platforms, and considerations

Design studio: going mobile, going big






3/5 Show & tell: Skillz

Media queries and other responsive layout techniques


Travelogue mobile layout (home page)

Travelogue case study





Week 9



Show & tell: Creative Juice

Bleeding edge

Revisiting standards, what’s next?

Design studio: Open season










3/12 Show & tell: Skillz

CSS transformations & animations


Week 10




Red Carpet: Travelogue site & case study






3/19 Final

Validatorinator (large)


Week 11




(Make up for MLK holiday)

Class post-mortem



3/26 TBD      

Comments are closed.