1 An Overview Course in Website Development

Spring Semester 2020

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:

  • Notepad++. Windows only. It comes up very fast and has a small footprint.

  • Brackets

  • Atom

  • Visual Studio Code

  • 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 Spring 2020

Date Week # Topic
01/20 1 No Monday class, Git, GitHub, Markdown, Intro
01/27 2 HTML, CSS, Git, JS 1
02/03 3 JS 2, CSS 1, HTML 2 (images, entities)
02/10 4 JS 2 (Arrays), JS Objects, JS DOM, CSS box model, Cascade & Inheritance, CSS Positioning
02/17 5 JS DOM Events, CSS Layout/Float, CSS Flexbox, Node.js and NPM
02/24 6 CSS Grid, JSON, JS Modules, Templates, Async JS I
03/02 7 Static Sites, Midterm #1 (3/4, 3/5)
03/09 8 Static Sites/Metalsmith, Networking I (Eth, IP, TCP, DNS)
03/16 9 HTTP, Promises
03/23 10 Web Servers, HTML Forms, Security, Authentication
03/30 11 Spring Break
04/06 12 HTTP Cookies, Sessions, Midterm #2
04/13 13 Document Database, React Intro, JSX
04/20 14 React Components 1, JS Functions, JS This,
04/27 15 JS classes, React class components, React interactivity
05/04 16 Fetch/Ajax, JSON APIs
05/11 17 Final Exam week