CS351
Website Development

Dr. Greg Bernstein

January 17th, 2020

Course Basics

Course Syllabus

  • The course syllabus explains the rules for this course
  • It is posted on Blackboard and will not change except under extraordinary circumstances
  • You and I are responsible for conforming to it. These slides are just a summary.

Class, Professor, and Website

CS351 Catalog Description

Website development emphasizing presentation layer with client-side and server-side technologies. Topics covered include HTML, CSS, media, JavaScript, CGI server-side programming.

Prerequisites

  • C- or better CS 301 (Data Structures and Algorithms)

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.

Topics

Which 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 Developer Roadmap.

Which Topics?

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. See for example Developer Roadmaps (frontend and backend).

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, (3) Security, (4) Performance, etc…

HTML

  • HTML5 will be covered fairly deeply but not comprehensively
  • The HTML Document Object Model (DOM). The manipulation and interaction of the DOM via JavaScript is the key to web GUIs and applications.
  • We will frequently use Markdown to help generate our HTML and for homework submissions.

CSS

  • Cascading Style Sheets (CSS) fundamentals will be covered
  • For responsive design we will learn and use media queries
  • For page layout we will only learn the modern FlexBox and Grid approaches.

JavaScript

  • We will use modern JavaScript (formally known as ECMAScript 2015) and more modern features as permitted by our browsers and Node.js

  • We will use it for procedural, object oriented, and functional programming techniques applied to the client and server.

  • We will explore some of the features of the built in features of the language such as Dates, Arrays, Strings, JSON, etc…

Templates

  • Almost all backend technologies support the concept of “templates” which mix code and markup.

  • Many front end frameworks such as Vue.js, Angular, and Ember also use templates.

  • We will use the Nunjucks template system by itself, in combination with the Metalsmith static site generator, and with our Express based servers.

Networking basics

  • We need to learn enough about networking so that we can run our servers and debug our web applications
  • Basic layers: Ethernet, IP, TCP
  • Upper layers: DNS, URLs, and HTTP

Web servers and frameworks

  • We will run local Node.js based web servers on our machines
  • We will build server functionality on top of Node.js with the Express.js server framework.
  • We will learn about No-SQL databases and use one in our server implementations

GUIs and Web Applications

  • We will learn to create graphical user interfaces (GUIs) in the browser with “vanilla” JavaScript and React.
  • We will learn to create full stack web applications with our server, JSON, React, and Fetch interfaces.

Procedures and Such

Weekly Readings

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

Assignments

  • Weekly problems sets will be posted on the course website with a reminder sent through Blackboard.

  • GitHub classroom for almost all the work in this class.

  • Assignment submission will consist of a commit of programming resources (HTML files, CSS files, JavaScript files, Images, etc…) to your private class repository on the properly named branch prior to the assignment deadline.

Assignments

  • No late assignments will be accepted for any reason.
  • No email submissions!
  • Repository branch names will be given with the assignment and must be followed exactly or the assignment will not be graded. A randomly selected subset of problems will be graded for each assignment.

Course Materials

  • All public course materials will be posted to the course website
  • Reminders and non-public materials distributed via Blackboard.
  • No paper copies will be distributed during class

Exams Section 1

  • Midterms: There will be two midterm examinations. These are currently scheduled for Wednesday March 4th, 2020 and Wednesday April 8th, 2020.

  • Final (cumulative): Monday, May 11, 2020 8AM-10AM per the University’s final schedule.

  • University policy states that no final exam may be taken before or after the scheduled time for any reason.

  • All final exams must also remain with the instructor.

Exams Section 3

  • Midterms: There will be two midterm examinations. These are currently scheduled for Thursday March 5th, 2020 and Thursday April 9th, 2020.

  • Final (cumulative): Tuesday, May 12, 2020 8AM-10AM per the University’s final schedule.

  • University policy states that no final exam may be taken before or after the scheduled time for any reason.

  • All final exams must also remain with the instructor.

Academic Dishonesty

Grading

  • Homework: 20%
  • Midterms: 25% each
  • Final: 30%

Other Issues

  • Student Rights and Responsibilities

  • Documented disability and want academic accommodations: contact me

  • Title IX and CSU policy prohibit discrimination, harassment and retaliation, including Sex Discrimination, Sexual Harassment or Sexual Violence.

Development Environment

Poll: Operating Systems

What will be your main operating system for course work in this class:

Mac OS (versions)

MS Windows (versions)

Linux (versions, distribution)

Don’t Understand the Question

Web Browsers

  • Latest version of either Chrome or Firefox.
  • Debugging and development tools in Chrome and Firefox are amazing compared to anything we had in the past. Shift-Ctl-I
    • HTML, CSS, DOM
    • Networking, JavaScript debugger

Code editors

Use your favorite! Or try:

Version Control.

  • Git/GitHub will play an integral role in this course
  • We will be using GitHub classroom technology (grant from GitHub)
  • You will need to run git on your local machine

Node.js

Running JavaScript without a Browser

  • This is Chrome’s JavaScript engine
  • Package management via npm
  • Build system via webpack
  • Webserver framework via Express.js

Dev Env Installation

  • A code editor (your choice)
  • Git version control (command line tool), GitHub account (free)
  • Node.js (npm comes with Node.js)
  • Everything else we’ll install via npm

Deployment Environments

We may get department server accounts for each student (Apache server) for our sites and applications.