*This course will be conducted remotely and will be online only for Winter 2021*
Course Decription This course provides students with an introduction to web application development. The primary focus of the course is on front-end development: modern HTML5/CSS3/ES6 coding and frameworks. The course also spends some time surveying server-side technologies, but it's not a primary focus.
This is primarily a flipped course, with 1-2 hours of video to digest each week, plus a 60-90 minute interactive class session. Zoom breakouts will be used during the class sessions to enable students to collaborate on various challenges.
We will also rely on Slack for class communication between lectures, and office hours will all be remotely held on Zoom.
Course Contents
- Fundamentals of HTML5, CSS3, and JavaScript/ES6 for front-end programming
- Visual design, accessibility requirements, and assistive technologies
- Mobile website development
- Front-end frameworks such as Bootstrap and React
- Connecting to JSON web services and cloud-based data storage
- Debugging tools and techniques
- Essentials of HTTP 1.1 and 2.0
- Server-Side Frameworks (briefly): Node, Flask and Ruby on Rails
Coursework Students will be expected to complete weekly homework assignments and a final project. Projects must be chosen from a provided list of "project templates." Students can also propose a personal project subject to approval and equivalence with the standard project requirements.
Required Textbooks
- ($12) "HTTP: Learn Your Browser's Language", Julia Evans, 2019
- (Free online) MDN Online Reference https://developer.mozilla.org/en-US/
Grading Policy Grades are not curved in this class. I use a standard set of grade boundaries: 95-100: A 90-94: A- 85-89: B+ 80-84: B 75-79: B- 70-74: C+ < 70: Dealt with on a case-by-case basis.
LATE POLICY: Late assignments are not accepted. However, assignment deadlines are very flexible to accommodate the variety of situations we are all facing during the pandemic.
Tentative Weekly Schedule WEEK 1: HTML5: semantic markup, elements, attributes, and the DOM CSS3: Fonts, colors, borders, ids, classes, and the box model
WEEK 2: ES6: Functions, callbacks, DOM manipulation, page state CSS3: Modern Layouts with border-box, flexbox, and grid HTTP: Network basics
WEEK 3: HTML5 Accessibility: screen readers, visual alerting, and captioning CSS3: media queries, mobile-first design, icons, web fonts CSS3: frameworks
WEEK 4: ES6: Using cloud-based APIs, Local data, timers, asynchronous functions, service workers
WEEK 5: HTML5: Forms, audio, and video HTML5: Accessibility audits, page optimizations
WEEK 6: ES6: frameworks, polyfills, custom elements React, part 1
WEEK 7: React, part 2
WEEK 8: React, part 3
WEEK 9: Wrap-up session