Lectures and Schedule

1. Overview, Syllabus, HTML

We start with an overview of the course and logistics, then jump into HTML.

Out: Assignment 0

2. Intro to JavaScript

After recapping HTML, we introduce the JavaScript language, including a brief history, key syntax and concepts, and how to use it in the browser.

3. JavaScript ADTs, classes, modules

We continue our exploration of JavaScript syntax, including data structures, classes, and modules.

Due: Assignment 0

4. Events, interactors, and the DOM

We discuss how to use JavaScript to interact with the web page via buttons and inputs, as well as traversing page contents using the DOM.

Out: -->Assignment 1 (Wed)

5. Forms, more DOM, and intro to styles

We explore another example with interactors, forms, DOM manipulation, and communicating between classes. Then we start discussing how to apply styles to elements.

6. CSS, stylesheets, and page layout

We continue our discussion of styling our page elements, this time using stylesheet files, and we begin discussing concepts around page layout.

Due: -->Assignment 1

Out: Assignment 2.1

7. CSS Layouts

We discuss page layout using CSS, including block vs. inline elements and the box model. We then introduce Flexbox.

8. CSS Odds and Ends

We introduce Flexbox, then discuss a few assorted CSS details--different units and position--and wrap up our (initial) coverage of CSS.

9. async/await, APIs, and JSON

We turn our attention toward accessing external resources using fetch. We discuss async and await as a clean technique for working with Promises and fetch. Then we introduce APIs and loading dynamic content from a web server.

Due: Assignment 2.1

Out: Assignment 2.2

10. REST APIs

We discuss the structure of a REST API, including details of HTTP requests and responses. Then we discuss using fetch and async functions for accessing REST APIs.

11. More REST APIs

We continue our discussion of REST APIs, including error handling and more examples of sending and receiving data from the server.

Due: Assignment 2.2

12. Intro to Node and Node web servers

We turn our attention to server-side programming, first introducing Node.js and web servers in general, then showing how to write a web server/app in Node.

Out: Assignment 3.1

13. Node API backends

We continue looking at building a REST API using a Node web server with Express. We discuss Express middlewares, some common backend issues (e.g. CORS), and tips for designing API endpoints.

Due: Project proposal

14. Databases and MongoDB

We discuss storing our data in a database using MongoDB.

Note: To follow along during this lecture, you will need to install MongoDB (you will have to do this for assignment 3.2 anyway). Since it may take a little time to download and install, we recommend doing this before lecture.

Note 2: To initialize the MongoDB database for the students example, run mongosh init_db.mongodb. (If on Windows, you would run PATH_TO_MONGODB_BIN/mongosh.exe init.mongodb, where PATH_TO_MONGODB is the path you installed Mongosh to, from the instructions.

Due: Assignment 3.1

Out: Assignment 3.2

15. App Organization and History API

We discuss a few assorted topics that may be useful for various projects, including overall web app structure and managing the URL bar. We end with a quick intro to Git, which you may want to use to organize your project code.

16. Authentication and users

We discuss storing users in our database and logging them in, including using third-party providers like Google for account management.

Due: Assignment 3.2 (Sat)

17. Mobile pages and CSS tricks

We discuss a couple of techniques to make our pages more mobile-friendly, as well as a few assorted CSS tricks, such as animations and icon fonts.

Due: Project milestone

18. Accessibility

We discuss challenges that users may face when accessing your website, and techniques for mitigating those issues.

19. Misc topics and wrap-up

We give a whirlwind tour of a few more assorted topics. We'll end with a little AMA, so please bring your questions!

Due: Final project (no grace period)