Course Schedule 2017

Nothing completed after the deadline will count.

Updated Sept. 16, 2017 ]

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 (at Amazon). 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 Whatwg.org (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

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

Sign in at Codecademy (free) and complete Learn JavaScript “Introduction to JavaScript” (7 lessons), “Variables” (6 lessons), and “Control Flow” (9 lessons). Total of two modules. (“Introduction to JavaScript” and “Variables” are part of one module.) Past students have said these interactive lessons were very helpful.

I’m tracking your completion of these Codecademy modules, so you need to SIGN IN so you get credit. Check your UF email if you didn’t get your username and password.

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

Sign in at Codecademy (free) and complete Learn JavaScript “Functions” and “Scope.” Total of one module. Past students have said these interactive lessons were very helpful.

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” will help you a lot.

Week 9 – Oct. 17

Sign in at Codecademy (free) and complete Learn JavaScript “Arrays” and “Loops.” Total of one module. Past students have said these interactive lessons were very helpful.

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.

  • 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)
  • Example: Swapping images (at jsFiddle)
  • Optional: Additional resources for Video and Audio in HTML5

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

Sign in at Codecademy (free) and complete Learn JavaScript “JavaScript and the DOM.” Total of one module. Past students have said these interactive lessons were very helpful. This is the fifth and final module in the Codecademy JavaScript course. It has lots of lessons! Why so many? Because it is an introduction to jQuery!

Sign up for Code School (free) and complete “Try jQuery” levels 1, 2 and 3, including all exercises (the total of all levels in “Try jQuery” is 5). Also complete the first Codecademy jQuery module: Introduction to jQuery (13 lessons). Note that extra credit is available for the Codecademy lessons if you are signed in with the Codecademy ID that I am tracking (same as for Codecademy JavaScript).

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

Introduction to jQuery and the DOM.

  • Quiz 10
  • Assignment 10: Set up your own website. Complete a small project; upload the project folder to your website.
  • Deadline for JavaScript Codecademy extra credit: 11:59 p.m. on Saturday, Nov. 4 (not jQuery, only JavaScript). Note: Nothing in the JavaScript course completed after this deadline will count.

Week 12 – Nov. 7

At Code School, complete “Try jQuery” levels 4 and 5, including all exercises. Also complete the following Codecademy jQuery modules: “jQuery Functions and Selectors,” “Modifying HTML Elements,” and “jQuery Events.” Note that extra credit is available for the Codecademy lessons if you are signed in with the Codecademy ID that I am tracking (same as for Codecademy JavaScript).

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

HTML 5 audio and video embeds, formats.

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

  • 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

Complete the final Codecademy jQuery module: “jQuery Effects.” Note that extra credit is available for the Codecademy lessons if you are signed in with the Codecademy ID that I am tracking (same as for Codecademy JavaScript).

Producing interactive maps.

Introduction to Leaflet.

  • Quiz 12
  • Assignment 12: Create an interactive map with Leaflet. Post to your own website.
  • Extended: Deadline for all Codecademy jQuery extra credit: 11:59 p.m. on Saturday, Nov. 25. Nothing completed after the deadline will count.

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 README.md file:
    https://github.com/macloo/project-example
  • Deadline for all Codecademy jQuery extra credit: 11:59 p.m. on Saturday, Nov. 25. Nothing completed after the deadline will count.
  • 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 README.md 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 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. 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.

.

Advertisements