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:
- Mozilla Developers Network (MDN) Getting Started With the Web (specifically the Installing Basic Software, Dealing with files, HTML Basics, and CSS Basics sections)
- Lynda.com HTML Essential Training, sections 1-7 (requires RIT login
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.
- Course Syllabus
- Slack Guides: Getting Started for New Users
- Firefox Developer Tools
- Chrome DevTools Overview
- Emmet Documentation
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.
In today’s exercise, you’ll create an .htaccess file for your igme230 directory on either people.rit.edu or cad.rit.edu, 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.
- Git for Designers (Daniel Fosco)
- Practical Series: Using Git and GitHub and Using Brackets to Manage Them - Chapters 1-4
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.
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.
- Semantic HTML (No. 12 of HTML & CSS is Hard)
- Separate Content and Presentation (Universal Usability)
In Tuesday's exercise, you'll be marking up a text document to turn it into a semantically meaningful HTML 5 document.
- 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
- CSS Font-Size: em vs. px vs. pt vs. percent (Kyle Schaeffer)
- CSS Box Sizing (W3 Schools)
- Child and Sibling Selectors (CSS Tricks)
- A Whole Bunch of Amazing Stuff Pseudo Elements Can Do (CSS Tricks) (an example of how you can hack webpage layout with complex CSS if you know what you're doing!)
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.
- The Elements of User Experience
- Making Material Design (6 min video)
- Designing Systems (chapter 1 of Atomic Design)
In this week's exercise, you’ll begin the design document for your personal portfolio site.
In this week's exercise, you’ll continue working on the design document for your personal portfolio site.
- Flow Chart Tools
- Draw.io - Free, web-based flowcharting tool
- Google Drawings and Microsoft Word and PowerPoint have flowcharting symbols available
- Microsoft Visio is available on lab computers
- Many of the wireframing tools linked below also have flowcharting stencils & tools
- Wireframing Tools
- Downloadable paper templates: Sneakpeekit, Smashing Magazine List
- UI Stencils (Analog) (Amazon has other options)
- Yahoo UI Stencil Kit - Available in multiple formats
- Cacoo - Web-based. Free for ≤6 diagrams, I’ve requested an edu license for the class
- Balsamiq - Desktop for Mac and Windows. Free for 30 days.
- Prototyping and Comp/Mockup Tools
- Visual Design Tools
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.
- A Hands-On Guide to Mobile-First Responsive Design
- MDN: Using Media Queries
- Responsive Design Examples
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.
Resources Related to Thursday's Lecture
- CSS Pseudo-Classes and Pseudo-Elements (MDN)
- MDN: CSS Values and Units
- Fluid Typography (CSS Tricks)
- Get the Balance Right: Responsive Display Text
- Reboots, Resets, and Reasoning
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.
For today’s exercise, you’ll be using Flexbox to create a page using the 3-column “Holy Grail” layout model.
- MDN CSS Grid Layout Guide
- Jen Simmons' Layout Land Channel
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):
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.
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)
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.
You’ll be applying what you learned in the CSS Animation tutorial to an HTML page that I'll provide.
Complete before class:
- Lynda.com: Learning SVG - Watch only Sections 1 and 2 (Core Principles, and Anatomy of an SVG).
Optional But Useful Resources
Some basic practice with SVG graphics implemented in HTML pages.
Week 9 (Oct 23/25):
Week 10 (Oct 30/Nov 1):
Optional Review (Objects & Arrays)
You should complete this exercise before class on Thursday, 11/1. I will be discussing it briefly in class on Tuesday.
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.
- CSS Tricks Complete Guide to Grid
- CSS Tricks: Complete Guide to Flexbox
- MDN: CSS Grid
- MDN: CSS Flexbox
- CodePen of In-Class Example
On Thursday we'll start talking about JQuery.
- jQuery Tutorial (HOME, Intro, Get Started, Syntax, Selectors, Events)
- jQuery Effects (Hide/Show, Fade, Slide, Animate, stop(), Callback, Chaining)
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
- The Effects of Parallax Scrolling on User Experience in Web Design
- How Website Usability Affects Conversion: Seven Real-Life Examples
Week 13 (Nov 20):
On Tuesday we’ll talk about accessibility for the web, and I’ll have you do some accessibility assessments of web pages.
- MDN: What is Accessibility?
- Web Content Accessiblity Guidelines (WCAG) At-A-Glance
- Tuesday Lecture Slides (please review if you don't attend class)
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
- MDN: Introduction to the Server Side
- MDN: Client-Server Overview
- Sending and Retrieving Form Data
Tuesday Homework OptionsYou 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.
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.
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.https://github.com/LawleyFall2018/230-fall2018/blob/master/weekly_materials/week13/accessibilityExercise.md#checking-an-rit-page-for-accessibility
- MDN: Server-Side Web Frameworks
- MDN: Introducing Node
- Front-End Frameworks in Web Development
- How to Choose a Front-End Framework
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.
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.