1 An Overview Course in Web Development

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. The university where course is being taught is currently on the quarter system (10 weeks), but will be transitioning to semesters (16 weeks) next year. The general topics to be covered are:

  1. HTML5 and its Document Object Model (DOM)
  2. Cascading Style Sheets (CSS) level 2 and select level 3 modules. We'll include media queries and flex-box.
  3. JavaScript (ECMA Script 5 and 6) and use it for procedural, object oriented, and functional programming techniques applied to the client and server.
  4. HTTP(S), Websockets, Cookies, JSON Web Tokens
  5. Web server 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.
  6. Modern web applications and GUIs. We'll learn about model-view-controller and related client side frameworks. We'll get hands on with with the React framework and its ecosystem (react-router, redux, etc..)
  7. A representative subset of modern web development tools: Git, Node.js, npm, Webpack, ESLint, and Babel (transpiler).

2 Books and Such

In the past one version of this course used a book called "Programming the world wide web". Even though the 8th edition is available it was released in 2014 and hence is over 3 years old and contains information from previous editions that are considerably older. The approach taken by that book includes learning Javascript, Javascript/DOM; Perl, Perl for CGI; Java, Java serlets, Java server pages; PHP; C# and ASPNET; Ruby, Ruby on Rails;

In another version of this class the book Murach's Java Servlets and JSP, 3rd Edition was used. This edition was also written in 2014 emphasizes Java, Tomcat, Java Server Pages, JDBC, Java Servlets, and MySQL. Although Java is a fine language used in a number of contexts all the other technologies listed here are specific to Java and represent mostly a single company's approach to web development.

We will not be taking either approaches in this class since I feel the first approach would get us lost in too many languages rather than the essentials of programming for the web. Plus the fact that each additional language/runtime environment represents an installation and configuration challenge for the student. The second approach is too specific to Java and a particular web development ecosystem.

In this class we will be focusing on key concepts in web development. To simplify life for the student we will use only use one language in this class: Javascript. We will use it on the "front end", i.e., in the browser, and on the "back end", i.e., on the server.

In both browser and server we will try to use the most modern versions of Javascript available. Javascript has grown into a powerful multi-paradigm programming language and there are techniques that we will learn about that will allow us to use some of the latest features in Javascript before they are available in browsers (a process called "transpiling"). The reason we will be doing this is not to play with new esoteric features of the language but to take advantage of syntax and language facilities that ease a programmers burden!

You may be asking: "What about back end frameworks such as Java Servlets, Ruby on Rails, or Python Django?" First there are now fairly complete backend frameworks that support Javascript, however some of these do so much for you (and with good reason) that you can lose site of all that is being done for you. Instead we will use a minimalistic Javascript backend framework called express.js (of which other frameworks build on). Note that such "micro-frameworks" are gaining in popularity, for example the popular Flask micro framework for python. This will allow us direct access to HTTP protocol information such as headers, cookies, tokens, etc...

What about a textbook? There is no required textbook instead you will have assigned readings from various web sites. See the topics list page for the full list of readings on each topic. One of the main ones we will be using frequently for HTML, CSS, Javascript, and the DOM is the Mozilla Developer Network, others include Smashing Magazine and CSS-Tricks.

We'll be covering some but definitely not all the topics mentioned in Top JavaScript Frameworks & Topics to Learn in 2017, however since Web development is a continually evolving field we will try to pull out key concepts rather than just looking at the "latest new thing".

3 Development Tools and Such

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

  • 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:
  • Version Control. Everyone needs version control! We'll learn enough about git to aid you in dealing with your personal projects on your local machine and to form a foundation for when you participate in multi-developer projects. Use is required.

  • 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
    • Towards the end of the course building our more elaborate front end web applications via webpack
    • 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 and a text editor. I will anounce 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.

4 Tentative Schedule

Date Week # Topic
3/27 1 HTML, SVG, JavaScript, In Browser Web dev tools
4/03 2 CSS, Javascript and DOM, HTML
4/10 3 Javascript DOM, DOM Events, CSS
4/17 4 CSS Floats, Networking, HTTP, Git, Node.js, Quiz #1
4/24 5 CSS Positioning, Web Servers, HTML Forms,
5/01 6 More Server, Templates, Markdown, JSON, Document Database
5/08 7 Server stuff continued, Cookies, JavaScript Objects
5/15 8 Frameworks, React, Promises, Fetch/AJAX, Quiz #2
5/22 9 More React, Component Libraries, SVG,
5/29 10 CSS Grid, CSS Flexbox, Animations