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.
[ 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.
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.
- 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
Introduction to HTML: structure, markup, images, links.
HTML part 2: Text markup, lists, links, images. Block vs. inline elements.
- Read Robbins Chapters 11 and 13
- Videos 15–18
- Quiz 3
- Assignment 3 (at GitHub)
- Optional read: How GitHub Conquered Google, Microsoft, and Everyone Else (Wired, March 2015)
- Resource (optional): GitHub Guides — Hello World (a clear guide to using GitHub)
Introduction to CSS: Overview, selectors, colors, backgrounds, DIVs, pseudo-classes.
CSS part 2: Margins, padding, borders, units of measurement, box model, box-sizing. CSS flexbox.
- Read Robbins Chapters 16 (pages 447–484), 12 (all) and 17 (all)
- Videos 29–32
- How to choose and use Google fonts (video)
- Quiz 5
- Assignment 5
Introduction to CSS grid. Web fonts, including Google fonts. Em, rem and percentages. Handling typography. Introduction to responsive design.
This is a big week.
- Read Robbins Chapter 21, pages 593–598 only.
- Quiz 6
- Assignment 6
Introduction to Repl.it.
- No reading from the textbook.
- Read “Algorithmic thinking: The key for understanding computer science”: http://bit.ly/algo_think
- Watch What is an algorithm and why should you care? (Khan Academy video, 5 min. 27 sec.)
- Quiz 7
- Assignment 7
- Data Visualization 101: How to Choose the Right Chart or Graph for Your Data — It’s important for your assignment that you understand that certain chart types are entirely inappropriate for some kinds of data. Choosing the wrong chart type will severely impact your grade on Assignment 8.
- Adding Charts to Your Site with Highcharts — This tutorial walks you through how to work with Highcharts.
- Pie Charts: The Worst Chart in the World — This could also impact your Assignment 8 grade.
- JSON: What It Is, How It Works, & How to Use It — Please don’t panic when you see this; it is just an explanation of what you will see already written out for you in the Highcharts code.
- Quiz 8
- Assignment 8
- Read Robbins Chapter 9 (forms)
- Read my Bootstrap 4 Introduction
- Watch the Bootstrap videos on my 2 Lynda.com playlists (sign in to Lynda.com here), which are linked in my notes about those Lynda.com videos
- Quiz 9
- Assignment 9
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).
- 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.
- Read Robbins chapter 10, Embedded Media — only the section headed “Video and Audio,” pages 219–228
- Access to music files: How to get free legal music downloads
- Read: Your website, week 2
- Codecademy: Learn jQuery (interactive lessons) — 2 modules, “Learn jQuery: Style Methods” and “Learn jQuery: Traversing the DOM”
- Quiz 11
- Assignment 11
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.
* * * Project proposals due SUNDAY night.
- Read: Creating an Interactive Map with Leaflet and OpenStreetMap, by Andy Maloney
- Read: Introduction to Leaflet.js
- Quiz 12
- Assignment 12
Producing interactive maps. In the assignment, you will create an original map and embed it into an HTML page.
* * * Student project presentations during lab.
Thursday is Thanksgiving. Lecture meets Tuesday AS USUAL. Attendance counts.
No quiz. No labs. No Friday workshop hours.
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.