Course Schedule 2018

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.

The videos for this course are on YouTube.

[ Updated August 14, 2018 ]

This is the week-by-week outline for fall 2018. 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: Aug. 22–31

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: Sept. 2–8

  • 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: Sept. 9–15

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

Week 4: Sept. 16–22

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

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

Week 5: Sept. 23–29

  • 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: Sept. 30–Oct. 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.

UPDATES TO COME, BELOW.

Week 7

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.

Week 8

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

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

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

  • 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

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

Producing interactive maps.

Introduction to Leaflet.

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

Week 14

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 README.md file:
    https://github.com/macloo/project-example
  • Deadline for Project – Week 1 is Sunday, Nov. 26 — because Thanksgiving.

Week 15

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 README.md file before you sync your repo.

Week 16

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 README.md 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. 10, 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.

.

Advertisements