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 May 6, 2020 ]
This is the week-by-week outline for fall 2020. 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.
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
- Read Robbins Chapters 5, 6 and 7
- Videos 7–14
- Quiz 2
- Assignment 2
HTML part 2: Text markup, lists, links, images. Block vs. inline elements.
Week 4
- 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.
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
- 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.
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
- No reading from the textbook.
- JavaScript Beginners videos 19-29 (super short videos)
- Codecademy: Introduction to JavaScript (interactive lessons): “Loops”; “Functions”; “Scope”
- 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.)
- 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.
- Quiz 7
- Assignment 7
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
- Robbins, pp. 597–598, “Adding JavaScript to a Page” — This is very short; it shows you how to put the script file at the END of the HTML file, just above the closing
</body>tag. - 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
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
- Read Robbins Chapter 9 (forms)
- Read my Bootstrap 4 Introduction
- Watch the Bootstrap videos on my 2 LinkedIn Learning (formerly Lynda.com) playlists (sign in to LinkedIn Learning here), which are linked in my notes about those videos
- Quiz 9
- Assignment 9
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.
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 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 JavaScript and upload it to your new site. The assignment requires you to use JavaScript to manipulate the images on an HTML page.
Week 12
- 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
- Quiz 11
- Assignment 11
More JavaScript: 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.
Thanksgiving Week
Neither the lecture nor the lab meets Thanksgiving week.
Week 13
- 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.
Introduction to Leaflet, a JavaScript library for mobile-friendly interactive maps.
* * * Student project presentations during lab.
Week 14
Project work in lab. No quiz.
* * * Student project presentations during lab.
Workshop hours: Last Friday before finals week — from 1 to 4 p.m. in Weimer 3020. This will be your last chance to meet with me about your final project.
Week 15
Project work in lab. No quiz.
NOTE: The last two class days in December are normal class days. If you are not present in your lecture or lab, 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 already.
* * * Student project presentations during lab.
Workshop hours: Last Friday before finals week — from 1 to 4 p.m. in Weimer 3020. This will be your last chance to meet with me about your final project.
Final Project Due Date
All projects are due on the Monday of finals week, at 11:59 p.m. 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.
.
Intro to Web Apps JOU 3363 