1 An Overview Course in Website Development

Fall Semester 2019

This is a course on web development for computer science students who are familiar with at least one programming language and have had a course on data structures and algorithms. It does not assume any familiarity with web technologies.

1.1 Topics

There are a huge number of topics that a web developer may encounter and use in the real world and many opinions on what a developer should know in any given year. See for example web developer roadmap 2019.

This course will strive to meet two goals: (1) focus on website development concepts and fundamentals and (2) keep up with current best practices related to those concepts and fundamentals. To accomplish this there are a number of items that will be out of our scope: (1) legacy browser support, (2) survey of backend technologies.

For example there are many approaches that have been developed for web page layout. We will only look at the current standardized techniques based on CSS Flexbox and CSS Grid since they are much better and easier to use than previous approaches that work with legacy browsers. Layout is difficult enough to get right!

The topics that we will cover include:

  1. HTML5 and its Document Object Model (DOM). We will frequently use Markdown to help generate our HTML and for homework submissions. The manipulation and interaction of the DOM via JavaScript is the key to web GUIs and applications.

  2. Cascading Style Sheets (CSS) fundamentals and media queries, flex-box and grid.

  3. JavaScript (ES 6) and use it for procedural, object oriented, and functional programming techniques applied to the client and server. This will include at least two asynchronous programming techniques: callbacks and promises.

  4. Templates (Nunjucks) and Static Site Generators (Metalsmith).

  5. TCP/IP Networking basics, DNS, URLs, and HTTP

  6. Web servers and server frameworks. To enhance understanding we will use a “micro-framework”. The representative server side framework we’ll use is based on Node.js + Express.js.

  7. Modern web applications and GUIs. We’ll get hands on with the React front end framework and a bit of its ecosystem.

  8. A representative subset of modern web development tools: Git/GitHub, Node.js, NPM, and a modern code editor.

2 Books and Such

What about a textbook? There is no required textbook instead you will have assigned readings from various web sites. These include:

  1. Mozilla Developer Network will be our main source for learning materials and we will follow the following learning tracks:

    • MDN: Learn HTML
    • MDN: Learn CSS
    • MDN: JavaScript Guide. We’ll use a subset of this. Note that their learning pathway for JavaScript is aimed at students new to programming. In this course we assume the student has had a programming language course and a data structures course.
  2. CSS-Tricks: Great CSS resources. We will use their Complete Guide to Flexbox and their Complete Guide to Grid

  3. Smashing Magazine: Another great resource for web developers.

  4. W3Schools is another useful resource.

3 Approach

In this class we will be focusing on key concepts in web development. To simplify life for the student, instructor, and to allow us to explore the key web concepts in sufficient depth we will use only use one programming language in this class: JavaScript.

We will use JavaScript on the “front end”, i.e., in the browser, and on the “back end”, i.e., on the server. JavaScript has grown into a powerful multi-paradigm programming language in addition the JavaScript open source “ecosystem” provides a huge array of libraries and frameworks for everything from 3D graphics to machine learning.

You may be asking: “What about back end frameworks such as Java Servlets, Ruby on Rails, PHP, or Django?” First, there are now fairly complete backend frameworks implemented in JavaScript that can rival those mentioned. However these frameworks have a significant learning curve and do so much for you (and with good reason) that you can lose sight of all that is being done for you.

Instead we will use a minimalistic JavaScript backend framework called express.js (of which many other frameworks build on). Note that such “micro-frameworks” are gaining in popularity, for example the popular Flask micro framework for python.

4 Development Tools and Such

  • Web Browsers: You need an up to date version of either Chrome or Firefox. I use both.

  • Version Control. Every programmer should be using version control for all but the smallest projects. We also need a way to privately share many files between student and teacher/grader. For this we will use GitHub classroom. We’ll learn enough about git to aid you in dealing with your assignments and personal projects on your local machine and with a remote repository. Use is required for most homework assignments.

  • Debugging and development tools: These come with Chrome and Firefox and they are amazing compared to anything we had in the past.

  • Code editors. There are a number of good free editors. I use several. Most provide some “linting”, “auto-completion”, and other things that ease a programmers burden. You can use any editor your like. I’d recommend looking at:

  • We’ll use (and you’ll need) node.js for the following tasks:
    • Package management for 3rd party libraries and development tools via its companion program npm
    • For running our templates, Markdown processor, and static site generation code.
    • Running our backend web server and application.

In summary to do the assignments in this class you will need a computer running node.js (with npm), git, a free GitHub account, and a text editor. I will announce the recommended versions of these systems at the start of the course. We will be adding modules to the node.js environment as the course progresses. Note that your development environment is your responsibility!!!. I cannot configure your computer for you.

5 Tentative Schedule Fall 2019

Date Week # Topic
08/19 1 Short week no Monday class, Git, GitHub, Markdown, Intro
08/26 2 HTML, CSS, Git
09/02 3 Labor day, no Monday class, JS 1, JS 2, CSS 1
09/09 4 HW#2 due, HTML 2 (images, entities), JS 2 (Arrays), JS Objects, JS DOM, CSS box model, Cascade & Inheritance, CSS Positioning
09/16 5 HW#3 due, JS DOM Events, CSS Layout/Float, CSS Flexbox, CSS Grid
09/23 6 HW#4 due, Node.js and NPM, Templates, Async JS I
09/30 7 Static Sites, Midterm #1 (10/02/2019)
10/07 8 (assign HW#5), Static Sites/Metalsmith, Networking I (Eth, IP, TCP, DNS)
10/14 9 HW#5 due, HTTP, Web Servers
10/21 10 HTML Forms, Authentication, Document Database
10/28 11 HTTP Cookies, Sessions
11/04 12 Database, Media Queries, Midterm #2 (11/06/2019)
11/11 13 React Intro, JSX, Components 1, JS Functions, JS This, JS Modules
11/18 14 JS classes, React class components, interactivity
11/25 15 Thanksgiving Break
12/02 16 Async JS II: Promises, Fetch/Ajax, React
12/09 17 Final Exam week