Photo of Professor Lawley

Professor Lawley

Website Design
& Implementation

IGME-230 / Fall 2018

Schedule of Content

This page contains detailed information about each week of the course, including readings (which should be completed before the class for which they're assigned), topics covered, in-class exercises and due dates, and any project deliverable due dates for that week.

If all you want is a list of due dates, those can be found in the myCourses calendar, with links back to the relevant exercise or project page.

Week 0 (Before class begins):
HTML & CSS Prereq Review

All students in this class are expected to have familiarity with basic HTML and CSS. I will not be reviewing basic concepts in this class, so if it’s been a while since you’ve taken a class that covers it (IGME-110 for NMID students, NMDE-103 for NMD students), you may need to get yourself up to speed before we begin. I recommend either of these tutorials:

On the Saturday after classes begin (September 1), I will offer an optional HTML/CSS “bootcamp” that you are welcome to attend if you’d like some extra help getting back up to speed on the concepts. Details will be provided in the class Slack.

Week 1 (Aug 28/30):
Course Overview / Web Publishing

On Tuesday, I will review the syllabus, goals, and requirements for class and discuss the tools and technologies we’ll be using for communication, collaboration, and content creation. On Thursday, we’ll talk about how web servers process the requests they receive from browsers, and how you can use .htaccess files to modify that behavior.

Tuesday Readings

Tuesday Exercise: Tools Setup

In this exercise, you’ll set up your GitHub account, set up an account on the class Slack, configure either Visual Studio Code or Brackets for use in class, and post a basic page to the RIT web server.

Thursday Readings

Thursday Exercise: .htaccess

In today’s exercise, you’ll create an .htaccess file for your igme230 directory on either or, and use it to redirect to a custom 404 error page.

Week 2 (Sept 4/6):
Git, GitHub, and GitHub Pages

This week we’ll talk about version control using Git, the web service GitHub, and publishing websites on GitHub using the GitHub Pages functionality. You will need to have set up your GitHub account, sent us your username, and accepted our invitation to the 230-students team to be able to complete the in-class exercise.

Tuesday Readings

Tuesday Exercise: Git and GitHub

In this exercise, you’ll work with two different GitHub repositories to learn how to submit a pull request to a repository controlled by someone else, and how to collaboratively edit a file with other users. You'll also create a repository to use for this semester's coursework.

Thursday Exercise: GitHub Pages

In this exercise you'll publish a personal page to GitHub, and set up a repository to use for your class materials.

Week 3 (Sept 11/13):
HTML & CSS: Beyond the Basics

This week we’ll take a deeper dive into aspects of HTML and CSS that aren’t covered in the prereq classes, including semantic HTML, complex CSS selectors, and CSS positioning and layout.

Tuesday Readings

Tuesday Exercise: Advanced HTML Markup

In Tuesday's exercise, you'll be marking up a text document to turn it into a semantically meaningful HTML 5 document.

Thursday Readings

  • MDN: Introduction to CSS (read Selectors, CSS values and units, Cascade and inheritance, and The box model)
  • CSS Layout (read Introduction, Floats, Positioning, and Practical Positioning examples)

Resources Referenced in Lecture

Thursday Exercise: Advanced CSS

During class, I'll work through how I used CSS to mark up the example page from Tuesday. You'll follow along, and then post your own version.

Project 1 (Landing Page): Due Friday, 9/14

Week 4 (Sep 18/20):
Designing for the Web

When we talk about “web design,” we’re actually talking about a much wider range of concepts than graphic design–we’re also talking about interaction design, usability, and accessibility. This week we’ll talk about the range of design issues related to the web. On Tuesday we’ll focus on the design process as a whole, and on Thursday we'll talk more specifically about applying design systems and patterns in the context of your next project.

Tuesday Readings

Tuesday Homework: Design Document (Strategy & Scope)

In this week's exercise, you’ll begin the design document for your personal portfolio site.

Thursday Readings

Thursday Homework: Design Document (Structure, Skeleton, and Surface)

In this week's exercise, you’ll continue working on the design document for your personal portfolio site.

Resource Links

Week 5 (Sep 25/27):
Responsive Design & Navigation

Mobile devices now make up more than half of the traffic to major websites. And it’s also still the case that people regularly print out web pages for a variety of reasons. That means web designers need to make sure their pages work on a variety of screens, and even in print format--not just on high-resolution large-screen computer monitors. The process of creating HTML and CSS that will adapt to a variety of devices is called responsive design. We'll look at techniques for responsive design, as well as using CSS for navigation that works in multiple contexts.

Tuesday Readings

Tuesday Exercise: Responsive Design

In this exercise, you'll use CSS media queries to create two layouts for the same site; one optimized for a small screen, and one optimized for a larger screen.

Thursday Readings

Resources Related to Thursday's Lecture

Thursday Exercise: Portfolio Design Review

In today's class, you'll break into small groups to review each other's portfolio designs. Take notes during this process. No later than Saturday noon, you should upload your notes (either the original notes or an edited version, your choice) to the Week 5 Portfolio Design Critique Notes dropbox on myCourses.

Week 6 (Oct 2/4):
CSS Flexbox and CSS Grid

Web layout technologies have changed significantly over the past several years, with new tools like Flexbox and Grid replacing older methods of CSS layout. We'll look at both technologies this week, and how they work together.

Tuesday Readings

Tuesday Exercise: Flexbox Basics

For today’s exercise, you’ll be using Flexbox to create a page using the 3-column “Holy Grail” layout model.

Thursday Readings

Thursday Exercise: Grid Basics

You'll be revisiting the Holy Grail layout, but this time using CSS grid to implement it. You'll also create a responsive image gallery without media queries.

Week 7 (Oct 11):
HTML Forms

Tuesday is a reading day, so we will not have class that day. I will be available for one-on-one meetings to provide feedback on your portfolio projects.

Tuesday Readings

No class, but it is a reading day! :)

  • MDN HTML Forms (Your first HTML form, How to structure an HTML form, The native form widgets, Styling HTML forms)

Thursday Exercise: Forms

Week 8 (Oct 16/18):
CSS Transitions & Animations; Scalable Vector Graphics

On Tuesday, we’ll look at how CSS can be used to create transitions and animations. On Thursday, we’ll talk about Scalable Vector Graphics on the web.

Tuesday Readings

Tuesday Exercise: CSS Animation

You’ll be applying what you learned in the CSS Animation tutorial to an HTML page that I'll provide.

Thursday Readings

Complete before class:

Optional But Useful Resources

Thursday Exercise: SVG Graphics

Some basic practice with SVG graphics implemented in HTML pages.

Week 9 (Oct 23/25):
JavaScript for Web Interactivity

This week we’ll start using JavaScript to implement interactivity in websites.

Tuesday Readings

Tuesday Exercise: Basic Javascript, The Document Object Model, & More About the DOM

Thursday Exercises: Javascript Functions & Javascript Events

Week 10 (Oct 30/Nov 1):
JavaScript: Building Simple Web Apps

We'll continue looking at how to use JavaScript to implement interactivity on web pages. On Tuesday you'll have an opportunity to work on exercises you haven't completed (for partial credit), and I'll talk briefly about the Web Storage Exercise (which is due on Thursday).

Optional Review (Objects & Arrays)

I will not be reviewing complex JavaScript data types (object literals and arrays) in class, but understanding them is important as we start dealing with more complex JavaScript applications. If you are not familiar with those data types from your prior programming classes, you should review the following:

Web Storage Exercise

You should complete this exercise before class on Thursday, 11/1. I will be discussing it briefly in class on Tuesday.

Web Services Exercise

We will work through this exercise in class on Thursday. It is due by noon on Saturday (but you'll probably have it done by the time class is over).

Reminder: Project 2 is Due at 8am on Monday, 11/5!

Week 11 (Nov 6/8):
Grid Review & JQuery Introduction

On Tuesday we'll review CSS Grid & Flexbox, since most of you weren't able to use these effectively in your portfolio project.

Tuesday Resources

On Thursday we'll start talking about JQuery.

Thursday Readings

Thursday In-Class Examples

Week 12 (Nov 13/15):
Applied JS and jQuery

This week we'll look at a variety of ways that jQuery can be used to enhance interaction and usability of a website

Tuesday Exercise: Pixel ArTeur

On Tuesday, I'll walk you through creation of an interactive graphic that uses grid, native JavaScript, and jQuery. The finished version must be submitted by the start of Thursday's class.

Thursday Readings

Thursday Exercise: JavaScript and jQuery for Web UX

On Thursday, I'll demonstrate a variety of ways that JavaScript and jQuery can be used to improve the user experience on a website. You must upload a page using at least two of the techniques demonstrated no later than Saturday at noon. It should be labeled: Week 12 Interactivity Exercise. (If the code is simply a cut and paste of my code, you will not receive full credit; you must adapt it to some content of your own).

Week 13 (Nov 20):
Web Accessibility

On Tuesday we’ll talk about accessibility for the web, and I’ll have you do some accessibility assessments of web pages.

Tuesday Readings

Tuesday Exercise: Accessibility Assessments

If you are unable to attend class on Tuesday due to travel plans, you will still need to complete this exercise.

Week 14 (Nov 27/29):
AJAX, PHP, and Frameworks

On Tuesday, we'll talk about ways to make your pages more dynamic, using server-side technologies like PHP, and browser-based JavaScript approaches like AJAX.

On Thursday, we'll talk about frameworks and what they are, and look at some of the more popular front-end frameworks, including those focused on site layout and interaction like Bootstrap, Foundation, and Materialize, those that focus more on application development like React and Angular. We'll also briefly discuss node.js, which is server-side JavaScript.

Tuesday Readings

Tuesday In-Class Exercise: Retrieving Data From the Server with AJAX

During class I'll walk you through using browser-based JavaScript to load files from the server without needing to refresh the entire page. The jQuery version of the exercise, which we'll cover in class, is due at the start of class this Thursday, November 29.

Tuesday Homework Options

You have two options for your homework assignment, which is due on Tuesday of next week--one that continues the AJAX in-class exercise, and one that involves creating a PHP contact form. Whichever you choose, it is due at the start of class on Tuesday, December 4.

Homework Option 1: PHP Contact Form

In this exercise you'll modify a PHP script that collects data from a form and sends you an email with its contents. You'll need to upload the files to either the RIT web server (banjo/people), or the CAD web server, since GitHub Pages doesn't support server-side code.

Homework Option 2: Using AJAX to Select Components of a Source Document

In this exercise you'll modify a PHP script that collects data from a form and sends you an email with its contents. You'll need to upload the files to either the RIT web server (banjo/people), or the CAD web server, since GitHub Pages doesn't support server-side code.

Thursday Readings

Thursday Exercise: Sample Practical

This sample practical will give you a good sense of what to expect on the final practical exam. You are welcome to ask for help from me or the TAs when working on this. It does not need to be turned in.

Week 15 (Dec 4/6):
Web Hosting Options; Practical Exam

On Tuesday we’ll talk about hosting options for your web projects--at RIT, on GitHub, and on other hosting sites. We'll discuss how you register domain names, as well, since that's often part of the process of publishing a website.

Finals Week:
Practical Exam Makeup & Final Project Due

If you fail the final practical exam in week 15 (with a score lower than 7/10), you will need to take the makeup version during our final exam time slot.

Your final individual project will be due this week.