Course Schedule 2017

Required Book for 2018: 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.

Nothing completed after the deadline will count.

Updated May 24, 2018 ]

This is the week-by-week outline for fall 2017. Weekly topics are subject to change. Please check this page once a week for the latest updates. All assigned work is listed here and linked when linking is relevant.

Required Book: Learning Web Design (4th edition), by Jennifer Niederst Robbins. O’Reilly, 2012. You must have this book.

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 – Aug. 22

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

You should view some examples of innovative digital journalism work. Here are five recent examples of longform stories from the Tampa Bay Times, Sarasota Herald-Tribune, The New York Times and Los Angeles Times. We also like non-journalism examples at the Awwwards site.

Text editors: Use Atom if you can. Your instructor is using Atom; she has used both TextWrangler and Notepad++ in the past. Atom should work on Windows 8 and 10. It definitely works great on Mac OS.

Web browser: Use Chrome. Always.

If you want to use another professional-style text editor — such as Sublime Text, BracketsNotepad++ (Windows) or TextWrangler (Mac) — that’s okay. Atom is PREFERRED. However, 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 – Aug. 29

  • Read Robbins Chapter 1, pp. 4–14; Chapter 2 (all); Chapter 4 (all), but ignore pp. 51–52. These readings are on Quiz 1.
  • Readings are to be completed before class meets. Always.
  • Note the quiz and assignment deadlines in Canvas.
  • Quiz 1 must be completed before midnight on Monday, Aug. 29. You’re going to need the book.

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

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

  • Quiz 1
  • Assignment 1: An HTML page with headings, paragraphs and two images (HTML only).
  • Videos are online for chapters 1, 2 and 4, and for assignment 1. Note that the titles in the playlist clearly say which chapter is related to the video. The videos are the lectures for this course.
  • The two videos called “Intro to Web Apps Assignment 1,” parts 1 and 2, show you exactly how to do the assignment. You may or may not need these.

Week 3 – Sept. 5

  • Read Robbins Chapters 5, 6 and 7.
  • Resource (optional): HTML elements, at (all the tags — you can see what each one is used for)

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

  • Quiz 2
  • Assignment 2: A recipe page with links, images and lists (HTML only).
  • Videos are online for chapters 5, 6 (links) and 7 (images), and for assignment 2. Note that chapter 5 is broken up into several videos titled “HTML Basics,” 1–6. The YouTube playlist summarizes the contents of each video, so you can refer back to these later in the course as needed. If you think this adds up to too many videos for this week, think again — it is less than 150 minutes, which would be three periods of lecture. And you can play them at 2x speed, cutting the time in half. #noWhining
  • The three videos called “Intro to Web Apps Assignment 2,” parts 1, 2 and 3, show you exactly how to do the assignment. You may or may not need these.

Week 4 – Sept. 12

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

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

  • Quiz 3
  • Assignment 3: A page with header, footer, article, aside and figure, all with different backgrounds, plus an external style sheet (HTML and CSS). Post to GitHub. Note: Submit your URL in Canvas to be graded!
  • Videos are online for chapters 11 and 13. There are two videos to help you understand selection of colors and use of RGB hex codes, one video for chapter 11, and three videos for chapter 13. Total of six videos. These will be really helpful if you watch them!
  • There is no video walkthrough for assignment 3.
  • You might need to review some videos from last week in the “HTML Basics” set. The article and aside elements are covered in “HTML Basics Part 5.” The header and footer elements are covered in “HTML Basics Part 6.”

Week 5 – Sept. 19

  • Read Robbins Chapters 14 and 15.

CSS part 2: Margins, padding, borders, box model, box-sizing, floats and position.

  • Quiz 4
  • Assignment 4: Two separate pages with the same HTML content, each with three sections, each page styled differently, plus an external style sheet for each page (HTML and CSS). Post to GitHub with gh-pages branch.
  • Videos are online for chapters 14 and 15. Keep in mind that the videos do not contain all the information from the chapters, but they do demonstrate key concepts and show you how the CSS works in the browser under different conditions. There is also a video that shows what’s expected from you in Assignment 4.

Week 6 – Sept. 26

  • Read Robbins Chapters 3 and 12; Chapter 18, pp. 444–454 (responsive design). TIP: Chapter 12 is MOST important!
  • Watch Don’t Fear Web Typography (video, 16 min.), a great overview if you have never studied typography or design before now. Covers all the CSS properties for typography.

Optional resources

Web fonts, including Google fonts. Ems and percentages. Handling typography.
Accessibility and Web standards.
Introduction to responsive design.

  • Quiz 5
  • Assignment 5: Typography exercise (HTML and CSS). Responsive design for mobile. Post to GitHub.
  • Videos are online for chapters 12, 3 and 18. One video each for chapters 3 and 18. Three videos for chapter 12. One extra video about Google fonts. Total: six videos.

Week 7 – Oct. 3

  • Read Robbins Chapter 19, pp. 459–477.
  • Read jsFiddle: An online playground for your JavaScript, HTML, CSS — the appearance of jsFiddle has changed slightly, but all the things work the same way (mostly), and the four “panes” remain the same.
  • Watch (optional): Conditionals: If (video, 7 min. 7 sec.). Demonstrates if/else statements and use of the JavaScript console (in Chrome) — a useful way to practice and test your new skills. (Log into via eLearning to view this video.)

Optional resources

JavaScript introduction: Variables, numbers and strings, Booleans, basic math, if-statements, arrays, loops. Use of console.log() vs. <script> tags.

Introduction to jsFiddle.

  • Quiz 6
  • Assignment 6: Web page with JavaScript alert, confirm and prompt dialogs (HTML and JavaScript). Post to jsFiddle.
  • Videos are online for chapter 19. These are titled “JavaScript Basics” 1–6. They are probably essential to your successful completion of the assignment.

Week 8 – Oct. 10

JavaScript part 2: Functions (arguments and returns), scope of variables, more if-statements, for-loops and arrays. Defining problems. Problem breakdowns. Pseudo code.

  • Quiz 7
  • Assignment 7: Practice with JavaScript functions. Post to jsFiddle. There are three videos for Assignment 7. They explain everything about the code you must work with.
  • Videos are online for JavaScript functions. Not to be confused with “JavaScript Basics” 1–6. These videos include the word “Functions” in the video title. I think “JavaScript Functions 1” in particular will help you a lot.

Week 9 – Oct. 17

JavaScript part 3: While-loops, do-while, loops within functions, functions within loops, combining if-statements and loops.

Introduction to Highcharts (see also Highcharts Demo page).

  • Quiz 8
  • Assignment 8: Work with Highcharts (HTML and JavaScript). Post to GitHub.

Week 10 – Oct. 24

HTML forms. Design and layout for forms and quizzes. JavaScript and forms.

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

  • Quiz 9
  • Assignment 9: Create a quiz form with JavaScript using the Bootstrap framework. Post to GitHub.

Week 11 – Oct. 31

  • Read Robbins Chapter 20 — and — Robbins Chapter 10, pp. 192–198 (audio and video).
    • Chapter 20, pp. 485–491: Do your best to understand what the author is talking about.
    • Information on pp. 491–493 – don’t worry too much about this.
    • Polyfills: You should know what they are, what they do.
    • JavaScript Libraries: We will be using jQuery. You should know what libraries are, what they do. Don’t worry about Ajax.
    • jQuery, pp. 499–501: This will back up what you’re learning about jQuery at Code School and Codecademy.
    • Chapter 10, pp. 192–198: Understand how the tags work. Understand the options. Understand the requirements for file types. Note: We do not use Flash fallback anymore.
  • An Introduction to the Document Object Model (DOM) — 15 slides
  • Example: How to change the DOM (at jsFiddle)
  • Optional: jQuery exercises (examples of what jQuery can do)

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

Introduction to jQuery and the DOM.

JavaScript part 4: A form handler script (GitHub repo)

At Code School, complete “Try jQuery” levels 1, 2 and 3, including all exercises. The first video is long (10 minutes). The rest of the videos are much shorter.

At Codecademy, start the “Introduction to jQuery” course. You are only expected to complete the free parts. Note that Codecademy is using ES6, the newest version of JavaScript. The biggest difference you will notice is the use of let and const instead of var (var still works, by the way). We use const when the value of the variable will never change. We use let when the value of the variable will change.

Note: If you hate the Code School videos, switch over to Codecademy and try their interactive lessons instead. You might find one or the other is much more to your liking!  The information in each overlaps.

  • Quiz 10
  • Assignment 10: Set up your own website. Complete a small JavaScript project and upload the project folder to your website. Also post to GitHub.

Week 12 – Nov. 7

jQuery part 2: Interactive image displays, content overlays, accordions and menus.

HTML 5 audio and video embeds, formats.

JavaScript part 5: The switch statement, Booleans, arrays, objects.

NOTE: The switch statement was covered in Codecademy’s Learn JavaScript course: “Control Flow,” Lesson 7. (Example at jsFiddle.)

  • Quiz 11
  • Assignment 11: Build a music sampler app with jQuery and a switch statement (HTML, CSS and JavaScript). Post to your website and to GitHub.
  • Project proposals are due on Sunday, Nov. 12, in Canvas.

Week 13 – Nov. 14

Producing interactive maps.

Introduction to Leaflet.

  • Quiz 12
  • Assignment 12: Create an interactive map with Leaflet. Post to your own website.

Week 14 – Nov. 21

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

Project troubleshooting and workshop. Questions. Help.

No quiz. No Friday workshop hours.

  • Upload your project to GitHub. Post URL for your project’s GitHub repo in Canvas. Read the criteria in Project – Week 1 (Canvas).
  • Example of a GitHub repo with a proper file:
  • Deadline for Project – Week 1 is Sunday, Nov. 26 — because Thanksgiving.

Week 15 – Nov. 28

Project presentations in class. These will be 3 to 5 minutes per student. Show and tell, to the entire class. Make sure you have something to SHOW. Half of the students will present today, and half next week. Presentation criteria are posted in Canvas.

No quiz. No Friday workshop hours.

  • Commit and sync your project updates in GitHub. Read the criteria in Project – Week 2 (Canvas).
  • Write an update in your file before you sync your repo.

Week 16 – Dec. 5

Project presentations in class. These will be 3 to 5 minutes per student. Show and tell, to the entire class. Make sure you have something to SHOW. Half of the students will present today, and half next week. Presentation criteria are posted in Canvas.

No quiz.

  • Commit and sync your project updates in GitHub. Read the criteria in Project – Week 3 (Canvas).
  • Write an update in your file before you sync your repo.

NOTE: Dec. 6 is a normal class meeting day. If you are not present, it will count as an absence.

Workshop hours: Dec. 8 from noon until 4 p.m. in Weimer 3020. This will be your last chance to meet with me about the project.

Project Due Date

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

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