Course Schedule 2019

Required Book: Learning Web Design (5th edition), by Jennifer Niederst Robbins. O’Reilly, 2018 (at Amazon). You must have this book. NOTE that this new edition has MANY changes. DO NOT get the 4th edition.

Nothing completed after the deadline will count.

The videos for this course are on YouTube.

[ Updated July 25, 2019 ]

This is the week-by-week outline for fall 2019. Weekly topics are subject to change.

Quizzes: The readings covered on a quiz are listed under the same week as that quiz.

DEADLINES for all quizzes and assignments are in Canvas.

Week 1

Introduction to the course. Topics: Web design and development. Tools, technologies and outcomes.

  • Text editors: Use Atom.
  • Web browser: Use Chrome. Always.
  • DO NOT USE Windows Notepad or Mac TextEdit. DO NOT even think about using a WYSIWYG application such as Dreamweaver. Here is why.

Week 2

  • Read Robbins Chapters 1, 2 and 4. These readings are on Quiz 1. (Check in Canvas for pages you can skip.)
  • Readings are to be completed before class meets. Always.
  • Note the quiz and assignment deadlines in Canvas.
  • Videos 2–6
  • Quiz 1
  • Assignment 1

Roles of HTML, CSS, JavaScript. Web browsers, client/server, request/response.

Introduction to HTML: structure, markup, images, links.

Week 3

HTML part 2: Text markup, lists, links, images. Block vs. inline elements.

Week 4

Introduction to CSS: Overview, selectors, colors, backgrounds, DIVs, pseudo-classes.

Introduction to GitHub. This 45-second video is recommended!

Week 5

  • Read Robbins Chapters 14 (all) and 16 (up to page 447).
  • Videos 19–28
  • Quiz 4
  • Assignment 4

CSS part 2: Margins, padding, borders, units of measurement, box model, box-sizing. CSS flexbox.

Week 6

Introduction to CSS grid. Web fonts, including Google fonts. Em, rem and percentages. Handling typography. Introduction to responsive design.

This is a big week.

Week 7

  • Read Robbins Chapter 21, pages 593–598 only.
  • JavaScript Beginners videos 1-18 (super short videos)
  • Codecademy: Introduction to JavaScript (interactive lessons): “Introduction to JavaScript”; “Variables”; “Control Flow”; “Arrays”
  • Quiz 6
  • Assignment 6

JavaScript introduction: Variables, numbers and strings, Booleans, basic math, if-statements, arrays.

Introduction to Repl.it.

Week 8

JavaScript part 2: Functions (arguments and returns), scope of variables, for-loops, while-loops and arrays. Defining problems, problem breakdowns, writing pseudo code.

Week 9

Introduction to Highcharts, a JavaScript library for mobile-friendly interactive charts and graphs (see also Highcharts Demo page). You will be embedding two different JavaScript charts in an HTML page for your assignment.

Week 10

HTML forms; design and layout for forms and quizzes; JavaScript and forms. You will make an HTML form for a fun quiz this week, and JavaScript will handle the quiz answers.

Introduction to Bootstrap, a Web framework. Simplifies the whole process of making responsive pages, especially when forms are used. All Bootstrap materials have been updated for Bootstrap 4 (2018).

Week 11

  • Read Robbins Chapter 22
  • Codecademy: Learn jQuery (interactive lessons) — 3 modules, “Introduction to jQuery: jQuery Setup”; “Learn jQuery: Effects”; “Event Handlers: Mouse Events”
  • Quiz 10
  • Assignment 10

Set up your domain at Reclaim Hosting (students/individual).

Introduction to jQuery and the DOM. In addition to setting up your hosted web space this week, you will create a one-page project with images, HTML, CSS and jQuery and upload it to your new site. The assignment requires you to use jQuery to manipulate the images on an HTML page.

Week 12

jQuery part 2: Adding and removing CSS styes. Traversing the DOM. Interactive image displays, content overlays, accordions and menus.

HTML 5 audio and video embeds, formats. This week’s assignment has you both editing audio AND embedding audio files into an HTML page so that people can play the audio.

Week 13

* * * Project proposals due SUNDAY night.

Producing interactive maps. In the assignment, you will create an original map and embed it into an HTML page.

Introduction to Leaflet, a JavaScript library for mobile-friendly interactive maps.

* * * Student project presentations during lab.

Week 14

Thursday is Thanksgiving. Lecture meets Tuesday AS USUAL. Attendance counts.

No quiz. No labs. No Friday workshop hours.

Week 15

Project work in lab. No quiz.

NOTE: Dec. 3 and 4 are normal class days. If you are not present, it will count as an absence. You are expected to attend lab this week at least to listen to the presentations, even if you gave yours two weeks ago.

* * * Student project presentations during lab.

Workshop hours: Dec. 6 from 1 to 4 p.m. in Weimer 3020. This will be your last chance to meet with me about your final project.

Project Due Date

All projects are due on Monday, Dec. 9, at 11:59 p.m. That is the Monday of finals week. You will post your project on your own website.

  • Post your project’s URL in Canvas by the deadline.
  • This URL is on your own website.

.